echarts中国地图点击切换到各省地图
作者：互联网
<div class="map" style="position:relative">
<el-button
type="primary"
size="mini"
round
v-if="mapImg"
@click="back"
style="padding:5px 20px;background: #5A8BBD;position:absolute;z-index:999;right:0;top:20px;cursor: pointer"
>返回</el-button>
<div id="chinaMap" style="height:560px;width:100%;" ref="myEchart"></div>
</div>
js
addScript() {
let echart_prefix = "https://cdn.jsdelivr.net/npm/echarts@4.9.0/";
let map_province = [
"anhui",
"aomen",
"beijing",
"chongqing",
"fujian",
"gansu",
"guangdong",
"guangxi",
"guizhou",
"hainan",
"hebei",
"heilongjiang",
"henan",
"hubei",
"hunan",
"jiangsu",
"jiangxi",
"jilin",
"liaoning",
"neimenggu",
"ningxia",
"qinghai",
"shandong",
"shanghai",
"shanxi",
"shanxi1",
"sichuan",
"taiwan",
"tianjin",
"xianggang",
"xinjiang",
"xizang",
"yunnan",
"zhejiang"
];
let map_province_data = [];
for (let x in map_province) {
map_province_data.push(
echart_prefix + "map/js/province/" + map_province[x] + ".js"
);
}
scriptjs(map_province_data);
},
loadData() {
let echart_prefix = "https://cdn.jsdelivr.net/npm/echarts@4.9.0/";
scriptjs(echart_prefix + "map/js/china.js", () => {
this._tGyggIndexStatistics("");
});
this.isLoaded = true;
},
_tGyggIndexStatistics(notice) {
let params = {
xzqDm: this.xzqbm
// startDate:'2020-10-01',
// endDate:'2021-01-01'
};
jiekou(params).then(res => {
if (res.data.code === 200) {
this.addScript();
if (notice != "noMap") {
this.mapData = res.data.mapData;
this.chinamap(res.data.mapData);
}
}
});
},
chinamap(data) {
let that = this;
var myChart = echarts.init(document.getElementById("chinaMap"));
let num = [];
let maxArr = [];
let max = null;
if (this.length == "") {
for (let i in data) {
let name1;
if (data[i].xzqName && data[i].xzqName.length > 2) {
name1 = data[i].xzqName
.replace("省", "")
.replace("市", "")
.replace("回族", "")
.replace("壮族", "")
.replace("维吾尔", "");
// .replace('市','');
} else {
name1 = data[i].xzqName;
}
// console.log('name1',name1)
let value;
if (data[i].num) {
value = Number(data[i].num);
} else {
value = 0;
}
num.push({
name: name1,
value: value,
console: { xzqdm: data[i].xzqDm }
});
maxArr.push(value);
}
} else {
for (let i in data) {
let name1 = data[i].xzqName;
let value;
if (data[i].num) {
value = Number(data[i].num);
} else {
value = 0;
}
num.push({
name: name1,
value: value,
console: { xzqdm: data[i].xzqDm }
// num:data[i].
});
maxArr.push(value);
}
}
max = Math.max(...maxArr);
let option = {
tooltip: {
// trigger: "item"
formatter(e) {
// console.log('e',e)
if (e.data) {
return `区域：${e.data.name}</br>
宗数：${e.data.value} </br>`;
}
},
// position: "right",
textStyle: {
align: "left"
}
},
// animation: true,
//左侧小导航图标
visualMap: {
min: 0,
max: max,
top: "bottom",
text: ["高", "低"],
inRange: {
color: ["#C6D5FA", "#366DF0"]
},
show: true
},
geo: {
// map: "china",
map: this.seriesMap,
mapType: this.seriesMapType,
roam: false, //不开启缩放和平移
zoom: 1.1, //视角缩放比例
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
label: {
show: true
}
}
}
},
//配置属性
series: [
{
name: "面积",
type: "map",
map: this.seriesMap,
mapType: this.seriesMapType,
roam: false,
zoom: 1.1,
data: num,
// geoIndex: 0,
label: {
normal: {
// 省市区名字显示不显示
// show: true,
formatter: function(params) {
// console.log(params,'params')
// return params.value + "\r\n" + params.name;
}
},
emphasis: {
show: false
}
}
}
]
};
that.option = option;
if (this.seriesMap == "海南") {
option.series[0].center = [109.844902, 19.0392];
option.series[0].layoutCenter = ["50%", "50%"];
option.series[0].layoutSize = "600%";
option.geo.center = [109.844902, 19.0392];
option.geo.layoutCenter = ["50%", "50%"];
option.geo.layoutSize = "600%";
} else {
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
option.geo.center = undefined;
option.geo.layoutCenter = undefined;
option.geo.layoutSize = undefined;
}
/**
* 使用刚指定的配置项和数据显示图表。
* */
myChart.clear();
myChart.setOption(option, true);
myChart.off("click");
myChart.on("click", function(chinaParam) {
// var option = myChart.getOption();
if (
chinaParam.data.console.xzqdm &&
chinaParam.data.console.xzqdm.length < 4
) {
that.option.geo.map = chinaParam.name;
var option = that.option;
// console.log("that.option", option, option.series[0]);
that.seriesMap = chinaParam.name;
that.seriesMapType = chinaParam.name;
that.name = chinaParam.name;
myChart.clear();
that.mapImg = true;
// console.log(chinaParam, chinaParam.name, that.mapImg);
console.log("chinaParam.data", chinaParam.data);
if (chinaParam.data) {
that.xzqbm = chinaParam.data.console.xzqdm;
that.length = 4;
// that._mapIndex();
that._tGyggIndexStatistics("");
} else {
option.series[0].map = chinaParam.name;
option.series[0].mapType = chinaParam.name;
if (this.seriesMap == "海南") {
option.series[0].center = [109.844902, 19.0392];
option.series[0].layoutCenter = ["50%", "50%"];
option.series[0].layoutSize = "600%";
option.geo.center = [109.844902, 19.0392];
option.geo.layoutCenter = ["50%", "50%"];
option.geo.layoutSize = "600%";
} else {
option.series[0].center = undefined;
option.series[0].layoutCenter = undefined;
option.series[0].layoutSize = undefined;
option.geo.center = undefined;
option.geo.layoutCenter = undefined;
option.geo.layoutSize = undefined;
}
myChart.setOption(option, true);
that._tGyggIndexStatistics("noMap");
}
}
});
},
标签：option,series,地图,geo,点击,let,chinaParam,data,echarts 来源： https://www.cnblogs.com/yieix/p/15596755.html