vue echarts一条折线，不同范围展示不同的颜色，图例该怎么设置，举个例子

可以使用 echarts 的 visualMap 组件来实现这个需求，具体步骤如下：

1. 在 echarts 的 option 对象中，添加 visualMap 组件，设置 min 和 max 属性为折线的最小值和最大值，设置 color 属性为不同范围所对应的颜色。

option = {
  // ...
  visualMap: {
    min: 0,
    max: 100,
    color: ['#d94e5d','#eac736','#50a3ba'],
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: 20
  },
  // ...
}

2. 在折线的 series 对象中，添加 visualMap 属性，设置 type 属性为 'continuous'，设置 visualMapIndex 属性为 visualMap 组件的索引值，表示该系列数据所使用的 visualMap 组件。

option = {
  // ...
  series: [{
    type: 'line',
    data: [20, 40, 60, 80, 100, 50, 30],
    visualMap: {
      type: 'continuous',
      show: false,
      dimension: 0,
      seriesIndex: 0,
      min: 0,
      max: 100,
      inRange: {
        color: ['#d94e5d','#eac736','#50a3ba']
      }
    }
  }]
  // ...
}

3. 在 legend 对象中，添加 data 属性，设置图例项的名称。

option = {
  // ...
  legend: {
    data: ['折线图']
  },
  // ...
}

完整代码示例：

option = {
  title: {
    text: '折线图'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  visualMap: {
    min: 0,
    max: 100,
    color: ['#d94e5d','#eac736','#50a3ba'],
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: 20
  },
  series: [{
    name: '折线图',
    type: 'line',
    data: [20, 40, 60, 80, 100, 50, 30],
    visualMap: {
      type: 'continuous',
      show: false,
      dimension: 0,
      seriesIndex: 0,
      min: 0,
      max: 100,
      inRange: {
        color: ['#d94e5d','#eac736','#50a3ba']
      }
    }
  }],
  legend: {
    data: ['折线图']
  }
};