vue echarts折线图上根据后端传的值的大小判断显示不同的背景颜色

可以通过在echarts的option里面设置visualMap来实现根据后端传的值的大小判断显示不同的背景颜色。

首先需要在option中添加visualMap组件，并设置相关属性，例如：

option = {
  ...
  visualMap: {
    show: false,
    min: 0,
    max: 100,
    inRange: {
      color: ['#d94e5d','#eac736','#50a3ba']
    }
  },
  ...
}

其中，min和max表示数据范围，inRange中的color表示颜色的渐变范围。

然后，在series中设置相应的属性，例如：

option = {
  ...
  series: [{
    type: 'line',
    data: [10, 20, 30, 40, 50, 60, 70, 80, 90],
    itemStyle: {
      normal: {
        color: function(params) {
          var colorList = ['#d94e5d','#eac736','#50a3ba'];
          var index = 0;
          if (params.data >= 0 && params.data < 30) {
            index = 0;
          } else if (params.data >= 30 && params.data < 70) {
            index = 1;
          } else {
            index = 2;
          }
          return colorList[index];
        }
      }
    }
  }]
  ...
}

其中，itemStyle中的color属性设置为一个函数，该函数根据数据的大小返回不同的颜色值。

这样就可以根据后端传的值的大小判断显示不同的背景颜色了。