ECharts LinearGradient 的 API 是如何工作的？

Question

如这个问题所示我们可以像这样向echart添加线性渐变：

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

还在这里创建了一个 Stackblitz 演示。

在所有示例中，我看到

LinearGradient

实例以

LinearGradient(0, 0, 0, 1

开头...我想知道参数

0, 0, 0, 1

的含义/作用是什么？

Answer 1

对于

LinearGradient

坐标是整个绘图区域：

• 如果

  global

  参数为

  false

  （默认）：

  (0, 0)

  为左上角，

  (1, 1)

  为右下角
• 如果

  global

  是

  true

  ，则坐标以像素为单位，再次

  (0, 0)

  是左上角，但右下角的坐标是

  (w-1, h-1)

  ，其中

  w

  和

  h

  是绘图区域的宽度和高度，以像素为单位。

(x0, y0)

-

(x1, y1)

是这些坐标中线段的末端：沿着该线段的线（以及沿着所有平行线），颜色根据

stops

中的数据而变化。沿着垂直于该线段的线，颜色将是相同的。

梯度只能用整个绘图区域来表示这一事实通常是一个缺点：例如，人们希望填充颜色是所绘制函数值的一小部分，但这是不可能的。

示例：

• LinearGradient(0, 0, 0, 1, ....)

  表示垂直变化的渐变（从top=0到bottom=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, ....)

  沿左上角到右下角变化，角度取决于绘图区域的纵横比（如果宽度和高度相等，则为 45⁰）。

colorStops

是具有

color

和

offset

属性的对象数组。偏移量是从 0 到 1 的数字，表示

(x0, y0)

-(x1, y1)

, obviously, 

上的点偏移量：0

is

(x0, y0)

, 

偏移量：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',
        },
      ]),
    }
  }]
})

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

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

[{
    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>