React + Echarts 绘制折线图

设计来源于：www.zcool.com.cn/work/ZNjEyO… 下面的折线图

安装命令

yarn add echarts echarts-for-react 

或者

npm install --save echarts echarts-for-react

初始使用

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import './index.css'

export default class Line extends React.Component {
  getOption = () => {
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    return option
  }

  render() {
    return (
      <div className='wrapper'>
        <ReactEcharts option={this.getOption()} style={{ height: '400px' }} />
      </div>
    )
  }
}

从

变成

仿了个5分吧，原先的设计图中，是底色不变，上面线条变化，但是这个目前我暂时没有找到解决方法，知道的小伙伴，麻烦在评论区告诉我一下。

1. 隐藏 x 轴和 y 轴的刻度线

xAxis: {
  data: ['12', '27', '78', '89', '100', '134', '456'],
    // 隐藏x轴
    axisLine: {
    show: false,
    },
  // 刻度线
  axisTick: {
    show: false
  },
},
yAxis: {
  type: 'value',
    // 去除网格线
    splitLine: false,
      // 刻度线
      axisTick: {
    show: false
  },
  // 隐藏y轴
  axisLine: {
    show: false
  },
  // 隐藏刻度值
  axisLabel: {
    show: false
  },
},

2. 隐藏原点，曲线变平滑

series: [
  {
    smooth: true,
    symbol: "none",
  }
]

3. 改变曲线颜色

itemStyle: {
  normal: {
    lineStyle: {
      color: "#e5566a"
    }
  }
},

4. 添加渐变底色

areaStyle: {
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#e5566a',
      },
      {
        offset: 1,
        color: 'rgba(0, 0, 0, 0.1)',
      },
    ],
    global: false,
  },
},