"ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。"
1.安装ECharts,指定@4.9.0版本
npm install echarts@4.9.0
2.在main.js写入
import echarts from 'echarts'
import '../node_modules/echarts/map/js/china' //在node_modules中找到china.js并写入(重要!)
Vue.prototype.$echarts = echarts
3.创建一个有实际宽高的容器
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
4.然后初始化ECharts,同时配置相关项
var myChart = this.$echarts.init(document.getElementById(‘main’));
var option = {
series: [{
name: '省',
type: 'map',
map: 'china',
roam: true,
zoom: 1.2,
aspectScale: 0.75,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
areaColor: 'rgba(0,255,236,0.1)',
borderColor: 'rgba(118,237,236,1)',
},
emphasis: {
areaColor: 'rgba(118,237,236,0.8)',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
};
最后效果: