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地图给每个区域添加不同颜色


基础教程推荐
猜你喜欢
- 左边固定宽右边自适应的6种方法 2023-12-11
- 理论普及——用户体验 2023-12-29
- JavaScript获取css行间样式,内连样式和外链样式的简单方法 2024-02-05
- jQuery中调用WebService方法小结 2024-01-06
- 编写轻量ajax组件01-与webform平台上的各种实现方式比较 2022-10-17
- Ajax请求二进制流进行处理(ajax异步下载文件)的简单方法 2023-02-14
- 深入浅析Nginx实现AJAX跨域请求问题 2023-01-20
- CSS样式表层叠(cascade)处理冲突 2024-02-06
- 浅析Bootstrap表格的使用 2023-12-20
- javascript帧动画(实例讲解) 2024-02-08