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地图给每个区域添加不同颜色
基础教程推荐
猜你喜欢
- CSS教程:理解继承属性及应用 2023-12-22
- JS、jQuery中select的用法详解 2024-01-06
- 详解CSS中的z-index属性在层叠布局中的用法 2024-01-24
- javascript 简单抽屉效果的实现代码 2024-04-09
- javascript实现倒计时跳转页面 2024-02-09
- 解决CSS中子元素z-index与父元素兄弟节点的层级问题 2024-01-19
- Ajax全局加载框(Loading效果)的配置 2023-01-20
- Ajax的jsonp方式跨域获取数据的简单实例 2022-12-28
- CSS cursor 属性 — 鼠标指针样式效果 2024-01-24
- javascript中window.open在原来的窗口中打开新的窗口(不同名) 2023-12-01