echarts 两折线中间增加颜色

在Echarts中，如果需要在两条折线中间添加颜色背景，可以通过使用折线图的渐变区域功能来实现。以下是简单的示例代码：

// 创建一个Echarts实例
var myChart = echarts.init(document.getElementById('chart'));

// 定义图表的配置项
var option = {
  // 设置图表的背景颜色
  backgroundColor: '#fff',
  // 设置图表的绘制区域
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // 设置图表的x轴
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  // 设置图表的y轴
  yAxis: {
    type: 'value'
  },
  // 设置图表的系列，即折线的样式
  series: [
    {
      name: 'Line 1',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Line 2',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    // 添加渐变区域的系列
    {
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210], // 需要和Line 1的数据一样
      lineStyle: {
        opacity: 0 // 将渐变区域的折线设为透明，只需要显示背景颜色即可
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, color: 'rgba(0, 0, 0, 0)' // 渐变的起始颜色，这里使用透明色
            },
            {
              offset: 0.5, color: 'rgba(0, 0, 0, 0.3)' // 中间颜色
            },
            {
              offset: 1, color: 'rgba(0, 0, 0, 0)' // 渐变的结束颜色，这里使用透明色
            }
          ]
        }
      }
    }
  ]
};

// 将配置项设置给图表实例
myChart.setOption(option);

在上述代码中，我们主要是通过添加一个系列并设置其属性为渐变区域，然后在渐变区域的系列中设置areaStyle的color属性，指定需要渐变的起始颜色、中间颜色和结束颜色。其中，colorStops属性是一个数组，可以设置多个渐变的颜色值。