首页echarts柱状图堆叠归一组件示例

echarts柱状图堆叠归一组件示例

时间: 2024-11-02 14:08:52 浏览: 74

ECharts是一个强大的JavaScript图表库，它支持创建各种类型的图表，包括柱状图。柱状图堆叠是指将不同系列的数据在同一X轴上按某种规则堆积起来展示。下面是一个简单的ECharts柱状图堆叠的组件示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> var option = { xAxis: { type: 'category', data: ['类别A', '类别B', '类别C'] }, yAxis: { type: 'value' }, series: [ { name: '数据A', type: 'bar', stack: '总量', data: [120, 200, 150] }, { name: '数据B', type: 'bar', stack: '总量', data: [80, 90, 120] } ] }; var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); </script> </body> </html> ``` 在这个例子中，`stack`属性设置为`总量`，意味着两个系列的数据会被叠加在一起显示，第一个系列的数据会覆盖第二个系列在相同的X轴位置。你可以通过修改`data`数组调整每个系列的具体数值。

阅读全文