vue加载echarts中国地图
1.效果
2. 参考文章：
https://blog.csdn.net/qq_45832807/article/details/123692476?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167894895616800182163938%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167894895616800182163938&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2blogfirst_rank_ecpm_v1~rank_v31_ecpm-13-123692476-null-null.blog_rank_default&utm_term=echarts&spm=1018.2226.3001.4450
作者：HerayChen
3.china.json 前往参考文章下载
4.单页面完整代码
<template>
<div ref="openingChart" style="height: 600px;"></div>
</template>
<script>
import china from "../assets/chinaChange.json";
export default {
mounted() {
setTimeout(() => {
this.initCharts();
}, 3000);
},
methods: {
initCharts() {
// 初始化中国地图
this.$echarts.registerMap("china", china);
// 获取dom节点
let openingChart = this.$echarts.init(this.$refs.openingChart);
// option配置写在最下面的
let option = {
// 地图背景色
backgroundColor: "#ccd3e4",
geo: {
map: 'china',
},
tooltip: {
trigger: 'item',
// 自定义提示框的内容
/** 这里自定义显示的值是data中value数组的第二个值
* formatter(params) {
return (
"" +
params.data.name +
"
" +
"省份总额度：" +
params.data.value[2] +
"（万元）"
);
}
*/
},
series: [
{
type: 'map',
map: 'china',
geoIndex: 1,
showLegendSymbol: false, // 存在legend时显示
tooltip: {
show: false
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: "#aaa",
borderColor: "#ccd3e4",
borderWidth: 1,
},
emphasis: {
areaColor: "#aaa",
},
},
}, {
name: '省份总额度',
type: 'effectScatter',
coordinateSystem: 'geo',
data: [{
name: "深圳",
value: [121.15, 31.89, 12],
},
{
name: "武汉",
value: [109.781327, 39.608266, 29]
}],
symbolSize: 20,
symbol: 'circle',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
showEffectOn: "render",
itemStyle: {
normal: {
color: {
type: "radial",
colorStops: [
{
offset: 0,
color: "#e5c68b",
},
{
offset: 0.8,
color: "#6e96d4",
},
{
offset: 1,
color: "#6e96d4",
},
],
global: false, // 缺省为 false
},
},
},
},
]
}
openingChart.setOption(option);
window.addEventListener("resize", () => {
openingBankChart.resize();
});
}
},
mounted() {
this.initCharts();
}
}
</script>
<style scoped>
#myChart {
width: 100vw;
height: 100vh;
border: 1px solid rebeccapurple;
}
</style>