echarts实现堆叠柱状图
时间: 2023-06-29 13:09:27 浏览: 132
Echarts实现柱状图效果
4星 · 用户满意度95%
要使用 Echarts 实现堆叠柱状图,需要先引入 Echarts 库。然后按照以下步骤操作:
1. 创建一个 HTML 页面,并在页面中引入 Echarts 库。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>堆叠柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
</body>
</html>
```
2. 创建一个 JavaScript 对象来配置图表。
```javascript
var option = {
title: {
text: '堆叠柱状图'
},
tooltip: {},
legend: {
data:['销量', '库存']
},
xAxis: {
data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
stack: '总量',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '库存',
type: 'bar',
stack: '总量',
data: [15, 18, 23, 3, 5, 10]
}
]
};
```
在这个配置对象中,我们设置了图表的标题、图例、横轴和纵轴,以及两个柱状图系列的数据和堆叠方式。
3. 在 HTML 页面中使用 Echarts 绘制图表。
```javascript
var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
```
这样就可以在页面中渲染出一个堆叠柱状图了。
阅读全文