对于LinearGradient，坐标用于整个绘图区域：

• 如果global参数为false（默认）：(0, 0)是左上角，(1, 1)是右下角
• 如果global是true，则坐标以像素为单位，(0, 0)是左上角，但右下角的坐标是(w-1, h-1)，其中w和h是绘图区域的宽度和高度，以像素为单位。

(x0, y0)-(x1, y1)是这些坐标中的线段的端点：沿着该段的线（以及沿着所有平行线），颜色根据X1 M13 N1 X中的数据而改变。沿着垂直于此线段的线，颜色将相同。
梯度只能用整个地块面积来表示，这一事实通常是一个缺点：例如，人们希望填充颜色是所绘制的函数值的一部分，但这是不可能的。
示例：

• LinearGradient(0, 0, 0, 1, ....)表示垂直变化的渐变（从顶部=0到底部=1），而所有水平线具有相同的颜色。它相当于LinearGradient(1, 0, 1, 1, ....)或LinearGradient(0.43, 0, 0.43, 1, ....)。
• LinearGradient(0, 0, 1, 0, ....)表示水平变化的渐变（从左=0到右=1），而所有垂直线具有相同的颜色。
• LinearGradient(0, 0, 1, 1, ....)沿着左上角到右下角的变化取决于绘图区域的纵横比（如果宽度和高度相等，则为450）。

colorStops是具有color和offset属性的对象数组。偏移是从0到1的数字，表示(x0, y0)-（x1，y1）, obviously,偏移上的点：0 is（x 0，y 0）,偏移：1 means（x1，y1）and偏移0.5 ′是段的中间。
梯度的颜色是通过每两个连续colorStops之间的线性插值沿着该段计算的。
在偏移量之外（如果第一个偏移量大于0或最后一个偏移量小于1）和线段之外（如果(x0, y0)和/或(x1, y1)是(0, 0)-(1, 1)内部的点），颜色是恒定的（即第一个偏移量的颜色或最后一个偏移量的颜色）。
在下面的示例中，左侧图表有两个色标，蓝色在左上角，黄色在右下角。右边的图表有四个颜色停止：蓝色在左下角，黄色在右上角，并且在两个红色色标之间-在这两个色标之间，颜色是恒定的，因为插值总是产生红色。

const myChart1 = echarts.init(document.getElementById('chart-container1'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

const myChart2 = echarts.init(document.getElementById('chart-container2'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

const option = {
  xAxis: {
    type: 'value',
    data: [1, 2, 3]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [
      [0, 200],
      [1, 190],
      [2, 200]
    ],
    type: 'line'
  }]
};

myChart1.setOption(option);
myChart2.setOption(option);

myChart1.setOption({
  series: [{
    areaStyle: {
      opacity: 0.9,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          offset: 0,
          color: 'blue',
        },
        {
          offset: 1,
          color: 'yellow',
        },
      ]),
    }
  }]
});

myChart2.setOption({
  series: [{
    areaStyle: {
      opacity: 0.9,
      color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
          offset: 0,
          color: 'blue',
        },
        {
          offset: 0.2,
          color: 'red',
        },
        {
          offset: 0.8,
          color: 'red',
        },
        {
          offset: 1,
          color: 'yellow',
        },
      ]),
    }
  }]
})

个字符
另一种经常使用的技术是为各种偏移间隔设置颜色常数（如上面的红色），并将其更改为零长度的间隔，（用不同的颜色重复相同的偏移）产生均匀的颜色条纹，如：

[{
    offset: 0,
    color: 'blue' // start of blue stripe
 },
 {
   offset: 0.33,
   color: 'blue' // end of blue stripe
 },
 {
   offset: 0.33, // start of red stripe
   color: 'red'
 },
 {
   offset: 0.67, // end of red stripe
   color: 'red'
 }
//.....
]

型

const myChart3 = echarts.init(document.getElementById('chart-container3'), null, {
  renderer: 'canvas',
  useDirtyRect: false
});

const option = {
  xAxis: {
    type: 'value',
    data: [1, 2, 3]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [
      [0, 200],
      [1, 190],
      [2, 200]
    ],
    type: 'line'
  }]
};

myChart3.setOption(option);

myChart3.setOption({
  series: [{
    areaStyle: {
      opacity: 0.9,
      color: new echarts.graphic.LinearGradient(
        0, 0, 1, 0.1, // almost vertical
        [{
            offset: 0,
            color: 'blue', // start of blue stripe
          },
          {
            offset: 0.33,
            color: 'blue', // end of blue stripe
          },
          {
            offset: 0.33,
            color: 'red', // start of red stripe
          },
          {
            offset: 0.67, // end of red stripe
            color: 'red',
          },
          {
            offset: 0.67, // start of green stripe
            color: 'green',
          },
          {
            offset: 1,
            color: 'green', // end of green stripe
          },
        ]),
    }
  }]
});

<div id="chart-container3" style="height:300px; width:45vw;display:inline-block"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

的字符串