echarts柱状图柱子上双数字
时间: 2025-01-01 08:05:13 浏览: 7
在ECharts中,要在柱状图的柱子上显示双数字,可以通过自定义标签来实现。以下是一个示例代码,展示如何在柱状图上显示双数字:
```javascript
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数值',
type: 'bar',
data: [120, 200, 150, 80, 70],
label: {
show: true,
position: 'inside',
formatter: function(params) {
return params.value + '\n' + (params.value * 2);
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在这个示例中,我们使用`label`属性来自定义标签显示。`formatter`函数接收一个参数`params`,其中包含当前数据项的信息。我们可以通过`params.value`获取当前数据值,并返回双数字的字符串。
阅读全文