echart 柱状图 柱子上显示value

ECharts是一个强大的JavaScript数据可视化库，用于创建交互式图表。柱状图是一种常见的数据展示方式，它通过垂直或水平的柱形高度来表示数值大小。要在ECharts的柱状图中显示每个柱子的具体值（value），你可以按照以下步骤设置：

1. 首先，引入ECharts库并在HTML页面中创建一个echarts实例：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<canvas id="main" width="600" height="400"></canvas>

2. 然后，在JavaScript中初始化并配置柱状图：

var myChart = echarts.init(document.getElementById('main'));

// 数据配置
var data = {
    categories: ['A', 'B', 'C'], // 类别名称
    values: [120, 150, 180] // 每个类别的值
};

// 设置柱状图配置
var option = {
    series: [
        {
            name: 'Value',
            type: 'bar', // 图表类型：柱状图
            data: data.values,
            xAxis: { data: data.categories }, // 显示类别名称作为X轴标签
            yAxis: {} // Y轴通常默认不需要额外配置，因为柱状图会自动处理
        },
        {
            name: 'Values Text',
            type: 'text', // 添加一个文本系列来显示值
            data: data.values.map((v, i) => ({ value: v, text: `${data.categories[i]}: ${v}` })),
            position: 'top', // 文本放在柱子上方
            formatter: '{b}: {c}', // 格式化文本，{b}是类别名，{c}是值
        }
    ]
};

myChart.setOption(option);

3. 最后，渲染图表：

myChart.show();