首页echarts 柱状图 label 加上单位

echarts 柱状图 label 加上单位

时间: 2024-04-23 08:19:43 浏览: 267

在ECharts中，可以通过设置柱状图的label属性来添加单位。具体步骤如下： 1. 首先，需要引入ECharts的库文件，可以通过CDN或者本地引入。 2. 创建一个div容器，用于显示柱状图。 3. 在JavaScript代码中，创建一个ECharts实例，并指定容。 4. 定义柱状图的数据和配置项。 5. 在配置项中，通过设置label属性来添加单位。可以使用formatter属性来自定义标签的显示格式。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 创建ECharts实例 var myChart = echarts.init(document.getElementById('chart')); // 定义柱状图的数据和配置项 var option = { xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 单位' // 设置y轴标签的显示格式，添加单位 } }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50], label: { show: true, position: 'top', formatter: '{c} 单位' // 设置标签的显示格式，添加单位 } }] }; // 使用配置项显示柱状图 myChart.setOption(option); </script> </body> </html> ``` 在上述示例中，通过设置yAxis的axisLabel的formatter属性来添加y轴标签的单位，通过设置series中label的formatter属性来添加柱状图标签的单位。你可以根据实际需求进行修改和扩展。

阅读全文