echarts地图颜色和数据关联
时间: 2023-08-11 12:33:08 浏览: 77
要让echarts地图的颜色和数据关联,你需要在数据中为每个区域指定一个值,然后使用visualMap组件来映射值和颜色。
首先,在数据中为每个区域指定一个值,例如:
```
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300},
...
]
```
然后,在echarts的option中添加visualMap组件,例如:
```
visualMap: {
type: 'piecewise',
pieces: [
{min: 0, max: 100, label: '0-100', color: '#FDEBCF'},
{min: 100, max: 200, label: '100-200', color: '#FCBBA1'},
{min: 200, max: 300, label: '200-300', color: '#FC9272'},
...
]
}
```
这里使用了visualMap的piecewise类型,表示将值分成几个区间,每个区间对应一个颜色。pieces数组中每个元素表示一个区间,min和max表示区间的范围,label表示区间的标签,color表示区间的颜色。
最后,在series中指定数据和使用visualMap,例如:
```
series: [
{
type: 'map',
map: 'china',
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300},
...
],
label: {
show: true
},
itemStyle: {
normal: {
borderColor: '#fff'
}
}
}
],
visualMap: {
type: 'piecewise',
...
}
```
这样,echarts地图的颜色就与数据关联起来了。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)