echarts 单个堆叠柱状图
时间: 2023-08-27 15:14:31 浏览: 53
您好!要创建一个单个堆叠柱状图,可以使用 E 这个 JavaScript 图表来实现。以下是简单的示例:
```html
<! html>
<html>
<head>
<meta charset="utf-8">
<title>单个堆叠柱状图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
// 初始化图表
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 配置图表选项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['系列1', '系列2', '系列3']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4', '类别5']
},
yAxis: {
type: 'value'
},
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>
```
您可以将上述代码保存为一个 HTML 文件并在浏览器中打开,即可看到一个简单的堆叠柱状图,其中有三个系列('系列1'、'系列2'、'系列3'),每个系列有五个类别('类别1'、'类别2'、'类别3'、'类别4'、'类别5')。每个系列的数据通过 `data` 属性指定。通过调整 `option` 对象中的配置项,您可以自定义图表的样式和数据。
希望能对您有所帮助!如果您还有其他问题,请随时提问。