使用场景

echart 上面的地图示例有了很大的变化，根据现在的项目需求，需要加载到省市级别也可能到县区级别的，随机某个地区都有可能，怎么随意加载各地区地图呢。

开始

地区图来源

http://datav.aliyun.com/tools/atlas/#&lat=51.59217252564636&lng=118.76513097945013&zoom=7.5
阿里云的，随便选中一个区域，自己体会哈，这个地方会有地区树结构数据，然后保存下来，保存成为一个json文件即可。
我用青岛区域举个例子。

图片.png

图表使用

地区json 文件引入vue 重，这个地方要先注册地图才能使用，注册函数举个例子，详细的请看echart 官方文档举例子
this.$echarts.registerMap('QD', { geoJSON: qingdaoMap })
如果需要增加标注之类的，自己研究研究，我这里也举了一个栗子，举了好几个已经，累了。

上代码

<template>
  <div ref="testLine" id="testLine" style="width:600px; height:300px"></div>
</template>

<script>
// 引入这个json 文件
import qingdaoMap from '@/assets/map/QingDao.json'
export default {
  name: 'DisplayDraw',
  data () {
    return {
      myChart: null,
      option: {
        title: {
          text: '青岛市',
          textStyle: {
            color: '#fff'
          },
          left: 'center'
        },
        geo: {
          type: 'map',
          map: 'QD',
          zoom: 1.1,
          itemStyle: {
            areaColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#02f1fa' // 0% 处的颜色
              }, {
                offset: 1, color: '#02f1fa' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        series: [
          {
            name: '青岛市',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
              { name: '市南点位', value: [120.395966, 36.070892, 50] }
            ],
            symbol: 'pin',
            symbolSize: '30',
            encode: {
              value: 2
            },
            label: {
              formatter: (a) => {
                return `${a.name} ${a.value[2]}`
              },
              position: 'right',
              show: false,
              backgroundColor: '#fff',
              fontSize: 14,
              borderWidth: 1,
              borderRadius: 5,
              height: 30
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
    }
  },
  methods: {
    initChart () {
      const {
        myChart,
        option
      } = this
      // 需要注册地区，注意这个名称就是后边引用地图名称QD
      this.$echarts.registerMap('QD', { geoJSON: qingdaoMap })
      myChart.setOption(option)
    }
  },
  mounted () {
    // 两张引入方式都可以，这里我用ref,注意一定要节点 初始化完成
    // this.myChart = this.$echarts.init(document.getElementById('testLine'))
    this.myChart = this.$echarts.init(this.$refs.testLine)
    this.initChart()
  }
}
</script>

<style>
</style>

效果图

图片.png