echarts 地图 热力图 area部分由外向内颜色渐变
时间: 2023-07-11 18:45:39 浏览: 160
ECharts地图-自定义23.rar
要实现 echarts 地图热力图区域由外向内的颜色渐变,可以使用 visualMap-continuous 属性和 color 属性来实现。
下面是一个简单的例子:
```javascript
option = {
visualMap: {
type: 'continuous',
min: 0,
max: 100,
calculable: true,
color: ['#00aaff', '#ffff00', '#ff0000']
},
series: [{
type: 'map',
mapType: 'china',
data: [
{ name: '北京', value: 60 },
{ name: '上海', value: 90 },
{ name: '广州', value: 30 },
{ name: '深圳', value: 80 },
{ name: '重庆', value: 20 }
]
}]
};
```
在上面的例子中,设置 visualMap 的 type 属性为 continuous,表示连续型的颜色渐变。min 和 max 属性表示数据的最小值和最大值,color 属性表示渐变色的颜色值,在本例中使用了蓝色、黄色和红色三种颜色。在 series 中设置 type 为 map,表示绘制地图,并设置 data 属性表示地图显示的数据。
这样就可以实现 echarts 地图热力图区域由外向内颜色渐变的效果了。你也可以根据自己的需求调整 visualMap 的其他属性,比如调整渐变色的数量、颜色值等。
阅读全文