在线创建 ECharts 图表的平台 Gallery 可以找到一些基于echart的高度定制好的图表,相当于基于jquery开发的插件,这里是基于echarts开发的第三方的图表。
Echarts-map使用
参考Gallery的例子:https://www.makeapie.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)
实现步骤:
-
第一需要下载china.js提供中国地图的js文件
-
第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
-
使用社区提供的配置即可。
需要修改:
- 去掉标题组件
- 去掉背景颜色
- 修改地图省份背景 #142957 areaColor 里面做修改
- 地图放大通过 zoom 设置为1.2即可
核心代码:
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
},
emphasis: {
areaColor: '#0b1c2d'
}
}
},