首页echarts柱状图顶部添加文字

echarts柱状图顶部添加文字

时间: 2024-12-24 16:06:29 浏览: 3

在ECharts中，可以通过在柱状图的每个柱子上添加标签来实现顶部文字的效果。以下是一个简单的示例代码，展示了如何在柱状图的顶部添加文字： ```html <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="UTF-8"> <title>ECharts</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body style="height: 100%; margin: 0"> <div id="main" style="height: 100%"></div> <script type="text/javascript"> var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70], type: 'bar', label: { show: true, position: 'top' } }] }; option && myChart.setOption(option); </script> </body> </html> ``` 在这个示例中，`label` 属性被用来在柱状图的顶部添加文字。`show: true` 表示显示标签，`position: 'top'` 表示标签的位置在柱子的顶部。

阅读全文