首页使用echarts绘制堆积柱状图

使用echarts绘制堆积柱状图

时间: 2023-10-17 16:04:33 浏览: 76

以下是使用 echarts 绘制堆叠柱状图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 堆叠柱状图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '堆叠柱状图示例' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['A', 'B', 'C'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['1', '2', '3', '4', '5', '6'] }, yAxis: { type: 'value' }, series: [ { name: 'A', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90, 230] }, { name: 'B', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290, 330] }, { name: 'C', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190, 330] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上面的代码中，首先创建了一个 `div` 元素作为图表的容器。然后使用 `echarts.init` 方法初始化一个 echarts 实例，并指定要绑定的元素。接下来是图表的配置项和数据部分。在这里，我们设置了标题、提示框、图例、坐标轴、以及三个堆叠的柱状图系列。最后使用 `myChart.setOption` 方法将配置项和数据传递给 echarts 实例，生成图表。运行代码，即可看到生成的堆叠柱状图。

阅读全文