echarts 线性渐变方向

渐变使用方式：

1、new echarts.graphic.LinearGradient

2、type: linear

 拿官网的例子举例：

Examples - Apache ECharts

这个图中渐变核心部分：

  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]

 上面例子中用到了new echarts.graphic.LinearGradient，在方向是也是 四个值 ，分别为 x, y, x2, y2

x:为1 从左往右

y:为1 从上往下

x2:为1 从右往左

y2: 为1 从下往上

2、当我们需要使用渐变的时候还要再应用一次 echarts 才能拿到上面的 LinearGradient 类，有时候很不方便，所以一般才有直接用 type 来写

代码：

 showBackground: true,
      itemStyle: {
        color: {
          type: 'linear', // 线性渐变
          x: 0,             // x:  从左向右 1 ——> 0
          y: 0,             // y:  从上向下 1 ——> 0
          x2: 0,            // x2: 从右向左 1 ——> 0
          y2: 1,            // y2: 从下向上 1 ——> 0
          colorStops: [
            { offset: 0, color: '#83bff6' }, // 
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ]
        }
      },
      emphasis: {
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, 
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#2378f7' }, // offset：坐标为0处的颜色
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' } // offset：坐标为1处的颜色
            ]
          }
        }
      },
      data: data
    }
  ]