echarts地图给每个区域添加不同颜色,在geo级下新增regions数组,每个数据一个区域。
"geo": {
"map": "中国各省市县形状",
"layoutCenter": ["50%", "50%"],
"layoutSize": "90%",
"roam": true, //是否允许缩放
"mapLocation": {
"width": "110%",
"height": "97%"
},
label: {
normal: { //静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 12
}
},
emphasis: { //动态展示的样式
color: '#fff',
},
},
//默认颜色
itemStyle: {
normal: {
areaColor: '#091233',
borderColor: '#269cfd', //线
},
emphasis: {
areaColor: '#0a2dae', //悬浮区背景
}
}
//对不同的区块进行着色
regions: [{
name: "凤凰镇",
itemStyle: {
normal: {
areaColor: "#0f0",
},
emphasis: {
areaColor: "#0f0",
},
},
},{
name: "塘桥镇",
itemStyle: {
normal: {
areaColor: "#f00",
},
emphasis: {
areaColor: "#f00",
},
},
}]
}
以上是编程学习网小编为您介绍的“echarts地图给每个区域添加不同颜色”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:echarts地图给每个区域添加不同颜色


猜你喜欢
- webpack高级配置与优化详解 2022-11-13
- Ajax+php实现商品分类三级联动 2023-01-20
- 获取input标签的所有属性的方法 2023-12-26
- Linux 之 HTML 页面转图片软件:wkhtmltox 2023-10-25
- JS实现在线统计一个页面内鼠标点击次数的方法 2023-12-01
- JavaScript 删除或抽取字符串指定字符的方法(极为常用) 2023-08-12
- 表单上传功能实现 ajax文件异步上传 2023-02-14
- CSS网页布局入门教程4:二列固定宽度 2024-02-06
- 微信小程序网络数据请求的实现详解 2022-08-30
- 网页加载速度优化技巧的方案详解 2024-02-05