使用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,

},

});



1
0

扬_灵

2021-11-08

同学你好,echarts5.0版本中stack也是可以实现上述效果的,你可以参考一下这个案例https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack&version=5.0.0 

0
1
softbaddog
只能填充差值来达到效果
2021-11-23
共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端,掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程