解决Echarts报错Failed to execute ‘createLinearGradient‘ on ‘CanvasRenderingContext

前言

之前解决了一大难题vue+antdv 用多选框自定义ecahrts折线的显示和隐藏正开心的时候就又遇到了报错，郁闷

原因

看了一下网上的文章，原因大概有这几类：

echart折线图使用了渐变色
折线图传入的数据存在null的情况
折现图设置了dataZoom(可滑动)

解决方法

看到解决方法大多数是说报错是因为传入参数不是有限的实数，要把null改为0，但因为null和0是不同的概念，null应该是不显示折线，0是应该显示折线但数值为0，所以这个方法不可取。

结合项目，我的折线图不需要dataZoom,所以是因为前两点原因报的错。我发现如果是传入的数据都是null的话就会报错。所以可以判断传入数据是否都为null，是的话就不用渐变色，不然就有渐变色。

这样就可以完美解决报错了。

It's time to show code

// 判断数据是不是全是null，是的话就不渐变
  const inNull =
    this.lineData.inbound
      .filter(item => {
        return item == null;
      })
      .toString() == this.lineData.inbound.toString();

渐变色

let inboundColor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(145, 208, 64, 0.5)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(255,255,255,0.1)', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      };

series

series: [
  {
    name: 'IN平均值',
    data: this.lineData.inbound,
    type: 'line',
    smooth: true,
    areaStyle: {
      color: inNull ? 'rgba(145, 208, 64, 0.26)' : inboundColor,
    },
  },
]

最简单的解决方法

今天再看了一下echarts的配置项，发现了这样一个配置项

只要配置项一加，什么问题都解决了

 {
    name: 'IN最大值',
    data: this.lineData.inboundMax,
    type: 'line',
    smooth: true,
    showSymbol: false,
    connectNulls: true,  
    areaStyle: {
      color: inboundMaxColor,
    },
 },