{"version":3,"sources":["webpack:///./views/mall/index.vue?cbfa","webpack:///./views/mall/index.vue","webpack:///views/mall/index.vue","webpack:///./views/mall/index.vue?4a42","webpack:///./views/mall/index.vue?b0b4"],"names":["render","_vm","this","_c","_self","ref","staticClass","staticRenderFns","name","data","timer","seriesData","value","map","created","mounted","methods","initMapEcharts","axios","console","echarts","title","text","left","subtext","sublink","tooltip","trigger","formatter","visualMap","min","max","realtime","calculable","inRange","color","series","type","that","setTimer","seriesIndex","dataIndex","curIndex","clearTimer","beforeDestroy","component"],"mappings":"kHAAA,W,2CCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,IAAI,aAAaC,YAAY,kBAEhHC,EAAkB,G,sDCUP,GACfC,WACAC,OACA,OACAC,WACAC,YACA,CAAAH,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,cAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,gBAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,aAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,YAAAI,qCACA,CAAAJ,WAAAI,qCACA,CAAAJ,eAAAI,kCACA,CAAAJ,eAAAI,kCACA,CAAAJ,WAAAI,kCACA,CAAAJ,WAAAI,mCAGAC,WAIAC,YAGAC,UACA,uBAEAC,SACAC,iBAGAC,gCACAC,eAEAC,uBACA,oBAEA,0CAEA,SAEAC,OACAC,cACAC,cACAC,eACAC,wGAGAC,SACAC,eACAC,sBACA,mCAKAC,WACAC,MACAC,QACAT,oBACAU,YACAC,cACAC,SACAC,8CAIAC,QACA,CACAC,WACAxB,YAEAJ,wBAWA,sBAEA,gBACA,WAEA,yBAAA2B,WAAA,YACAjB,eACAmB,kBAGA,wBAAAF,WAAA,YACAjB,eACAmB,qBAKAC,WAEA,SACA,sCACA,4BACA,+BAEA,yBACAF,gBACAG,cACAC,cAGAC,UAEA,yBACAL,iBACAG,cACAC,cAGA,yBACAJ,eACAG,cACAC,eAEA,MAEAE,aACA,wCAIAC,gBACA,oBCxK+U,I,wBCQ3UC,EAAY,eACd,EACA7C,EACAO,GACA,EACA,KACA,KACA,MAIa,aAAAsC,E","file":"js/chunk-48297573.32ff4dd9.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=2c171181&prod&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('div',{ref:\"mapEcharts\",staticClass:\"map-echart\"})])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div>\n        <div ref=\"mapEcharts\" class=\"map-echart\"></div>\n    </div>\n  \n</template>\n\n<script>\nimport * as echarts from 'echarts'\nimport axios from 'axios'\nimport Mock from 'mockjs'\n\nexport default {\n  name: \"Map\",\n  data() {\n    return {\n      timer: null,\n      seriesData: [\n        {name: '广东省', value: Mock.Random.float(500,1000,0,0)},\n        {name: '北京市', value: Mock.Random.float(500,1000,0,0)},\n        {name: '河南省', value: Mock.Random.float(500,1000,0,0)},\n        {name: '重庆市', value: Mock.Random.float(500,1000,0,0)},\n        {name: '台湾省', value: Mock.Random.float(500,1000,0,0)},\n        {name: '四川省', value: Mock.Random.float(200,400,0,0)},\n        {name: '内蒙古自治区', value: Mock.Random.float(200,400,0,0)},\n        {name: '云南省', value: Mock.Random.float(200,400,0,0)},\n        {name: '浙江省', value: Mock.Random.float(200,400,0,0)},\n        {name: '山西省', value: Mock.Random.float(200,400,0,0)},\n        {name: '福建省', value: Mock.Random.float(200,400,0,0)},\n        {name: '新疆维吾尔自治区', value: Mock.Random.float(100,200,0,0)},\n        {name: '青海省', value: Mock.Random.float(100,200,0,0)},\n        {name: '西藏自治区', value: Mock.Random.float(100,200,0,0)},\n        {name: '甘肃省', value: Mock.Random.float(100,200,0,0)},\n        {name: '陕西省', value: Mock.Random.float(100,200,0,0)},\n        {name: '湖北省', value: Mock.Random.float(100,200,0,0)},\n        {name: '贵州省', value: Mock.Random.float(100,200,0,0)},\n        {name: '湖南省', value: Mock.Random.float(100,200,0,0)},\n        {name: '湖南省', value: Mock.Random.float(100,200,0,0)},\n        {name: '安徽省', value: Mock.Random.float(100,200,0,0)},\n        {name: '山东省', value: Mock.Random.float(100,200,0,0)},\n        {name: '河北省', value: Mock.Random.float(100,200,0,0)},\n        {name: '天津市', value: Mock.Random.float(100,200,0,0)},\n        {name: '辽宁省', value: Mock.Random.float(100,200,0,0)},\n        {name: '黑龙江省', value: Mock.Random.float(100,200,0,0)},\n        {name: '海南省', value: Mock.Random.float(100,200,0,0)},\n        {name: '宁夏回族自治区', value: Mock.Random.float(0,50,0,0)},\n        {name: '广西壮族自治区', value: Mock.Random.float(0,50,0,0)},\n        {name: '江西省', value: Mock.Random.float(0,50,0,0)},\n        {name: '吉林省', value: Mock.Random.float(0,50,0,0)},\n        \n      ],\n      map: null\n    }\n    \n  },\n  created() {\n    \n  },\n  mounted(){\n      this.initMapEcharts();\n  },\n  methods: {\n    initMapEcharts() {\n      // 获取地图数据\n      // 将下载后的json文件放置/public目录下\n      axios.get('/china.json').then(res => {\n          console.log(res);\n         // 使用数据注册地图\n         echarts.registerMap('china', res.data)\n          this.$nextTick(() => {\n            // 初始化地图\n            this.map = echarts.init(this.$refs['mapEcharts'])\n            // 设置基础配置项\n            const option = {\n              // 标题\n              title: {\n                text:\"中国地区新增\",\n                left: 'center',\n                subtext: \"下载链接\",\n                sublink: \"http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5\"\n              },\n              // 悬浮窗\n              tooltip: {\n                trigger: 'item',\n                formatter: function(params) {\n                  return `${params.name}: ${params.value || 0}`\n\n                }\n              },\n              // 图例\n              visualMap: {\n                min: 0,\n                max: 1000,\n                text: ['High', 'Low'],\n                realtime: false,\n                calculable: true,\n                inRange: {\n                    color: ['lightskyblue', 'yellow', 'orangered']\n                }\n              },\n              // 要显示的散点数据\n              series: [\n                {\n                  type: 'map',\n                  map: 'china',\n                  // 这是要显示的数据\n                  data: this.seriesData,\n                  // 自定义命名映射，不设置的话，label默认是使用 geoJson中的name名\n                  // nameMap: {\n                  //   '北京市': \"北京重命名\",\n                  //   \"天津市\": '天津重命名'\n                  // },\n                },\n                \n              ]\n            }\n            // 将配置应用到地图上\n            this.map.setOption(option)\n            // 设置定时器，自动循环触发tooltip悬浮窗事件\n            this.setTimer()\n            let that = this;\n            // 当鼠标在地图上时，停止自动tooltip事件\n            this.map.on('mouseover', {series: 0,}, function(params) {\n              console.log(params)\n              that.clearTimer()\n            })\n            // 当鼠标移出地图后，再自动tooltip\n            this.map.on('mouseout', {series: 0}, function(params) {\n              console.log(params)\n              that.setTimer()\n            })\n          })\n      })\n    },\n    setTimer() {\n      // 当前选中区域的下标\n      let curIndex = -1;\n      this.timer && clearInterval(this.timer)\n      this.timer = setInterval(() => {\n        const len = this.seriesData.length;\n        // dispatchAction是主动去触发echarts事件，取消高亮当前的数据图形\n        this.map.dispatchAction({\n          type: 'downplay',\n          seriesIndex: 0,\n          dataIndex: curIndex\n        })\n        // 下一个选中区域的下标\n        curIndex = (curIndex + 1) % len;\n        // 高亮下一个数据图形\n        this.map.dispatchAction({\n          type: 'highlight',\n          seriesIndex: 0,\n          dataIndex: curIndex\n        })\n        // 显示tooltip\n        this.map.dispatchAction({\n          type: 'showTip',\n          seriesIndex:0,\n          dataIndex: curIndex\n        })\n      }, 1000)\n    },\n    clearTimer() {\n      this.timer && clearInterval(this.timer)\n    },\n  },\n  \n  beforeDestroy() {\n    this.clearTimer()\n  }\n}\n</script>\n\n<style>\n.map-echart {\n  height: 700px;\n  /* width: -100px; */\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=2c171181&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=2c171181&prod&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}