ECharts LinearGradient API工作原理及参数含义解析

ECharts 中 LinearGradient 的四个参数 (x0, y0, x1, y1) 用于定义线性渐变的起点和终点相对位置，所有参数取值范围为 0 到 1，是相对于渐变所在容器的比例坐标（而非像素值）。

具体参数含义：

• x0：渐变起点的水平相对位置，0 对应容器左边缘，1 对应容器右边缘
• y0：渐变起点的垂直相对位置，0 对应容器上边缘，1 对应容器下边缘
• x1：渐变终点的水平相对位置
• y1：渐变终点的垂直相对位置

常见参数组合示例 #

• LinearGradient(0, 0, 0, 1)：垂直方向渐变（从上到下），也就是你示例中用到的配置，对应颜色从顶部的 rgb(255, 158, 68) 过渡到底部的 rgb(255, 70, 131)
• LinearGradient(0, 0, 1, 0)：水平方向渐变（从左到右）
• LinearGradient(0, 0, 1, 1)：对角线渐变（从左上到右下）
• LinearGradient(1, 0, 0, 1)：对角线渐变（从右上到左下）

你的示例代码中，通过这四个参数定义了垂直渐变的方向，再配合 offset 和 color 数组，实现了区域填充的渐变效果：

areaStyle: {
  color: new graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: 'rgb(255, 158, 68)'
    },
    {
      offset: 1,
      color: 'rgb(255, 70, 131)'
    }
  ])
}

内容的提问来源于stack exchange，提问作者Ole