//引入

import echarts from "echarts"

//html

 <div class="echarts">  
  <div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>
   </div>

//js

 beforeDestroy() {    if (!this.chart) {      return;    }    this.chart.dispose();    this.chart = null;  },
chinaConfigure () {
  console.log(this.userJson)
  let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
  var data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
  ]
  var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
  }
  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)
              });
          }
      }
      return res;
  };
  window.onresize = myChart.resize;
  myChart.setOption({ // 进行相关配置
    backgroundColor: "#000000",
    tooltip: {},// 鼠标移到图里面的浮动提示框
    geo: { // 这个是重点配置区
      map: 'china', // 表示中国地图
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)'
        }
      }
    },
    series: [{
        type: 'effectScatter',//散点特效
        coordinateSystem: 'geo' ,// 对应上方配置
        //data:convertData(data),
        symbolSize: 16,
        data: [{
          name: '北京',    // 数据项名称，在这里指地区名称
          value: [        // 数据项值
            116.46,     // 地理坐标，经度
            39.92,      // 地理坐标，纬度
            340         // 北京地区的数值
          ]
        }],
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: false
          }
        },
        //series样式
        itemStyle: {
           normal: {
              color: '#711d8e',
           }
         }
      },
    ]
  })
 }

//改变组件自带滑过省份背景色

  try{
     myChart.on("mousemove", function (params){
        // console.log(params.event.topTarget.__hoverStl)
           if(params.event.topTarget.__hoverStl==undefined){
              console.log('map')
           } else{
             params.event.topTarget.__hoverStl.fill = 'rgba(238,238,238)'
           }
         }
            // params.event.event.srcElement.style.background='#000000'
            // console.log(params.event.event.srcElement.style.background)
        )}
    catch(err){
       console.log('map')
    }