echarts 设置柱状图颜色
时间: 2023-10-05 09:06:44 浏览: 66
在 echarts 中设置柱状图的颜色可以通过以下方式实现:
1. 使用 `color` 属性设置全局颜色
可以在 `option` 对象中的 `color` 属性中设置全局颜色,这样所有图表的颜色都将按照该颜色顺序进行渲染。例如:
```javascript
option = {
color: ['#3398DB','#FFC107','#FF5722','#5FB878','#1E9FFF'],
...
}
```
2. 使用 `itemStyle` 属性设置单个柱状图颜色
可以在 `series` 对象中的 `itemStyle` 属性中设置单个柱状图的颜色。例如:
```javascript
option = {
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
color: '#3398DB'
}
}],
...
}
```
3. 使用 `visualMap` 属性设置柱状图颜色
可以在 `option` 对象中的 `visualMap` 属性中设置柱状图的颜色,这样柱状图颜色将根据数据值的大小进行渲染。例如:
```javascript
option = {
visualMap: {
min: 0,
max: 100,
color: ['#FFC107','#FF5722']
},
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50]
}],
...
}
```
以上是 echarts 设置柱状图颜色的三种方式,你可以根据需要选择其中的一种或多种方式来实现。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)