vue 使用echart5.3实现中国地图

第一次使用echart，刚刚安装好，开心的寻找中国地图时候，得知在5.0被移除了，不知道为什么，我不信邪，于是使用了以下办法实现需求；
效果图

1.定义map

    <div id="myMap" :style="{width: '575px', height: '510px'}">
    </div>

2.引入china.js

import "@/assets/mapJs/china.js"

```c

这个china.js必备，放在assets中，链接在资源里

3.定义地图配置

  data () {
    return {
      mapStyle: 'china',//默认
      //echart 配制option  
      options: {
        tooltip: {
          show: false,
          triggerOn: "mousemove",   //mousemove、click
          trigger: 'item',
          padding: 8,
          borderWidth: 0,
          borderColor: '#409eff',
          backgroundColor: 'rgba(255,255,255)',
          textStyle: {
            color: '#000000',
            fontSize: 13
          },
          // 提示框位置
          position: function (point, params, dom, rect, size) {
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];
            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];
            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else { // 左边放的下
              x = pointX - boxWidth - 15;
            }
            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y = pointY - boxHeight + 10;
            }
            return [x, y];
          },
          formatter: function (e, t, n) {
            let data = e.data;
            let context = `   //自定义提示框
               <div class="mapTips">
                   <p class="mapTipsTitle">${data.name}</p>
                    <div class="mapTipBox">
                      <span class="mapPic"></span>
                      <span>文献数量</span>
                      <span class="tooltip_right">
                      ${data.value[2]}
                      </span>
                    </div>
                   
               </div>
            `
            return context;
          }
        },
        geo: {
          map: "china",
          left: 40, top: 0, right: 40, bottom: 0,
          aspectScale: 1, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
          zoom: 1, //视觉比例大小,1.2即为原有大小的1.2倍
          scaleLimit: {
            min: 1,
            max: 8
          },
          top: 120,
          label: {
            show: true,
            fontSize: "11",
            color: "#706559"
          },
          roam: true,
          itemStyle: {
            borderColor: "#9D9792",
            borderWidth: 1,
            borderType: 'solid',
            shadowOffsetX: 0,
            shadowOffsetY: 0,

          },
          // 地图hover样式
          emphasis: {
            disabled: false,
            focus: 'none',
            // label: {
            //   color: '#fff'
            // },
            itemStyle: {
              areaColor: "#A98177",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              shadowBlur: 0,
              borderWidth: 1,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }

          }
        },
        series: [  //核心数据配置
          {
            name: '突发事件',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [],
            symbolSize: function (val) {
              return val[2] * 10;  //改变圆点大小
            },
            // hoverAnimation: true,
            encode: {
              value: 2
            },
            label: {
              formatter: '',
              position: 'right',
              show: false,
              color: 'rgb(230, 235, 242)'
            },
            itemStyle: {
              color: "#D1725E",
              // 其余点的设置，如果是一个颜色，直接设置color: '颜色值'，不是的话那么就用回调函数
              // color: parames => {
              //   console.log()
              //   if (parames.value[2] != 150) {
              //     if (parames.value[2] > 9 && parames.value[2] < 60) {
              //       return '#FF0000'
              //     } else if (parames.value[2] > 60 && parames.value[2] < 100) {
              //       return '#9966FF'
              //     } else {
              //       return '#99FFFF'
              //     }
              //   }
              // }
            },
            //控制鼠标移入圆点时显示数据
            tooltip: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: 'xxx',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: [],//这里的0，13是水波纹显示的前几个
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              formatter: '{b}',
              position: 'right',
              show: true,
              color: 'rgb(24, 25, 25)',
              fontWeight: 700
            },
            itemStyle: {
              color: 'rgb(38, 201, 165)',
              shadowBlur: 10,
              shadowColor: '#333',
            },
            // 悬浮出现的框
            tooltip: {
              show: true,
              formatter: function (e, t, n) {
                let data = e.data;
                let context = `
               <div class="mapTips">
                   <p class="mapTipsTitle">${data.name}</p>
                    <div class="mapTipBox">
                      <span class="mapPic"></span>
                      <span>文献数量</span>
                      <span class="tooltip_right">
                      ${data.value[2]}
                      </span>
                    </div>
                   
               </div>
            `
                return context;
              }
            },
            // emphasis: {
            //   label: {
            //     show: true
            //   }
            // },
            zlevel: 1
          }
        ]
      },
      //echart data
      dataList: [],
      geoCoordMap: {},//坐标数据
    };
  },

4.初始化地图

 //初始化中国地图
    initEchartMap () {
      let that = this;
      //根据作者籍贯获取文献分布
      queryWenxianShuliangByJiguan().then((result) => {  //处理后台返回数据
        const jsonMap = result.data.reduce((map, it) => {  
          let ipos = it.name.indexOf(",");
          let str1 = it.name.substring(ipos + 1, it.name.length);
          it.name = str1 ? str1 : it.name
          return result.data;
        }, {});
        //地图绘制
        that.dataList = result.data
        setTimeout(() => {   //这一步是因为需要动态渲染数据，加载时候异步渲染实现重绘
          myChart.setOption({
            series: [
              {
                data: convertData(that.dataList.sort())
              }
            ]
          })
        }, 300)
      })
      let mapDiv = document.getElementById('myMap');
      let myChart = this.$echarts.init(mapDiv, null, { renderer: 'svg' });
      // 点击显示圆点跳转
      myChart.on('click', function (params) {
        if (params.data) {
          // console.log(params.data);//此处写点击事件内容
          // that.$router.push({ name: "advanSearch", query: { comment: "isAuthor", searchVal: '', toAdState: false, autPlace: params.data.name } })
        } else {
          return
        }
      });
      myChart.setOption(this.options);
      // 窗口自适应
      (window.onresize = function () {
        myChart.resize();
      })

    },

end。