echarts柱状图,y轴包含“-”即负数的柱子展示灰色
时间: 2023-11-07 21:51:58 浏览: 97
可以通过 echarts 的 `itemStyle` 属性来设置负数柱子的颜色。具体方法如下:
1. 在数据中标记出负数,例如用负号 `-` 或括号 `( )` 包含负数。
2. 在 `yAxis` 中设置 `axisLabel` 的 `formatter` 参数,将负数显示为灰色。
```javascript
yAxis: {
axisLabel: {
formatter: function(value) {
if (value < 0) {
return `{gray|${value}}`
} else {
return value
}
},
rich: {
gray: {
color: '#999'
}
}
}
}
```
3. 在 `series` 中设置 `itemStyle` 的 `color` 参数,将负数柱子的颜色设置为灰色。
```javascript
series: [{
type: 'bar',
data: [...],
itemStyle: {
color: function(params) {
if (params.data < 0) {
return '#999'
} else {
return '#c23531'
}
}
}
}]
```
完整的代码示例:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function(value) {
if (value < 0) {
return `{gray|${value}}`
} else {
return value
}
},
rich: {
gray: {
color: '#999'
}
}
}
},
series: [{
type: 'bar',
data: [12, -5, 6, -8, 10],
itemStyle: {
color: function(params) {
if (params.data < 0) {
return '#999'
} else {
return '#c23531'
}
}
}
}]
};
```
效果如下:
![echarts柱状图](https://i.imgur.com/ibj8SIi.png)
阅读全文