Question

As illustrated in this question we can adde a linear gradient to an echart like this:

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

Also created a Stackblitz demo here.

在所有这些例子中,我看到了<代码>Linear Gradient.Linear Gradient(0、0、0、1......,我想知道<代码>0、0、1的意思是什么?

Answer 1

整个地段:

if global parameter is false (default): (0, 0) is the top left corner, (1, 1) is the bottom-right corner
if global is true, then the coordinates are in pixels, again (0, 0) is the top left-corner, but the coordinates of the right-bottom corner are (w-1, h-1), where w and h are the width and height of the plot area, in pixels.

<代码>(x0, y0)-(x1, y1)为这些坐标部分的结尾部分:按照本部分的行文(并按所有平行线)的行文,根据<编码><<<>stops>>/code>中的数据改动彩色。根据这一部分的备用路线,肤色相同。

梯度只能从整个地块区的角度来表述,这往往是一种不利因素:例如,要把彩色作为所策划的职能价值的一小部分,但是不可能的。

实例:

LinearGradient(0, 0, 0, 1, ....) means a gradient that changes vertically (from top=0 to bottom=1), while all horizontal lines have the same color. It is equivalent to LinearGradient(1, 0, 1, 1, ....) or LinearGradient(0.43, 0, 0.43, 1, ....) for that matter.
LinearGradient(0, 0, 1, 0, ....) means a gradient that changes horizontally (from left=0 to right=1), while all vertical lines have the same color.
LinearGradient(0, 0, 1, 1, ....) changes along the top-left to bottom-right at an angle that depends on the aspect ratio of the plot area (would be 45⁰ if the width and height were equal).

<代码>colorStops为一系列物体,其编号为color和offset. 编号为0至1,在<代码>(x0, y0)-(x1, y1)上签字的编号,显然,: 0is (x0, y0),offset: 1>means(x1, y1)>>和offset 0.5'是该部分的中间部分。

梯度的颜色是按每连续两条之间的直线干涉计算得出的。

冲抵后(如果第一次冲抵大于0或最后一次小于1)和部分外(如果<代码>(x0, y0)和(或)<代码>(x1, y1)是<代码>内线至<代码>(0,0)-<(1,<>>>>>>>>>>>>>>>,则颜色为恒定点(即为上项或最后部分的颜色)。

在下面的例子中,左图有两条色线,蓝色是上岸,黄色是底层。右边有4个色标线:蓝色在底层,黄色在顶端,在两个红色彩色之间,颜色之间是恒定的,因为相互污染是肯定的。

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>

友情链接