update ChartMap.vue

src/api/chart.js

@@ -0,0 +1,10 @@
+import { get } from '@/utils/request'
+
+const chartApi = {
+  chartGeoJsonApi: '/api/geo/chart/geojson'
+}
+
+// 获取 echarts 使用的 geojson 数据
+export function getChartGeoJson(areaCode) {
+  return get(chartApi.chartGeoJsonApi + '?areaCode=' + areaCode)
+}

src/views/chart/ChartMap.vue

@@ -1,12 +1,25 @@
 <template>
-  <div ref="chartsDOM" style="width: 1080px;height:720px;" />
+  <el-row>
+    <el-col :md="16">
+      <div ref="chartsDOM" style="width: 800px;height:600px;" />
+    </el-col>
+    <el-col :md="8">
+      <el-card>
+        <div slot="header" class="clearfix">
+          <span>ChartMap</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="onRefresh">更新</el-button>
+        </div>
+        <div id="chart2" style="height:400px;" />
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-// import chinaData from '@/json/china.json'
-// import sichuanData from '@/json/sichuan.json'
-// import guangxiData from '@/json/guangxi.json'
+import { getChartGeoJson } from '@/api/chart'
+// import chinaData from '@/assets/json/china.json'
+// import sichuanData from '@/assets/json/sichuan_full.json'
 
 export default {
   name: 'ChartMap',
@@ -18,7 +31,8 @@ export default {
   mounted() {
     // 初始化统计图对象
     this.myChart = echarts.init(this.$refs['chartsDOM'])
-    this.initChart1()
+    // this.initChart1()
+    this.initChart2()
   },
   created() {
     document.title = 'ChartMap'
@@ -27,132 +41,60 @@ export default {
     initChart1() {
       // 显示 loading 动画
       this.myChart.showLoading()
+      const areaCode = 0
+      getChartGeoJson(areaCode).then(resp => {
+        if (resp.code === 0) {
+          var mapData1 = resp.data
+        }
+      })
 
-      // 在得到数据的基础上，进行地图绘制, 得到结果后，关闭动画
+      var mapName = 'china'
+      var mapData = {}
+      // mapData = chinaData
+      var dataList = this.getDataList(mapData, 1000)
+      var chartOption = this.getChartOption1(mapName, dataList)
+      // 注册地图(地图数据来自本地或后端的 geojson 格式数据)
+      echarts.registerMap(mapName, mapData)
+      this.myChart.setOption(chartOption)
+
+      // 得到数据并绘制地图后关闭 loading 动画
       this.myChart.hideLoading()
+    },
+    initChart2() {
+      // 显示 loading 动画
+      this.myChart.showLoading()
+      var mapName1 = 'sichuan'
+      var mapData1 = {}
+      // mapData1 = sichuanData
+      var dataList1 = this.getDataList(mapData1, 500000)
+      var chartOption1 = this.getChartOption2(mapName1, dataList1)
 
-      // 注册地图(数据放在axios返回对象的data中哦)
-      var mapData = this.getMapData('china')
-      var mapData1 = this.getMapData1('sichuan')
-      var mapData2 = this.getMapData2('guangxi')
-      echarts.registerMap(mapData.name, mapData.data)
+      echarts.registerMap(mapName1, mapData1)
+      this.myChart.setOption(chartOption1)
 
-      var options = this.getOptions1(mapData)
-      this.myChart.setOption(options)
-    },
-    getMapData(mapName) {
-      var mapData = {
-        name: mapName,
-        data: {},
-        dataList: [
-          { name: '北京', value: '100' }, { name: '天津', value: this.randomData() },
-          { name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
-          { name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
-          { name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() },
-          { name: '黑龙江', value: this.randomData() }, { name: '湖南', value: this.randomData() },
-          { name: '安徽', value: this.randomData() }, { name: '山东', value: this.randomData() },
-          { name: '新疆', value: this.randomData() }, { name: '江苏', value: this.randomData() },
-          { name: '浙江', value: this.randomData() }, { name: '江西', value: this.randomData() },
-          { name: '湖北', value: this.randomData() }, { name: '广西', value: this.randomData() },
-          { name: '甘肃', value: this.randomData() }, { name: '山西', value: this.randomData() },
-          { name: '内蒙古', value: this.randomData() }, { name: '陕西', value: this.randomData() },
-          { name: '吉林', value: this.randomData() }, { name: '福建', value: this.randomData() },
-          { name: '贵州', value: this.randomData() }, { name: '广东', value: this.randomData() },
-          { name: '青海', value: this.randomData() }, { name: '西藏', value: this.randomData() },
-          { name: '四川', value: this.randomData() }, { name: '宁夏', value: this.randomData() },
-          { name: '海南', value: this.randomData() }, { name: '台湾', value: this.randomData() },
-          { name: '香港', value: this.randomData() }, { name: '澳门', value: this.randomData() }
-        ]
-      }
-      return mapData
+      // 得到数据并绘制地图后关闭 loading 动画
+      this.myChart.hideLoading()
     },
-    getMapData1(mapName) {
-      var mapData = {
-        name: mapName,
-        data: {},
-        dataList: [
-          { name: '成都市', value: Math.round(Math.random() * 1000) },
-          { name: '自贡市', value: Math.round(Math.random() * 1000) },
-          { name: '攀枝花市', value: Math.round(Math.random() * 1000) },
-          { name: '广元市', value: Math.round(Math.random() * 1000) },
-          { name: '巴中市', value: Math.round(Math.random() * 1000) },
-          { name: '达州市', value: Math.round(Math.random() * 1000) },
-          { name: '广安市', value: Math.round(Math.random() * 1000) },
-          { name: '遂宁市', value: Math.round(Math.random() * 1000) },
-          { name: '南充市', value: Math.round(Math.random() * 1000) },
-          { name: '资阳市', value: Math.round(Math.random() * 1000) },
-          { name: '内江市', value: Math.round(Math.random() * 1000) },
-          { name: '泸州市', value: Math.round(Math.random() * 1000) },
-          { name: '宜宾市', value: Math.round(Math.random() * 1000) },
-          { name: '乐山市', value: Math.round(Math.random() * 1000) },
-          { name: '眉山市', value: Math.round(Math.random() * 1000) },
-          { name: '绵阳市', value: Math.round(Math.random() * 1000) },
-          { name: '德阳市', value: Math.round(Math.random() * 1000) },
-          { name: '雅安市', value: Math.round(Math.random() * 1000) },
-          { name: '阿坝藏族羌族自治州', value: Math.round(Math.random() * 1000) },
-          { name: '甘孜藏族自治州', value: Math.round(Math.random() * 1000) },
-          { name: '凉山彝族自治州', value: Math.round(Math.random() * 1000) }
-        ]
+    getDataList(mapData, base) {
+      var dataList = []
+      for (const item of mapData['features']) {
+        var name = item['properties']['name']
+        var value = this.randomData(base)
+        dataList.push({ name: name, value: value })
       }
-      return mapData
+
+      return dataList
     },
-    getMapData2(mapName) {
-      var mapData = {
-        name: mapName,
-        data: {},
-        dataList: [
-          { name: '南宁市', value: 11111 },
-          { name: '崇左市', value: 22221 },
-          { name: '柳州市', value: 33333 },
-          { name: '来宾市', value: 22231 },
-          { name: '桂林市', value: 44441 },
-          { name: '梧州市', value: 555525 },
-          { name: '贺州市', value: 162475 },
-          { name: '玉林市', value: 65454 },
-          { name: '贵港市', value: 77771 },
-          { name: '百色市', value: 88884 },
-          { name: '钦州市', value: 99995 },
-          { name: '河池市', value: 10001 },
-          { name: '北海市', value: 122222 },
-          { name: '防城港市', value: 333332 }
-        ]
-      }
-      return mapData
+    randomData(base) {
+      // var base = 1000
+      return Math.ceil(Math.random() * base)
     },
-    getOptions(mapData) {
-      return {
-        visualMap: {
-          min: 1111,
-          max: 333332,
-          realtime: false,
-          calculable: true,
-          inRange: {
-            color: ['lightskyblue', 'yellow', 'orangered']
-          }
-        },
-        title: {
-          text: '广西GDP统计图(/万元)'
-        },
-        tooltip: {},
-        series: [
-          {
-            name: '广西地图',
-            type: 'map',
-            map: mapData.name, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
-            label: {
-              show: true
-            },
-            data: mapData.dataList
-          }
-        ]
-      }
-    },
-    getOptions1(mapData) {
+    getChartOption1(mapName, dataList) {
       return {
         backgroundColor: '#FFFFFF',
         title: {
           text: '全国数据',
-          subtext: '各市州显示',
+          subtext: '各省市区显示',
           x: 'center'
         },
         tooltip: {
@@ -182,24 +124,48 @@ export default {
         },
         // 配置属性
         series: [{
-          name: '数据',
+          name: '全国数据',
           type: 'map',
-          map: mapData.name,
+          map: mapName,
           roam: true,
           label: {
-            normal: {
-              show: true // 省份名称
-            },
-            emphasis: {
-              show: false
-            }
+            show: true
           },
-          data: mapData.dataList // 数据
+          data: dataList // 数据
         }]
       }
     },
-    randomData() {
-      return Math.ceil(Math.random() * 1000)
+    getChartOption2(mapName, dataList) {
+      return {
+        visualMap: {
+          min: 0,
+          max: 300000,
+          realtime: false,
+          calculable: true,
+          inRange: {
+            color: ['lightskyblue', 'yellow', 'orangered']
+          }
+        },
+        title: {
+          text: '四川各市统计图'
+        },
+        tooltip: {},
+        series: [
+          {
+            name: '四川地图',
+            type: 'map',
+            map: mapName, // 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
+            roam: true, // 可放大缩小拖拽
+            label: {
+              show: true // 地图上显示地区名字
+            },
+            data: dataList
+          }
+        ]
+      }
+    },
+    onRefresh() {
+      this.initChart1()
     }
   }
 }