echarts柱状图上方显示数据,负数显示在下方,数据为死数据,坐标轴上下显示柱状图
时间: 2023-09-28 14:05:24 浏览: 137
echarts-柱状图
您可以使用ECharts的label配置项来实现这个功能。具体来说,您可以在每个柱子上方和下方分别添加一个label,并设置label的位置和数据。
下面是一个示例代码:
```js
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
splitLine: {show: false},
},
series: [{
data: [10, -5, 8, -3, 6],
type: 'bar',
label: {
show: true,
position: 'top',
formatter: function(param) {
if (param.data >= 0) {
return param.data;
} else {
return '';
}
}
},
itemStyle: {
color: function(params) {
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
if (params.data >= 0) {
return colorList[0];
} else {
return colorList[1];
}
}
}
}, {
type: 'bar',
data: [0, 0, 0, 0, 0],
barGap: '-100%',
barCategoryGap: '40%',
label: {
show: true,
position: 'bottom',
formatter: function(param) {
if (param.data < 0) {
return Math.abs(param.data);
} else {
return '';
}
}
},
itemStyle: {
color: function(params) {
var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
if (params.data >= 0) {
return colorList[1];
} else {
return colorList[0];
}
}
}
}]
};
```
在这个示例中,我们通过两个series分别绘制上方和下方的柱子,使用label的formatter函数来控制柱子上方和下方的数据显示。同时,我们设置了itemStyle来控制正数和负数的颜色。
阅读全文