使用echarts5.0,stack堆叠起始位置不对
来源:5-14 累计用户数组件开发(下)

softbaddog
2021-11-07
老师,我用的是echarts 5.0,发现按照您的方式配置stack,两个bar起始位置不在一起,真正堆叠起来了,查找了echarts文档,描述stack就是指的 “数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。”,是不是在5.0,这个参数用法不对,请问应该如何解决?
去掉stack,bar的起始位置没有问题
2回答
-
lgk20181023
2022-01-21
您好,您可以将自定义类型的 data 值设置为 0,然后在 api.coord() 里传入将 value 的值替换为 data 的值
myChart.setOption({
xAxis: {
type: "value",
show: false,
},
yAxis: {
type: "category",
show: false,
},
series: [
{
type: "bar",
barWidth: 10,
data: [200],
stack: "总量", // 将同系列图标合并
itemStyle: {
color: "#45c946",
},
},
{
type: "bar",
data: [100],
stack: "总量", // 将同系列图标合并
itemStyle: {
color: "#eee",
},
},
{
type: "custom", // 自定义类型
data: [0],
stack: "总量",
renderItem: (params, api) => {
const value = api.value(0);
const endPoint = api.coord([200, 0]);
// console.log("custom=>", params, api, endPoint);
return {
type: "group",
position: endPoint,
children: [
{
// 向下
type: "path",
shape: {
d: "M512 682.666667l298.666667-298.666667H213.333333z",
x: -5,
y: -15,
width: 10,
height: 10,
layout: "cover",
},
style: {
fill: "#45c946",
},
},
{
// 向上
type: "path",
shape: {
d: "M512 341.333333l-298.666667 298.666667h597.333334z",
x: -5,
y: 5,
width: 10,
height: 10,
layout: "cover",
},
style: {
fill: "#45c946",
},
},
],
};
},
},
],
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
});
10 -
扬_灵
2021-11-08
同学你好,echarts5.0版本中stack也是可以实现上述效果的,你可以参考一下这个案例https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack&version=5.0.0
012021-11-23
相似问题