vue中echarts地图

import

  import echarts from "echarts";
  import  elementResizeDetector  from "element-resize-detector" //窗口变化时，刷新图表，保持大小可观

template

<template>
       <div ref="chart" :style="{width:'100%',height:height+'px'}" ></div>
</template>

mount方法中添加绘图方法

 mounted() {
      let erd = elementResizeDetector();
      let _this = this;
      _this.myChart = echarts.init(_this.$refs.chart);
      erd.listenTo(_this.$refs.chart_, function (element) {
        let width = element.offsetWidth
        let height = element.offsetHeight
        _this.$nextTick(function () {
          //使echarts尺寸重置
          _this.myChart.resize();
        })
      })
      _this.myChart.on('click', function (params) {
              _this.$emit("clickMap", this.city);
      }.bind(_this))
      this.height = this.$refs.chart_.offsetHeight - 10;
      this.init();
    }

int方法里面

      echarts.registerMap('Map', mapJson);  //注册对应的地图参数
        //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去
        let _this = this;
        this.myChart.setOption({
          backgroundColor: '#fff',
          tooltip: {
            trigger: "item",
            formatter: p => {
              let data = p.data;
              let txtCon = `${p.name}<br><hr>${_this.kpiArr.filter(item =>{ return _this.kpiName ==item.name })[0].show} : ${data.dra? data.dra : '-'}<br>抢修中 : ${ data.ing? data.ing : '-'}<br>已恢复 : ${data.rec? data.rec : '-'}`; //已恢复 : ${data.rec? data.rec : '-'
              return txtCon;
            }
          },
          title: {
            show: false,
            x: "left",
            y: "top",
            text: this.cityName,
            textStyle: {
              color: "#515a6e",
              fontSize: 16
            }
          },
          visualMap: {
            min: 0,
            max: visualMapMax == 0 ? 10 : visualMapMax,
            text: ['', ''],
            realtime: false,
            calculable: true,
            inRange: {
              color: ['lightskyblue', 'yellow', 'orangered']
            }
          },
          //这里可以添加echarts内置的，例如下载图片等
          /*toolbox: {
            feature: {
              dataView: {
                show: false,
                readOnly: true
              },
              magicType: {
                show: false,
                type: ["line", "bar"]
              },