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 themeexport 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); //区县名称}});
},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！