echarts甘特图双柱
时间: 2023-11-12 08:00:32 浏览: 99
利用Echarts写的柱状图
5星 · 资源好评率100%
您好,关于echarts甘特图双柱的问题,我需要先了解一下您的具体需求和数据情况。不过一般来说,甘特图是用来展示任务进度和时间安排的,而双柱图则是用来比较两个数据集的大小或趋势的。如果您需要将这两种图表结合起来,可以考虑使用echarts的组合图表功能。
具体实现方法如下:
1. 首先需要准备好甘特图和双柱图所需的数据,分别存储在不同的数组中。
2. 在echarts中创建一个组合图表,可以使用grid、xAxis、yAxis等组件来设置图表的基本属性。
3. 在series中分别添加甘特图和双柱图的配置项,设置好各自的数据和样式。
4. 最后调用echarts的setOption方法将配置项应用到图表中即可。
以下是一个简单的示例代码:
```javascript
option = {
grid: {
top: '10%',
left: '3%',
right: '3%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
data: ['任务1', '任务2', '任务3']
},
series: [
{
type: 'bar',
name: '柱状图1',
data: [120, 200, 150]
},
{
type: 'bar',
name: '柱状图2',
data: [80, 150, 100]
},
{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(1);
var start = api.coord([api.value(2), categoryIndex]);
var end = api.coord([api.value(3), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
encode: {
x: [2, 3],
y: 1
},
data: [
[new Date('2021/01/01'), 0, new Date('2021/01/05'), new Date('2021/01/10')],
[new Date('2021/01/02'), 1, new Date('2021/01/06'), new Date('2021/01/12')],
[new Date('2021/01/03'), 2, new Date('2021/01/08'), new Date('2021/01/15')]
]
}
]
};
```
阅读全文