echarts custom双数据上下堆叠
时间: 2023-07-30 16:06:16 浏览: 84
您好,关于echarts中的双数据上下堆叠,可以使用`custom`系列来实现。下面是一个简单的示例:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {
type: 'value'
},
series: [{
type: 'custom',
renderItem: function(params, api) {
var xValue = api.value(0);
var high = api.value(1);
var low = api.value(2);
var yStart = api.coord([xValue, low]);
var yEnd = api.coord([xValue, high]);
var halfWidth = api.size([1, 0])[0] * 0.2;
return {
type: 'rect',
shape: {
x: api.coord([xValue - halfWidth, high])[0],
y: yStart[1],
width: halfWidth * 2,
height: yEnd[1] - yStart[1]
},
style: api.style({
fill: '#c23531'
})
};
},
data: [
['A', 10, 20],
['B', 30, 40],
['C', 50, 60],
['D', 70, 80],
['E', 90, 100],
['F', 110, 120]
]
}]
};
```
上面的代码中,我们使用了`custom`系列,并在`renderItem`函数中自定义了矩形的绘制方式,实现了双数据上下堆叠的效果。其中,数组中的每个元素表示一个数据项,第一个元素表示x轴坐标,第二个元素表示下面的数据,第三个元素表示上面的数据。
希望这个例子能帮助到您!
阅读全文