笔记:Echarts地图 被选中更改颜色一系列配置_skyseey的博客-CSDN博客_echarts地图选中颜色
echarts地图,和地图点击事件_小鱼爱小于的博客-CSDN博客_echarts 地图点击事件
ECharts map地图点击切换变颜色 - 掘金
myChart.setOption(option);
myChart.off("click");
//点击地图事件
myChart.on("click", (params) => {
console.log(params, "paramsparamsparamsparamsparams");
let type = 0;
switch (params.name) {
case "永修县":
type = 1;
break;
case "武宁县":
type = 2;
break;
case "瑞昌市":
type = 3;
break;
case "德安县":
type = 4;
break;
case "永修县":
type = 5;
break;
case "柴桑区":
type = 6;
break;
case "共青城市":
type = 7;
break;
case "庐山市":
type = 8;
break;
case "浔阳区":
type = 9;
break;
case "濂溪区":
type = 10;
break;
case "湖口县":
type = 11;
break;
case "都昌县":
type = 12;
break;
case "彭泽县":
type = 13;
break;
default:
type = 0;
}
store.commit("politics/SELECT_CITY", type);
});
this.windowResize(myChart);
示例:
<template>
<div>
<div class="midPart">
<!-- <div class="mapEchart" ref="mapEchart"></div> -->
<div class="mapEchart" id="lnMap" ref="mapEchart"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import store from "../store";
export default {
name: "CityMap",
describtion: "城市地图",
props: {
// title: {
// type: String,
// default: "",
// },
},
data() {
return {
initMapChart: "",
};
},
mounted() {
this.initSMap();
},
methods: {
initSMap() {
let that = this;
let name = "bj";
let uploadedDataURL = require("../assets/plugins/echarts/anqing_geo.json");
that.initMapChart = this.$echarts.init(document.getElementById("lnMap"));
that.$echarts.registerMap(name, uploadedDataURL);
let _data = [
{
name: "修水县",
type: 0,
selected: true,
},
{
name: "永修县",
type: 1,
selected: false,
},
{
name: "武宁县",
type: 2,
se