区域地图

src/main/vue/src/map/index.js

@@ -0,0 +1,30 @@
+import jiangsu_320000 from './320000_full.json';
+import jiangsu_320100 from './320100_full.json';
+import jiangsu_320200 from './320200_full.json';
+import jiangsu_320300 from './320300_full.json';
+import jiangsu_320400 from './320400_full.json';
+import jiangsu_320500 from './320500_full.json';
+import jiangsu_320600 from './320600_full.json';
+import jiangsu_320700 from './320700_full.json';
+import jiangsu_320800 from './320800_full.json';
+import jiangsu_320900 from './320900_full.json';
+import jiangsu_321000 from './321000_full.json';
+import jiangsu_321100 from './321100_full.json';
+import jiangsu_321200 from './321200_full.json';
+import jiangsu_321300 from './321300_full.json';
+import * as echarts from 'echarts';
+
+echarts.registerMap('320000', jiangsu_320000);
+echarts.registerMap('320100', jiangsu_320100);
+echarts.registerMap('320200', jiangsu_320200);
+echarts.registerMap('320300', jiangsu_320300);
+echarts.registerMap('320400', jiangsu_320400);
+echarts.registerMap('320500', jiangsu_320500);
+echarts.registerMap('320600', jiangsu_320600);
+echarts.registerMap('320700', jiangsu_320700);
+echarts.registerMap('320800', jiangsu_320800);
+echarts.registerMap('320900', jiangsu_320900);
+echarts.registerMap('321000', jiangsu_321000);
+echarts.registerMap('321100', jiangsu_321100);
+echarts.registerMap('321200', jiangsu_321200);
+echarts.registerMap('321300', jiangsu_321300);

src/main/vue/src/plugins/http.js

@@ -5,8 +5,8 @@ import qs from 'qs';
 let baseUrl = 'http://localhost:8080';
 switch (process.env.NODE_ENV) {
     case 'development':
-        baseUrl = 'http://localhost:8080';
-        // baseUrl = 'http://wlj.izouma.com';
+        // baseUrl = 'http://localhost:8080';
+        baseUrl = 'http://wlj.izouma.com';
         break;
     case 'test':
         baseUrl = 'http://localhost:8080';

src/main/vue/src/views/Echarts.vue

@@ -5,15 +5,25 @@
             backgroundImage: `url(${require('../assets/pc_shuju_bg.jpg')})`
         }"
     >
+        <el-tooltip class="item" v-if="selectValue !== '320000'" content="返回江苏省地图" placement="bottom">
+            <el-button
+                class="back"
+                type="warning"
+                icon="el-icon-arrow-left"
+                circle
+                @click="changeSelect('320000')"
+            ></el-button>
+        </el-tooltip>
+
         <div class="header">{{ title }}</div>
         <div ref="chart" id="map-chart"></div>
     </div>
 </template>
 
 <script>
-import jiangsu from '../320000_full.json';
 import * as echarts from 'echarts';
 import 'echarts-gl';
+import '../map';
 export default {
     data() {
         return {
@@ -27,19 +37,38 @@ export default {
             sndStat: {},
             showLables: [],
             type: 1,
-            title: ''
+            title: '',
+            selectValue: '320000',
+            valList: [30, 1000],
+            showLabel: true,
+            allInfo: {}
         };
     },
+    computed: {
+        mapInfos() {
+            return echarts.getMap(this.selectValue) ? echarts.getMap(this.selectValue).geoJson.features : [];
+        },
+        selectName() {
+            let allCitys = echarts.getMap('320000') ? echarts.getMap('320000').geoJson.features : [];
+
+            let info = allCitys.find(item => {
+                return item.properties.adcode === this.selectValue;
+            });
+            return info ? info.properties.name : '江苏省';
+        }
+    },
     mounted() {
-        echarts.registerMap('JiangSu', jiangsu);
         this.type = this.$route.query.type || '1';
         this.$nextTick(() => {
+            var chartDom = document.getElementById('map-chart');
+            this.myChart = echarts.init(chartDom);
             if (Number(this.type) === 1) {
                 this.initScatter();
             } else {
                 this.init3D();
             }
         });
+        window.addEventListener('resize', this.resize);
     },
     watch: {
         active() {
@@ -47,13 +76,28 @@ export default {
         }
     },
     methods: {
+        changeSelect(code, max = 1000, min = 30, showLabel = true) {
+            console.log(code, max);
+            if (code.toString().indexOf('00') !== -1) {
+                this.selectValue = code;
+                this.valList = [min, max];
+                this.showLabel = showLabel;
+                if (Number(this.type) === 1) {
+                    this.initScatter();
+                } else {
+                    this.init3D();
+                }
+            }
+        },
+        resize() {
+            this.myChart.resize();
+        },
         initScatter() {
-            this.title = '江苏省考级活动分布图';
-            var chartDom = document.getElementById('map-chart');
-            this.myChart = echarts.init(chartDom);
+            this.title = this.selectName + '考级活动分布图';
+            let _datas = this.produceDataSeries(this.mapInfos.length, this.valList[1]);
             this.myChart.setOption({
                 geo: {
-                    map: 'JiangSu',
+                    map: this.selectValue,
                     label: {
                         show: true,
                         color: '#fff'
@@ -73,7 +117,7 @@ export default {
                     left: 'center',
                     orient: 'horizontal',
                     min: 0,
-                    max: 100,
+                    max: this.getMax(_datas),
                     seriesIndex: 0,
                     calculable: true,
                     inRange: {
@@ -81,27 +125,25 @@ export default {
                     }
                 }
             });
-            let points = jiangsu.features.map(item => {
-                console.log(item.properties.center);
+
+            let points = this.mapInfos.map((item, index) => {
                 return {
-                    value: [...item.properties.center, this.getRamdom(30, 100)],
-                    name: item.properties.name
+                    value: [...item.properties.center, _datas[index]],
+                    name: item.properties.name,
+                    adcode: item.properties.adcode
                 };
             });
-            console.log(points);
             this.myChart.setOption({
                 series: [
                     {
                         type: 'effectScatter',
                         coordinateSystem: 'geo',
                         data: points,
+                        selectedMode: 'single',
                         symbolSize: function(val) {
                             let size = val[2];
-                            if (size > 100) {
-                                size = Math.floor(size / 5);
-                            }
-                            if (size > 100) {
-                                size = Math.floor(size / 20);
+                            if (size < 20) {
+                                size = size * 5;
                             }
                             return size;
                         },
@@ -115,7 +157,11 @@ export default {
                         hoverAnimation: true,
                         label: {
                             formatter: params => {
-                                return params.name + '\r\n' + params.value[2];
+                                if (this.showLabel) {
+                                    return params.name + '\r\n' + params.value[2];
+                                } else {
+                                    return params.value[2];
+                                }
                             },
                             show: true,
                             color: '#fff',
@@ -129,129 +175,160 @@ export default {
                     }
                 ]
             });
+
+            this.myChart.on('click', params => {
+                this.changeSelect(params.data.adcode, params.data.value[2], 0, false);
+            });
+        },
+        produceDataSeries(account = 7, total = 100) {
+            let arr = new Array(account).fill(0);
+            for (let i = 0; i < total; i++) {
+                var num = parseInt((Math.random() * account).toString());
+                arr[num]++;
+            }
+            return arr;
         },
         getRamdom(min, max) {
             return Math.floor(Math.random() * (max - min)) + min;
         },
+        getMax(list) {
+            list.sort((num1, num2) => {
+                return num1 - num2 < 0;
+            });
+            return list[0];
+        },
         init3D() {
-            this.title = '江苏省本月各市考级数量柱状图';
-            var chartDom = document.getElementById('map-chart');
-            this.myChart = echarts.init(chartDom);
-            this.myChart.setOption({
-                color: '#0A2B6A',
-                geo3D: {
-                    map: 'JiangSu',
-                    shading: 'lambert',
-                    instancing: true,
-                    label: {
-                        show: false,
-                        formatter: params => {
-                            this.active = params.name;
-                            return '';
-                        }
-                    },
-                    light: {
-                        main: {
-                            intensity: 1
-                        },
-                        ambient: {
-                            intensity: 0.5
-                        }
-                    },
-                    regionHeight: 5,
-                    boxHeight: 40,
-                    viewControl: {
-                        distance: 200,
-                        minDistance: 150,
-                        alpha: 35,
-                        beta: -10,
-                        rotateSensitivity: [1, 0]
-                    }
-                },
-                zAxis3D: {
-                    type: 'value',
-                    min: 0,
-                    max: 40
-                },
-                series: [
-                    {
-                        id: 'value',
-                        type: 'bar3D',
-                        name: '江苏省数据',
-                        coordinateSystem: 'geo3D',
+            this.title = this.selectName + '本月各市考级数量柱状图';
+            this.myChart.clear();
+            setTimeout(() => {
+                this.allInfo = {
+                    labels: this.mapInfos.map(item => {
+                        return item.properties.name;
+                    }),
+                    data: this.produceDataSeries(this.mapInfos.length, this.valList[1])
+                };
+                this.active = this.mapInfos[0].properties.name;
+                console.log(this.selectValue);
+                this.myChart.setOption({
+                    color: '#0A2B6A',
+                    geo3D: {
+                        map: `${this.selectValue}`,
                         shading: 'lambert',
-                        data: [],
-                        bevelSize: 0.3,
-                        barSize: 5,
-                        minHeight: 0,
-                        bevelSmoothness: 2,
-                        zlevel: 1,
-                        silent: true,
+                        instancing: true,
+                        label: {
+                            show: false,
+                            formatter: params => {
+                                this.active = params.name;
+                                return '';
+                            }
+                        },
                         light: {
                             main: {
-                                intensity: 1.2
+                                intensity: 1
+                            },
+                            ambient: {
+                                intensity: 0.5
                             }
+                        },
+                        regionHeight: 5,
+                        boxHeight: 40,
+                        viewControl: {
+                            distance: 200,
+                            minDistance: 150,
+                            alpha: 35,
+                            beta: -10,
+                            rotateSensitivity: [1, 0]
                         }
                     },
-                    {
-                        id: 'name',
-                        type: 'bar3D',
-                        name: '江苏省名称',
-                        coordinateSystem: 'geo3D',
-                        shading: 'lambert',
-                        data: jiangsu.features.map(item => {
-                            let value = this.getCenter(item, true);
-
-                            if (this.active === item) {
-                                value.push(15);
-                            } else {
-                                value.push(0);
-                            }
-                            return {
-                                name: item,
-                                value: value,
-                                itemStyle: {
-                                    color: this.active === item ? '#FA8816' : '#0A2B6A'
+                    zAxis3D: {
+                        type: 'value',
+                        min: 0,
+                        max: 40
+                    },
+                    series: [
+                        {
+                            id: 'value',
+                            type: 'bar3D',
+                            name: '江苏省数据',
+                            coordinateSystem: 'geo3D',
+                            shading: 'lambert',
+                            data: [],
+                            bevelSize: 0.3,
+                            barSize: 5,
+                            minHeight: 0,
+                            bevelSmoothness: 2,
+                            zlevel: 1,
+                            silent: true,
+                            light: {
+                                main: {
+                                    intensity: 1.2
                                 }
-                            };
-                        }),
-                        barSize: 1,
-                        minHeight: 0,
-                        bevelSmoothness: 0,
-                        label: {
-                            show: true,
-                            formatter: params => {
-                                return params.name;
-                            },
-                            distance: 0,
-                            textStyle: {
-                                color: '#fff'
                             }
                         },
-                        silent: true,
-                        zlevel: 2
+                        {
+                            id: 'name',
+                            type: 'bar3D',
+                            name: '江苏省名称',
+                            coordinateSystem: 'geo3D',
+                            shading: 'lambert',
+                            data: this.mapInfos.map(item => {
+                                let value = this.getCenter(item, true);
+
+                                if (this.active === item) {
+                                    value.push(15);
+                                } else {
+                                    value.push(0);
+                                }
+                                return {
+                                    name: item,
+                                    value: value,
+                                    itemStyle: {
+                                        color: this.active === item ? '#FA8816' : '#0A2B6A'
+                                    }
+                                };
+                            }),
+                            barSize: 1,
+                            minHeight: 0,
+                            bevelSmoothness: 0,
+                            label: {
+                                show: true,
+                                formatter: params => {
+                                    return params.name;
+                                },
+                                distance: 0,
+                                textStyle: {
+                                    color: '#fff'
+                                }
+                            },
+                            silent: true,
+                            zlevel: 2
+                        }
+                    ]
+                });
+                this.myChart.getZr().on('mouseout', () => {
+                    this.isOn = true;
+                });
+                this.myChart.getZr().on('globalout', () => {
+                    this.isOn = false;
+                    this.animationMove();
+                });
+                this.myChart.getZr().on('click', () => {
+                    let isOn = document.getElementById('map-chart').children[0].style.cursor === 'pointer';
+                    console.log(isOn);
+                    if (isOn) {
+                        let code = this.getCode(this.active);
+                        let index = this.mapInfos.findIndex(item => {
+                            return this.active === item.properties.name;
+                        });
+                        this.changeSelect(code, this.allInfo.data[index], 0, false);
                     }
-                ]
-            });
-            this.myChart.getZr().on('mouseout', () => {
-                this.isOn = true;
-            });
-            this.myChart.getZr().on('globalout', () => {
-                this.isOn = false;
+                });
+                this.changeChoose();
                 this.animationMove();
-            });
-            this.changeChoose();
-            this.animationMove();
+            }, 500);
         },
         changeChoose() {
-            const res = {
-                labels: jiangsu.features.map(item => {
-                    return item.properties.name;
-                }),
-                data: jiangsu.features.map(item => {
-                    return this.getRamdom(10, 100);
-                })
-            };
+            const res = { ...this.allInfo };
             let regions = res.labels.map(item => {
                 return {
                     name: item,
@@ -290,10 +367,11 @@ export default {
                         name: '江苏省数据',
                         data: res.labels.map((item, index) => {
                             let value = 0;
+                            let _value = res.data[index] < 20 ? res.data[index] * 6 : res.data[index];
                             if (this.active === item) {
-                                value = res.data[index] + this.desc;
+                                value = _value + this.desc;
                             } else {
-                                value = res.data[index];
+                                value = _value;
                             }
 
                             return {
@@ -348,7 +426,7 @@ export default {
             });
         },
         getCenter(name, isLable = false) {
-            let info = jiangsu.features.find(item => {
+            let info = this.mapInfos.find(item => {
                 return name === item.properties.name;
             });
             let center = info ? info.properties.center : [0, 0];
@@ -357,6 +435,13 @@ export default {
             }
             return center;
         },
+        getCode(name) {
+            let info = this.mapInfos.find(item => {
+                return name === item.properties.name;
+            });
+            let adcode = info ? info.properties.adcode : '320000';
+            return adcode;
+        },
         animationMove() {
             if (this.timeData) {
                 clearTimeout(this.timeData);
@@ -366,7 +451,7 @@ export default {
                 if (!this.flag || this.isOn) {
                     return;
                 } else {
-                    const citys = jiangsu.features;
+                    const citys = this.mapInfos;
                     let index =
                         citys.findIndex(item => {
                             return this.active === item.properties.name;
@@ -392,6 +477,14 @@ export default {
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
+    position: relative;
+}
+
+.back {
+    position: absolute;
+    left: 30px;
+    top: 30px;
+    cursor: pointer;
 }
 
 .header {

src/main/vue/yarn.lock

@@ -2296,6 +2296,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+claygl@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
+  integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
+
 clean-css@4.2.x:
   version "4.2.3"
   resolved "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3214,6 +3219,22 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts-gl@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/echarts-gl/-/echarts-gl-2.0.4.tgz#ec4d29c3745a19bcb4a6f5c7a59eff6d02af10e0"
+  integrity sha512-QTMFOFE7N1wxjRIiwjq4m1gFa5KBZT9V0MKkT8gJyTj/kzyCCReRW8n6hjG7+QtfZ5DtPao98vPIFDFWEMlRGA==
+  dependencies:
+    claygl "^1.2.1"
+    zrender "^5.0.3"
+
+echarts@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.1.1.tgz#b186f162f017c555cfd67b12ede6762bdc3ddfda"
+  integrity sha512-b3nP8M9XwZM2jISuA+fP0EuJv8lcfgWrinel185Npy8bE/UhXTDIPJcqgQOCWdvk0c5CeT6Dsm1xBjmJXAGlxQ==
+  dependencies:
+    tslib "2.0.3"
+    zrender "5.1.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -8037,6 +8058,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.npm.taobao.org/ts-pnp/download/ts-pnp-1.2.0.tgz?cache=0&sync_timestamp=1585245674012&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fts-pnp%2Fdownload%2Fts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha1-pQCtCEsHmPHDBxrzkeZZEshrypI=
 
+tslib@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tslib@^1.10.0, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npm.taobao.org/tslib/download/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
@@ -8772,3 +8798,10 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@5.1.0, zrender@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.1.0.tgz#b6a84c3aa7ccc6642ee0519901ca4c0835c4d85e"
+  integrity sha512-c+8VRx52ycbmqwHeHLlo/BAfIHBl/JZNLM6cfDQFgzIH05yb+f5J9F/fbRsP+zGc8dW9XHuhdt8/iqukgMZSeg==
+  dependencies:
+    tslib "2.0.3"