echarts如何让地图不同地区显示不同颜色
时间: 2023-08-14 14:16:20 浏览: 66
要让 echarts 显示不同地区的颜色,可以使用 echarts 中的地图组件。具体的做法是,通过设置地图数据中的 value 值,来决定地图区域的颜色。
例如,可以先定义一个地图数据:
```
var mapData = [
{name: '北京', value: 200},
{name: '上海', value: 300},
{name: '广东', value: 400},
// ...
];
```
然后在 echarts 中使用地图组件,并将上面的数据传入:
```
option = {
series: [
{
type: 'map',
map: 'china',
data: mapData,
label: {
show: true
},
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1,
areaColor: '#ccc' // 默认地图区域的颜色
},
emphasis: {
areaColor: '#ffcc00' // 地图区域被选中时的颜色
}
}
}
]
};
```
在上面的代码中,通过设置 itemStyle.normal.areaColor 来控制地图区域的默认颜色,通过设置 itemStyle.emphasis.areaColor 来控制地图区域被选中时的颜色。同时,在地图数据中设置的 value 值也会影响地图区域的颜色,数值越大,颜色越深。