echarts引入地图

<template>
     <div ref="myChartChina" :style="{width: '100%', height: '500px',background:'pink'}"></div>
</template>
 
<script>
import * as echarts from "echarts";
import '@/assets/js/china.js' // 引入中国地图数据

export default {
mounted() {
    this.ChinaMap();
  },
    methods:{
            ChinaMap(){
      var that=this;
       
      //模拟数据
      let data = [
          {name: '威海', value: 90 ,num: 5,id:8},
          {name: '青岛', value: 102 , num: 15, id:16},
      ];
      let geoCoordMap = {
          '威海':[122.12348,37.50212],
          '青岛':[120.39629,36.30744],
      };
 
      var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                  res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    num: geoCoord.concat(data[i].num),
                    id: geoCoord.concat(data[i].id)
                  });
              }
          }
          return res;
      };
 
    var bar_dv = this.$refs.myChartChina;
      let myChartChina = echarts.init(bar_dv) //这里是为了获得容器所在位置    
        window.onresize = myChartChina.resize;
        myChartChina.setOption({ // 进行相关配置
          backgroundColor: '#fff',//地图背景色
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            label: {
              normal:{
                show: true, // 是否显示对应地名
                formatter(v) {
                return v.name == "山东" ?  "山东" : "";
                },
                textStyle: { //字体颜色
                  color: '#fff'
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                borderWidth: 1, // 地图边框宽度
                borderColor: '#183363', // 地图边框颜色
                areaColor: '#8bb0f0' // 地图颜色
              },
              emphasis: {//选中省份的颜色
                areaColor: '#026295',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                borderWidth: 1,
                shadowColor: '#fff'
              }
            }
          },
          //滑动显示数据
          tooltip: {
              trigger: 'item',
              formatter: function(params) {
                  return params.name + '<br/>' + ' 猪场: ' + params.data.num[2] + '个';
              }
          },
          series: [{
              name: '散点',
              type: 'scatter',
              coordinateSystem: 'geo',
              color:"#f333bf",//点的颜色
              data: convertData(data),
              symbolSize: 25,//点的大小
              symbol:"pin",//点的样式
              cursor:"pointer",//鼠标放上去的效果
              label: {
                normal: {//默认展示
                    show: false
                },
                emphasis: {//滑过展示
                    show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#a30979',
                  borderWidth: 5
                }
              }
            },
 
            {
              type: 'map',
              map: 'china',
              geoIndex: 0,
              aspectScale: 0.75,
              tooltip: {
                  show: false
              }
            },
              
          ],
        })
        // if (myChartChina && typeof myChartChina === "object") {
        //     myChartChina.setOption(myChartChina, true);
        // }
        myChartChina.on('click', function (params) { //点击事件
          if (params.componentType === 'series') {
            if(params.data){
              that.TipsList=params.data
              that.ifbox=true
              that.boxPosition()
 
            }else{
              that.ifbox=false
            }
          }
        });
    },

    }
}
</script>