echarts堆叠柱状图中显示三组数据,其中有一组数据是基于前两组数据计算的百分比,如何展示?
时间: 2023-11-28 10:48:02 浏览: 79
可以在堆叠柱状图上使用折线图来展示百分比数据。具体步骤如下:
1. 准备数据:假设有三组数据 A、B、C,其中 C 是 A/B 的百分比,可以先计算出 C 的值,再将 A、B、C 三组数据分别放到一个数组中。
2. 配置堆叠柱状图:使用 echarts 提供的堆叠柱状图配置项,设置 x 轴、y 轴、图例等参数,将 A、B、C 三组数据分别对应到不同的系列中,并设置堆叠方式为 "stack",使得三组数据能够堆叠在一起展示。
3. 添加折线图:使用 echarts 提供的折线图配置项,将 C 数据对应的系列添加到堆叠柱状图上,设置折线图的样式、标记点、标签等参数。
4. 完成展示:将堆叠柱状图和折线图的配置项合并,调用 echarts 实例的 setOption 方法即可完成展示。
以下是示例代码:
```javascript
// 准备数据
var dataA = [120, 132, 101, 134, 90, 230, 210];
var dataB = [220, 182, 191, 234, 290, 330, 310];
var dataC = [];
for (var i = 0; i < dataA.length; i++) {
dataC.push((dataA[i] / dataB[i] * 100).toFixed(2));
}
// 配置堆叠柱状图
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'A',
type: 'bar',
stack: 'stack',
data: dataA
},
{
name: 'B',
type: 'bar',
stack: 'stack',
data: dataB
}
]
};
// 添加折线图
option.series.push({
name: 'C',
type: 'line',
data: dataC,
label: {
show: true,
position: 'top',
formatter: '{c}%'
},
itemStyle: {
color: '#FFC107'
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
}
});
// 完成展示
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);
```
阅读全文