簇状柱形图ECharts示例
时间: 2024-12-04 12:11:57 浏览: 12
簇状柱形图(Clustered Bar Chart)在ECharts库中用于展示分类数据的对比,它将每个分类的数据拆分成一组组小柱子,每组包含若干个子柱子,通常用于显示类别间的层次结构。下面是一个简单的ECharts簇状柱形图的HTML和JavaScript示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts 示例 - 簇状柱形图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var option = {
title: {
text: '簇状柱状图示例'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销售情况',
type: 'bar',
stack: '总量', // 设置堆叠方式
data: [5, 20, 36, 10, 10]
},
{
name: '预算分配',
type: 'bar',
stack: '总量', // 同样设置为堆叠
data: [3, 14, 9, 6, 17]
}
]
};
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,X轴表示类别,Y轴表示数值,两个系列分别代表“销售情况”和“预算分配”。通过`stack`属性,我们让两个系列的柱子在同一组内叠加。
阅读全文