update

src/views/dynamic/parts/js/datajs.js

@@ -0,0 +1,70 @@
+import anhuiJson from 'echarts/map/json/province/anhui';
+import aomenJson from 'echarts/map/json/province/aomen';
+import beijingJson from 'echarts/map/json/province/beijing';
+import chongqingJson from 'echarts/map/json/province/chongqing';
+import fujianJson from 'echarts/map/json/province/fujian';
+import gansuJson from 'echarts/map/json/province/gansu';
+import guangdongJson from 'echarts/map/json/province/guangdong';
+import guangxiJson from 'echarts/map/json/province/guangxi';
+import guizhouJson from 'echarts/map/json/province/guizhou';
+import hainanJson from 'echarts/map/json/province/hainan';
+import hebeiJson from 'echarts/map/json/province/hebei';
+import heilongjiangJson from 'echarts/map/json/province/heilongjiang';
+import henanJson from 'echarts/map/json/province/henan';
+import hubeiJson from 'echarts/map/json/province/hubei';
+import hunanJson from 'echarts/map/json/province/hunan';
+import jiangsuJson from 'echarts/map/json/province/jiangsu';
+import jiangxiJson from 'echarts/map/json/province/jiangxi';
+import jilinJson from 'echarts/map/json/province/jilin';
+import liaoningJson from 'echarts/map/json/province/liaoning';
+import neimengguJson from 'echarts/map/json/province/neimenggu';
+import ningxiaJson from 'echarts/map/json/province/ningxia';
+import qinghaiJson from 'echarts/map/json/province/qinghai';
+import shandongJson from 'echarts/map/json/province/shandong';
+import shanghaiJson from 'echarts/map/json/province/shanghai';
+import shanxiJson from 'echarts/map/json/province/shanxi';
+import shanxi1Json from 'echarts/map/json/province/shanxi1';
+import sichuanJson from 'echarts/map/json/province/sichuan';
+import taiwanJson from 'echarts/map/json/province/taiwan';
+import tianjinJson from 'echarts/map/json/province/tianjin';
+import xianggangJson from 'echarts/map/json/province/xianggang';
+import xinjiangJson from 'echarts/map/json/province/xinjiang';
+import xizangJson from 'echarts/map/json/province/xizang';
+import yunnanJson from 'echarts/map/json/province/yunnan';
+import zhejiangJson from 'echarts/map/json/province/zhejiang';
+export {
+  anhuiJson,
+  aomenJson,
+  beijingJson,
+  chongqingJson,
+  fujianJson,
+  gansuJson,
+  guangdongJson,
+  guangxiJson,
+  guizhouJson,
+  hainanJson,
+  hebeiJson,
+  heilongjiangJson,
+  henanJson,
+  hubeiJson,
+  hunanJson,
+  jiangsuJson,
+  jiangxiJson,
+  jilinJson,
+  liaoningJson,
+  neimengguJson,
+  ningxiaJson,
+  qinghaiJson,
+  shandongJson,
+  shanghaiJson,
+  shanxiJson,
+  shanxi1Json,
+  sichuanJson,
+  taiwanJson,
+  tianjinJson,
+  xianggangJson,
+  xinjiangJson,
+  xizangJson,
+  yunnanJson,
+  zhejiangJson,
+};

src/views/dynamic/parts/js/mapjs.js

@@ -0,0 +1,34 @@
+import 'echarts/map/js/province/anhui.js';
+import 'echarts/map/js/province/aomen.js';
+import 'echarts/map/js/province/beijing.js';
+import 'echarts/map/js/province/chongqing.js';
+import 'echarts/map/js/province/fujian.js';
+import 'echarts/map/js/province/gansu.js';
+import 'echarts/map/js/province/guangdong.js';
+import 'echarts/map/js/province/guangxi.js';
+import 'echarts/map/js/province/guizhou.js';
+import 'echarts/map/js/province/hainan.js';
+import 'echarts/map/js/province/hebei.js';
+import 'echarts/map/js/province/heilongjiang.js';
+import 'echarts/map/js/province/henan.js';
+import 'echarts/map/js/province/hubei.js';
+import 'echarts/map/js/province/hunan.js';
+import 'echarts/map/js/province/jiangsu.js';
+import 'echarts/map/js/province/jiangxi.js';
+import 'echarts/map/js/province/jilin.js';
+import 'echarts/map/js/province/liaoning.js';
+import 'echarts/map/js/province/neimenggu.js';
+import 'echarts/map/js/province/ningxia.js';
+import 'echarts/map/js/province/qinghai.js';
+import 'echarts/map/js/province/shandong.js';
+import 'echarts/map/js/province/shanghai.js';
+import 'echarts/map/js/province/shanxi.js';
+import 'echarts/map/js/province/shanxi1.js';
+import 'echarts/map/js/province/sichuan.js';
+import 'echarts/map/js/province/taiwan.js';
+import 'echarts/map/js/province/tianjin.js';
+import 'echarts/map/js/province/xianggang.js';
+import 'echarts/map/js/province/xinjiang.js';
+import 'echarts/map/js/province/xizang.js';
+import 'echarts/map/js/province/yunnan.js';
+import 'echarts/map/js/province/zhejiang.js';

src/views/dynamic/parts/map.vue

@@ -9,8 +9,9 @@ import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
 import echarts from 'echarts/lib/echarts';
 import 'echarts/map/js/china.js';
-import 'echarts/map/js/province/jilin.js';
-import jlJson from 'echarts/map/json/province/jilin';
+import './js/mapjs';
+import * as citys from './js/datajs';
+import cJson from 'echarts/map/json/china';
 import 'echarts/lib/component/title';
 import 'echarts/lib/component/legend';
 import 'echarts/lib/component/toolbox';
@@ -27,15 +28,18 @@ export default {
     };
   },
   mounted() {
-    this.init();
+    this.init('china');
   },
   methods: {
     ...mapActions(['query']),
-    async init() {
+    async init(name) {
+      console.log(cJson);
       let res = await this.query();
       let city = {};
+      let jilinJson = _.get(citys, 'jilinJson');
+      console.log(jilinJson);
       if (this.$checkRes(res)) {
-        city = jlJson.features.map(i => {
+        city = jilinJson.features.map(i => {
           let object = {};
           object.name = _.get(i.properties, 'name');
           let result = res.data.filter(f => f.place == object.name);
@@ -43,7 +47,7 @@ export default {
           return object;
         });
       }
-      let newJson = this.setPos(_.cloneDeep(jlJson));
+      let newJson = this.setPos(_.cloneDeep(jilinJson));
       let option = {
         title: {
           text: '展会分布',
@@ -55,7 +59,7 @@ export default {
         geo: {
           // zoom: 1.3,
           type: 'map',
-          map: '吉林',
+          map: name, //吉林 china
           label: {
             show: true,
             color: '#fff',
@@ -71,7 +75,7 @@ export default {
         visualMap: {
           //颜色轴，可以根据数据点的值大小，展示不同的颜色，或用来展示地图块的不同颜色
           min: 0,
-          max: _.maxBy(city, 'value').value,
+          max: 10000, //_.maxBy(city, 'value').value
           calculable: true,
           inRange: {
             color: ['#8dc5f4', '#266bce'],
@@ -82,9 +86,9 @@ export default {
         },
         series: [
           {
-            name: '吉林省',
+            name: name == 'china' ? '中国' : name, //吉林省
             type: 'map',
-            map: 'jilin',
+            map: name, //jilin,china
             emphasis: {
               label: {
                 show: true,
@@ -94,14 +98,29 @@ export default {
             textFixed: {
               Alaska: [20, 120],
             },
-            data: city,
+            data: [],
+            // 全国地图数据:{ name: '辽宁', value: 1555 },
+            //   { name: '黑龙江', value: 1555 },
+            //   { name: '吉林', value: 1555 }
+            // 城市
           },
         ],
       };
       //用$echarts是因为上面注册使用的 Vue.prototype.$echarts
-      echarts.registerMap('jilin', newJson);
+      echarts.registerMap(name, name == 'china' ? cJson : jilinJson);
       this.myChart = echarts.init(document.getElementById('chartMap'));
       this.myChart.setOption(option);
+      this.myChart.hideLoading();
+      this.myChart.on('click', params => {
+        console.log(params);
+        let name = params.name;
+        let res = cJson.features.find(f => {
+          let o = _.get(f, 'properties');
+          if (o) return o.name == name;
+          else return false;
+        });
+        console.log(res);
+      });
     },
     setPos(data) {
       data.features.map(i => {