Echarts地图根据不同数据划过显示不同颜色
时间: 2023-09-25 15:10:13 浏览: 292
可以使用 Echarts 的 visualMap 组件实现根据不同数据划过显示不同颜色的效果。visualMap 组件可以将数据映射成颜色,大小等视觉元素,并展示在地图上。下面是一个简单的示例代码:
```js
option = {
visualMap: {
min: 0,
max: 1000,
inRange: {
color: ['#e0ffff', '#006edd']
},
textStyle: {
color: '#fff'
}
},
series: [{
type: 'map',
map: 'china',
data: [
{name: '北京', value: 100},
{name: '上海', value: 200},
{name: '广州', value: 300},
{name: '深圳', value: 400},
{name: '重庆', value: 500},
]
}]
};
```
在上面的代码中,visualMap 组件定义了数据范围从 0 到 1000,颜色映射为淡蓝色到深蓝色。series 中的 data 数组包含了各个城市的数据,会根据数据大小显示不同的颜色。
阅读全文