ECharts点击切换地图

地图代码

<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
import "@/api/assetAnalysisReport/reticleGroupReport/shanxi1";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "srhjDataDiShi",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    url:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      world: require("@/api/assetAnalysisReport/reticleGroupReport/"+this.url+".json"),
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      echarts.registerMap("world", this.world, {});
      this.setOptions(this.chartData)
    },
      // this.$nextTick(() => {
        // this.chart = echarts.init(this.$el);
        
      setOptions({ name,value } = {}) {
      var mydata=[{name:name[0],value:value[0]},
      {name:name[1],value:value[1]},
      {name:name[2],value:value[2]},
      {name:name[3],value:value[3]},
      {name:name[4],value:value[4]},
      {name:name[5],value:value[5]},
      {name:name[6],value:value[6]},
      {name:name[7],value:value[7]},
      {name:name[8],value:value[8]},
      {name:name[9],value:value[9]},
      {name:name[10],value:value[10]},
      {name:name[11],value:value[11]},
      {name:name[12],value:value[12]},
      {name:name[13],value:value[13]},] 
      var option = {
        title: {
          text: '',
          x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'top' ,//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textStyle:{color:'black'}
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // orient: 'vertical',
          x: 'center',      //可设定图例在左、右、居中
          y: 'bottom',     //可设定图例在上、下、居中
          padding: [0, 0, 10, 0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
          data: ['收入合计']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if(!isNaN(params.value)){
              return params.name + ' : ' + parseFloat(params.value).toFixed(2)+"%";
            }
          }
        },
        series: [{  
          name: '数据',  
          type: 'map',  
          mapType: 'world',   
          roam: false,
          zoom: 1.3,
          label: {  
            normal: {  
              show: false  //省份名称  
            },  
            emphasis: {  
              show: true  
            }  
          },  
          data:mydata  //数据
        }] ,  
        visualMap:{
          min:0,
          max:100,
          //text:['high','low'],
          pieces: [
            { gte: 50, label: '50%<=光端口实占率', color: 'red'},
            { gte: 25, lt: 50, label: '25%<=光端口实占率<50%', color: 'yellow' },
            { lte: 25, label: '绿色:光端口实占率<25%', color: 'green'}
          ],
        } 
      }
      this.chart.setOption(option)
    }
      // });
    },
  }
</script>

引用地图

<el-col :span="2" :xs="24" :sm="24" :lg="12" style="padding-right: 0;">
  <div class="chart-wrapper">
     <ditu :chart-data="dishiData" :url="url" :key="key"/>
   </div>
 </el-col>

定义变量

dishiData:{
  value: [], //盈利率
  name: [], //地市名称
},
url: "",
citylist: {
  西安: "xian",
  商洛:"shangluo",
  宝鸡:"baoji",
  安康:"ankang",
  汉中:"hanzhong",
  铜川:"tongchuan",
  渭南:"weinan",
  咸阳:"xianyang",
  延安:"yanan",
  榆林:"yulin",
},
key:''

添加数据

//点击事件
quxianView(row) {
  const city = row.city;
  this.url = this.citylist[city];
  this.key=new Date();
  this.quxianDialog = true;
  this.queryParamsquxian.city = city;
  quXianList(this.queryParamsquxian).then(response => {
    for (let i = 0; i < response.rows.length; i++) {
      this.dishiData.value.push(response.rows[i].earningsRate); //盈利率
      this.dishiData.name.push(response.rows[i].county); //区县名称
    }
  });
},