vue + echarts实现地图
全局安装echarts
npm i echarts --save
将echarts绑定在原型上(main.js文件中)
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
准备画布
<template>
<div ref="openingChart" style="height: 600px;">div>
template>
<script>
import china from "../store/china.json";
export default {
methods: {
initCharts() {
// 初始化中国地图
this.$echarts.registerMap("china", china);
// 获取dom节点
let openingChart= this.$echarts.init(this.$refs.openingChart);
// option配置写在最下面的
openingChart.setOption(option);
window.addEventListener("resize", () => {
openingBankChart.resize();
});
}
},
mounted() {
this.initCharts();
}
}
</script>
地图配置option
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
},
},
},
},
]
}
中国地图包（china.json）
去除了海南多余的地方的中国地图