echarts 单个堆叠柱状图 实现数值堆叠相加
时间: 2023-08-27 13:14:31 浏览: 56
要实现数值堆叠相加的效果,您可以通过在数据中进行累加的方式来实现。以下是一个示例代码:
```html
<!DOCTYPE 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 data = [
{ name: '柱1', series: [10, 20, 30] },
{ name: '柱2', series: [15, 25, 35] },
{ name: '柱3', series: [30, 40, 50] }
];
// 对数据进行累加
var cumulativeData = [];
for (var i = 0; i < data.length; i++) {
var sum = 0;
for (var j = 0; j < data[i].series.length; j++) {
sum += data[i].series[j];
}
cumulativeData.push(sum);
}
// 配置图表选项
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.map(item => item.name)
},
yAxis: {
type: 'value'
},
series: [{
name: '堆叠',
type: 'bar',
stack: 'total',
data: cumulativeData
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
在上述代码中,我们首先定义了示例数据 `data`,然后对每个柱的数值进行累加得到 `cumulativeData`。接下来,在图表的配置项中,我们使用了堆叠柱状图的方式,并将累加的数据传入 `data` 属性中。最后,使用配置项显示图表。
这样,您就可以在堆叠柱状图中实现数值的堆叠相加效果了。希望对您有所帮助!如有更多问题,请随时提问。