update ChartMap.vue

src/api/chart.js

@@ -1,10 +0,0 @@
-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/api/map.js

@@ -11,7 +11,9 @@ const mapAPI = {
   addPositionAPi: '/api/geo/map/position',
   addMyPositionAPi: '/api/geo/map/my_position',
   mapMarks: '/api/geo/map/marks',
-  trailPathApi: '/api/geo/map/trail'
+  trailPathApi: '/api/geo/map/trail',
+  chartMapAreaApi: '/api/geo/chartmap/area',
+  chartMapGeojsonApi: '/api/geo/chartmap/geojson'
 }
 
 export function getMapMarks() {
@@ -57,3 +59,11 @@ export function addMyPosition(data) {
 export function getGeoPoint() {
   return get(mapAPI.trailPathApi)
 }
+
+export function getChartMapArea() {
+  return get(mapAPI.chartMapAreaApi)
+}
+
+export function getChartMapGeojson(areaCode) {
+  return get(mapAPI.chartMapGeojsonApi + '?areaCode=' + areaCode)
+}

src/views/map/ChartMap.vue

@@ -1,69 +1,90 @@
 <template>
-  <div ref="chartsDOM" style="width: 1080px;height:960px;" />
+  <div>
+    <el-select
+      v-model="areaCode"
+      placeholder="选择地区查看数据地图"
+      style="float: right; margin-right: 5px"
+      @change="onSelect"
+    >
+      <el-option
+        v-for="(item, index) in selectOptions"
+        :key="index"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <el-button
+      style="float: right; margin-right: 5px"
+      type="plain"
+      icon="el-icon-message"
+      @click="onButton"
+    >
+      切换地区名
+    </el-button>
+    <div ref="chartsDOM" style="width: 1080px;height:960px;" />
+  </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-import { getChartGeoJson } from '@/api/chart'
-// import chinaData from '@/assets/json/china_full.json'
-// import sichuanData from '@/assets/json/sichuan_level3.json'
+import { getChartMapArea, getChartMapGeojson } from '@/api/map'
 
 export default {
   name: 'ChartMap',
   data() {
     return {
-      myChart: null
+      selectOptions: [],
+      myChart: null,
+      chartOption: null,
+      areaCode: ''
     }
   },
   mounted() {
-    // 初始化统计图对象
-    this.myChart = echarts.init(this.$refs['chartsDOM'])
-    // this.initChart1()
-    // this.initChart2()
+    getChartMapArea().then(resp => {
+      if (resp.code === 0) {
+        this.selectOptions = resp.data
+      }
+    })
   },
   created() {
     document.title = 'ChartMap'
   },
   methods: {
-    initChart1() {
+    onSelect() {
+      if (this.myChart !== null) {
+        // 销毁当前存在的地图, 重新初始化新地图
+        this.myChart.dispose()
+        this.myChart = null
+        this.chartOption = null
+      }
+      // 初始化统计图对象
+      this.myChart = echarts.init(this.$refs['chartsDOM'])
       // 显示 loading 动画
       this.myChart.showLoading()
-      const areaCode = 0
-      getChartGeoJson(areaCode).then(resp => {
-        if (resp.code === 0) {
-          var mapData1 = resp.data
-        }
-      })
-
-      var mapName = 'sichuan'
-      var mapData = {}
-
-      // mapName = 'china'
-      // 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)
+      getChartMapGeojson(this.areaCode).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          var geoJsonStr = respData.geoJson
+          var geoJson = JSON.parse(geoJsonStr)
+          var dataList = respData.list
 
-      echarts.registerMap(mapName1, mapData1)
-      this.myChart.setOption(chartOption1)
+          var mapName = this.areaCode
+          var mapData = geoJson
+          // var dataList = this.getDataList(mapData, 1000)
+          this.chartOption = this.getChartOption1(mapName, dataList)
+          const deep = parseInt(mapName.split('-')[1])
+          var splitList = this.getSplitList(deep)
+          this.chartOption.visualMap.splitList = splitList
 
-      // 得到数据并绘制地图后关闭 loading 动画
-      this.myChart.hideLoading()
+          // 注册地图(地图数据来自本地或后端的 geojson 格式数据)
+          echarts.registerMap(mapName, mapData)
+          this.myChart.setOption(this.chartOption)
+        }
+      }).finally(() => {
+        // 得到数据并绘制地图后关闭 loading 动画
+        this.myChart.hideLoading()
+      })
     },
     getDataList(mapData, base) {
       var dataList = []
@@ -83,17 +104,17 @@ export default {
       return {
         backgroundColor: '#FFFFFF',
         title: {
-          text: '全国数据',
-          subtext: '各省市区显示',
-          x: 'center'
+          text: '数据地图',
+          subtext: '展示各级行政区的数据',
+          x: 'center' // 标题居中
         },
         tooltip: {
           trigger: 'item'
         },
-        // 左侧小导航图标
+        // 数据导航栏
         visualMap: {
           show: true,
-          x: 'left',
+          x: 'left', // 位于左侧
           y: 'center',
           splitList: [
             { start: 800, end: 1000 },
@@ -103,6 +124,7 @@ export default {
             { start: 100, end: 200 },
             { start: 0, end: 100 }
           ],
+          // 对应 splitList 的颜色
           color: [
             '#5475f5',
             '#9feaa5',
@@ -112,50 +134,99 @@ export default {
             '#9fb5ea'
           ]
         },
-        // 配置属性
         series: [{
-          name: '全国数据',
+          name: '数据地图',
           type: 'map',
-          map: mapName,
-          roam: true,
+          map: mapName, // 和 registerMap 时使用的 name 一致
+          roam: true, // 是否可以移动, 放大缩小地图
           label: {
-            show: false
+            show: false // 地图上显示地区名
           },
-          data: dataList // 数据
+          data: dataList // 地图上显示的数据
         }]
       }
     },
-    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
-          }
+    getVisualMap() {
+      // 数据导航栏
+      var visualMap = {
+        min: 0,
+        max: 300000,
+        realtime: false,
+        calculable: true,
+        inRange: {
+          color: ['lightskyblue', 'yellow', 'orangered']
+        }
+      }
+
+      var visualMap1 = {
+        show: true,
+        x: 'left', // 位于左侧
+        y: 'center',
+        splitList: [
+          { start: 800, end: 1000 },
+          { start: 600, end: 800 },
+          { start: 400, end: 600 },
+          { start: 200, end: 400 },
+          { start: 100, end: 200 },
+          { start: 0, end: 100 }
+        ],
+        // 对应 splitList 的颜色
+        color: [
+          '#5475f5',
+          '#9feaa5',
+          '#85daef',
+          '#74e2ca',
+          '#e6ac53',
+          '#9fb5ea'
         ]
       }
+      return visualMap
     },
-    onRefresh() {
-      this.initChart1()
+    getSplitList(deep) {
+      var splitList = []
+      if (deep === 1) {
+        splitList = [
+          { start: 800, end: 1000 },
+          { start: 600, end: 800 },
+          { start: 400, end: 600 },
+          { start: 200, end: 400 },
+          { start: 100, end: 200 },
+          { start: 0, end: 100 }
+        ]
+      } else if (deep === 2) {
+        splitList = [
+          { start: 500, end: 1000 },
+          { start: 100, end: 500 },
+          { start: 50, end: 100 },
+          { start: 20, end: 50 },
+          { start: 10, end: 20 },
+          { start: 0, end: 10 }
+        ]
+      } else if (deep === 3) {
+        splitList = [
+          { start: 20, end: 1000 },
+          { start: 15, end: 20 },
+          { start: 10, end: 15 },
+          { start: 5, end: 10 },
+          { start: 2, end: 5 },
+          { start: 0, end: 2 }
+        ]
+      }
+      return splitList
+    },
+    onButton() {
+      if (this.chartOption !== null) {
+        const item = this.chartOption.series[0]
+        const showLable = item.label.show
+        if (showLable) {
+          this.chartOption.series[0].label.show = false
+          this.$message.info('不显示地区名')
+        } else {
+          this.chartOption.series[0].label.show = true
+          this.$message.info('显示地区名')
+        }
+        this.myChart.setOption(this.chartOption)
+      }
     }
   }
 }