e-charts折线图Y轴显示与实际数据范围显示不符

最新推荐文章于 2023-02-04 10:40:05 发布

原创

最新推荐文章于 2023-02-04 10:40:05 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

博客围绕ECharts展开，包含问题描述、原因分析及解决方案，还给出相关代码，展示了删除操作后的效果。

问题描述：

使用e-charts折线图画出多条折线，且Y轴数据与legend提示数据相符合

原因分析：

由于设置`options`中的`series`时添加了`stack`堆叠，所以导致折线图显示的是多条线堆叠的效果，但是`legend`提示的又是实际数据，所以会造成Y轴显示与实际数据范围显示不符效果图如下：

在这里插入图片描述
代码如下

this.myChart1 = this.$echarts.init(
        document.getElementById('oee-line-charts')
      )
      const option1 = {
   
   
        tooltip: {
   
   
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
   
   
            color: '#FFFFFF', // 设置文字颜色
            fontWeight: 400,
            fontFamily: 'Source Han Sans CN',
            fontSize: '12px',
            lineHeight: '18px'
          },
          formatter: function(params) {
   
   
            let str = `示例<br/>`
            params.forEach(item => {
   
   
              str += item.value !== null ? `${
     
     item.value}%<br/>` : `--<br/>`
            })
            return str
          }
        },
        color