Echarts custom类型画图

来源：5-4 项目初始化

不见幽人独往来

2020-09-29

https://gallery.echartsjs.com/editor.html?c=xpV9hGdnEX&comment=0
https://gallery.echartsjs.com/editor.html?c=xLQEuT7AuQ&comment=0

custom类型绘图，x轴和y轴定位不准。请老师同学们不吝赐教
内容上传到了Gallery，可以点连接参考效果。同样的代码，只是数据不一样，其中一个绘图出现偏差。renderItem代码如下。

renderItem: (params, api) => {
              const xValue = api.value(0);
              const yValue = api.value(1);;
              const start = api.coord([0, 0]);
              const end = api.coord([xValue, yValue]);
              const size = api.size([xValue, yValue]);
              const style = api.style();
              console.log(xValue, yValue, start, end, size);
              return {
                type: 'rect',
                shape: {
                  x: start[0],
                  y: end[1] - 0.5, // 纠正height导致的偏移量
                  width: size[0],
                  height: 2
                },
                style
              };
            },

写回答

1回答

扬_灵

2020-09-30

已采纳

同学你好，因为这里的一个线条都通过renderItem绘制出来的，产生偏差的话，主要分析renderItem中shape.y的值是不是搞错了当改成下面这样： return { type: 'rect', shape: { x: start[0], y: end[0], // 纠正height导致的偏移量 width: size[0], height: 2 }, style };可以看到，并没有出现上述描述的问题，你可以好好查查shape.y的值是不是搞错了

不见幽人独往来

是因为x轴做了scale：true的处理，所以产生偏差了。thank you

2020-10-10

共1条回复

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

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

1520 学习 · 1043 问题

查看课程

相似问题

关于 animateTransform 动画不同类型间只生效一个的问题

回答 1

vue-cli 是4 了，vue-echarts 到6 版本了 echarts 到5了