如何设置Echarts的世界地图每个国家颜色不一样
时间: 2024-03-14 10:48:49 浏览: 61
echarts世界地图资源map.zip
要设置Echarts的世界地图每个国家颜色不一样,可以通过Echarts提供的`visualMap`组件来实现。
下面是一个简单的示例代码:
```javascript
option = {
visualMap: {
type: 'piecewise', // 分段型 visualMap
pieces: [
{min: 10000, max: 1000000, color: '#F7BDAE'},
{min: 1000, max: 9999, color: '#F9D3B1'},
{min: 500, max: 999, color: '#FCD7B4'},
{min: 100, max: 499, color: '#FDE0C5'},
{min: 10, max: 99, color: '#FEEED4'},
{min: 1, max: 9, color: '#FFFFFF'},
{value: 0, color: '#FFFFFF'} // 无数据的颜色
],
textStyle: {
color: '#fff'
},
left: '10%',
top: 'bottom'
},
series: [
{
type: 'map',
map: 'world',
roam: true,
itemStyle: {
emphasis: {label: {show: true}}
},
data: [
{name: 'Afghanistan', value: 28397.812},
{name: 'Angola', value: 19549.124},
{name: 'Albania', value: 3150.143},
// 其他国家的数据
]
}
]
};
```
在上面的代码中,`visualMap`组件定义了分段型的颜色范围,`series`中的`data`定义了每个国家的数据和对应的颜色值。通过这种方式,可以实现世界地图每个国家颜色不一样的效果。
阅读全文