React之Echarts实现渐变和缩放

一、渐变

我这里是以折线图为例子
渐变还是很简单的
在series中，指定areaStyle中使用渐变函数就可以了

（1）封装渐变函数

以下是我封装的渐变函数

import echarts from 'echarts';
const getLinearColor = (color1: string, color2: string): any => {
    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: color1,
      },
      {
        offset: 1,
        color: color2,
      },
    ]);
  };

（2）代码中直接调用渐变函数

代码中就可以直接调用

areaStyle: {
  opacity: 0.7,
  color: getLinearColor(colorMap['balck','white'),
},

或者直接在代码中使用该函数

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

二、横坐标缩放

（1）如何设置

与Y坐标即yAxis:平级，设置datazoom数组：

datazoom:[
  {
	type: 'inside',
	start: 0, // 开始位置的百分比，0 - 100
	end: 10 // 结束位置的百分比，0 - 100，为100时是整个横坐标
    startValue: number,// 开始位置的数值
    endValue: number// 结束位置的数值
  }
]

这时候就会显示如下结果：

（2）设置带样式的缩放条

上面的缩放条太单一了，可以试试下面带样式的，显示结果如下

有两个圆形的button，同时也可以修改进度条的默认颜色，代码如下：

dataZoom: [
  {
     type: 'inside',
     startValue: head(date),
     endValue: last(date),
     start: 0,
     end: 100,
   },
   {
     handleIcon:
       'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
     handleSize: '80%',
     handleStyle: {
       color: '#fef8f0', //button的背景颜色
       shadowBlur: 3, //阴影一类
       shadowColor: 'rgba(0, 0, 0, 0.6)',
       shadowOffsetX: 2,
       shadowOffsetY: 2,
     },
   },
 ],

（3）设置缩放条和横坐标的距离

通过grid参数bottom进行设置

 grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',//设置缩放条和横坐标的距离，可以是px单位
      containLabel: true,
    },