首页echarts绘制堆积柱状图

echarts绘制堆积柱状图

时间: 2023-10-17 22:35:14 浏览: 161

可以使用 ECharts 来绘制堆叠柱状图。首先，你需要引入 ECharts 库，并创建一个容器来展示图表。接下来，配置图表的数据和样式，最后将配置好的图表渲染到容器中即可。以下是一个简单的示例代码，演示如何使用 ECharts 绘制堆叠柱状图： ```html <!DOCTYPE html> <html> <head> <title>堆叠柱状图</title> <script src="https://cdn.staticfile.org/echarts/5.0.2/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: { }, legend: { data: ['类别1', '类别2', '类别3'] }, xAxis: { data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, yAxis: { }, series: [ { name: '类别1', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90] }, { name: '类别2', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290] }, { name: '类别3', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190] } ] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，`option` 对象定义了图表的各种配置项，包括标题、提示框、图例、X 轴、Y 轴和系列数据。具体可以根据你的需求进行修改。注意：在使用上述代码时，需要确保网络环境可以访问到 ECharts 库文件。你可以将 `https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js` 替换为你自己的 ECharts 库文件路径。希望以上内容对你有所帮助！如有需要，请随时提问。

阅读全文