vue中使用echarts全国地图绘制加入散点图及自定义图片

移动端效果图如下

散点为统计数量，根据不同数量显示不同颜色散点及不同大小，而自定义图片则为用户头像。

参考官方文档为https://echarts.apache.org/examples/zh/editor.html?c=map-polygon

首先引入加入echarts标签

<div :style="{height:'8rem',width:'100vw'}" ref="myEchart"></div>

引入echarts

import echarts from 'echarts'

import '../../../node_modules/echarts/map/js/china' // 引入中国地图数据

vue中方法

chinaConfigure () {
    //模拟数据
    this.chinaData = [{name: '北京', value: 1}, {name: '新疆', value: 30}, {name: '湖南', value: 15},{name: '陕西', value: 20}]
    let myChart = echarts.init(this.$refs.myEchart)
    var that = this
    // 用户定位经纬度
    let myLoc = {
      value: this.mylnglat
    }
    // 监听点击事件获取省级行政编码
    myChart.on('click', function (params) {
      //点击散点时事件
      if (params.componentSubType === 'scatter') {
        
      } else {
       //普通点击城市事件
          }
        })
       
//窗口自适应
    window.onresize = myChart.resize
    // 省级中心坐标因为要用到城市编码所以加入id,且这个如果是geo文件可以用循环处理json进行数组的生成不用写死，这里我没有进行处理
    var geoCoordMap = {
      '新疆': [[86.61, 40.79], {id: '650000'}],
      '西藏': [[89.13, 30.66], {id: '540000'}],
      '黑龙江': [[128.34, 47.05], {id: '230000'}],
      '吉林': [[126.32, 43.38], {id: '220000'}],