官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制

需求:绘制北京大兴区的区域地图
官方只提供了省份区域地图,所以绘制某个区域需要自定义绘制

整体思路

1.先获取北京大范围json数据

获取省份json数据工具将北京市的整个json数据站下来

2.根据大区域的json数据去勾勒自己想要的地图,然后获取最终的json数据

绘制地图工具先将全部北京省份json数据复制过来,然后左侧就会出现北京的省份轮廓
通过单击,删除被选中的区域。大兴区的数据就会在左侧动态展示

3.生成echarts 地图

这里就延伸出来一个问题:本地怎么异步请求json数据:
(1)通用:
vue-resource 请求本地json数据方法详解

(2)针对地图

import daxingfrom '@/../public/static/json/jibei.json
echarts.registerMap('大兴区', daxing)

所以最终代码:

myChart() {
      const mychart = echarts.init(document.getElementById('mychartSheng'))
      echarts.registerMap('大兴区', daxing)
      window.addEventListener('resize', function() {
        mychart.resize()
      })
      mychart.setOption({
        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(0, 0, 0, 0.65)'
        },
        visualMap: {
          min: 0,
          max: 5000,
          calculable: true,
          inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
          }
        },
        label: {
          show: true,
          color: '#000',
          formatter: '{b}',
          position: [13, 0]
        },
        geo: {
          map: this.cityname,
          itemStyle: {
            areaColor: '#fefcd6',
            borderColor: '#75b6e3'
          }
        }
      })
    }
Logo

前往低代码交流专区

更多推荐