echarts按月份柱状图中再按季度柱状图,季度柱状图中包含月柱状图
时间: 2024-10-08 14:17:52 浏览: 36
echarts漂亮的柱状图按月统计
在ECharts中创建这种复杂图表,你需要结合使用饼图(用于展示每个季度的占比)和堆积柱状图(用于显示每个季度内每个月的具体数据)。首先,你可以创建一个主轴为月份的堆叠柱状图,然后为每个季度设置一个饼图作为副轴。
1. **步骤**:
- **初始化图表**: 使用`echarts.init()` 创建一个新的图表实例。
- **月份柱状图**: 设置x轴的数据为月份列表,y轴为各个类别的数据,使用`bar`系列表示。
- **季度分类**: 创建一个饼图作为副轴,用`pie`系列,并将月份柱状图的数据按照季度分组。
- **堆叠设置**: 对于柱状图,设置`stack`属性为相同的值,以便它们可以堆叠在一起。
```javascript
option = {
xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] },
yAxis: {},
series: [
{
name: '各季度',
type: 'bar', // 柱状图
stack: '总量', // 堆叠标识
data: [q1Data, q2Data, q3Data, q4Data] // 季度数据
},
{
name: '季度分布',
type: 'pie', // 饼图
radius: ['50%', '70%'], // 设置副轴大小
avoidLabelOverlap: false,
label: {
normal: {
show: false
}
},
seriesIndex: 0, // 联动主轴数据
data: [quarterPieData], // 季度占比数据
tooltip: {} // 配置提示信息
}
]
};
```
其中,`q1Data`, `q2Data`, `q3Data`, 和 `q4Data` 分别代表四个季度各自月份的数据,`quarterPieData` 是季度的百分比数据。
阅读全文