echarts使用折线图绘制面积时问题

解决echarts折线图面积图颜色覆盖问题

最新推荐文章于 2024-05-21 10:29:10 发布

原创最新推荐文章于 2024-05-21 10:29:10 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

在使用echarts绘制折线图并显示面积时遇到了两个问题：1. y轴坐标被压住，通过设置属性解决了该问题，让坐标轴位移1px。2. 面积图颜色被覆盖，尝试多种方法无效，最终发现通过遍历数据组装的图表会被覆盖，而直接定义的数据则正常显示。经过努力，成功解决了这一难题。

在这里插入图片描述
通过折线图画出上图时候遇到的bug！！
第一坑：
坐标y 轴被压住

加个属性即可，让他位移1px：

   yAxis: [
            {
              offset: 1,
              type: 'value',
              splitLine: false,
            },
          ],

第二坑：
因为绘制上面面积需要加上这个属性

  areaStyle: {
              normal: { origin: 'start', color: '#B3EAD3', opacity: 1 },
            },

origin 代表从最下方开始渲染，和不透明度。
所以就会出现如下问题
在这里插入图片描述
颜色被覆盖了，对了几遍数据，搞过几种办法都不行~
最后在掉了n多根头发后发现我通过遍历取得数据组装起来赋值就会被盖住，直接定义写死的就没问题！！！

4 条评论