ECharts 创建柱状图并在左侧显示带有数字和 变为加号的刻度线
时间: 2024-03-24 15:37:35 浏览: 79
echarts 横着显示的柱状图
你可以使用 ECharts 的 yAxis 配置项来实现在左侧显示带有数字和变为加号的刻度线。具体的实现步骤如下:
1. 在 ECharts 的 option 中,设置 yAxis 的 type 为 'value',表示该轴为数值轴。
2. 在 yAxis 的 axisLabel 中,设置 formatter 属性为一个函数,用于自定义刻度标签的显示内容。
3. 在 formatter 函数中,根据当前的刻度值,判断是否需要显示加号,并返回相应的显示内容。
下面是一个示例代码,用于创建一个带有这种刻度线的柱状图:
```
option = {
yAxis: {
type: 'value',
axisLabel: {
formatter: function(value, index) {
if (value >= 1000) {
return (value / 1000) + 'k+';
} else {
return value;
}
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
```
在这个示例中,如果某个刻度值大于等于 1000,就会在后面添加一个加号。比如,如果刻度值为 1500,就会显示为 '1.5k+'。如果刻度值小于 1000,则直接显示该值。
阅读全文