react中使用echarts-for-react（一）

使用create-react-app 创建react工程

安装echarts的相关依赖

yarn  add  echarts-for-react echarts --save

mock数据接口：
https://www.easy-mock.com/mock/5cb5cfc4d7dd0a5c6904fe0e/ys/queryDepthTimeSequenceByCellId

相关代码：

import React, { Component } from 'react';
import './App.css';
import axios from 'axios'
import ReactEcharts from 'echarts-for-react'
import moment from 'moment'


// 时间-流量关系曲线的数据

class App extends Component {

  state = {
    option: {}
  }

  handleTest = () => {
    axios.get("http://localhost:3001/queryDepthTimeSequenceByCellId").then(
      res => {
        const { data } = res.data
        const startTime = data.StartTime
        const cellSequenceData = data.CellTypesRes['65']
        const depthSeq: any = []
        const timeSeq: any = []
        cellSequenceData.map((item: any) => {
          // 淹没水深保留2位小数
          depthSeq.push(Math.round(item.val * 100) / 100)
          timeSeq.push(moment.unix(startTime + item.ts).format('D日 HH:mm:ss'))
        })
        const option = {
          grid: {
            bottom: 80,
            top: 40,
            left: 140
          },
          tooltip: {
            trigger: 'axis',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              axisLine: { onZero: true },
              axisLabel: {
                align: 'left'
              },
              data: timeSeq
            }
          ],
          yAxis: [
            {
              name: '淹没水深(m)',
              type: 'value',
              scale: 0.1,
            }
          ],
          series: [
            {
              name: '淹没水深',
              type: 'line',
              animation: false,
              areaStyle: {
                color: '#fff'
              },
              lineStyle: {
                width: 1
              },
              markPoint: {
                symbol: 'pin',
                data: [
                  {
                    name: '最大值',
                    type: 'max'
                  },
                  {
                    name: '初始值',
                    valueIndex: 0,
                    type: 'min'
                  }
                ]
              },
              data: depthSeq
            }
          ]
        }
        this.setState({
          'option': option
        })
      }
    ).catch(err => {
      console.log(err)
    })
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleTest}>
          测试
        </button>
        <ReactEcharts
          style={{ height: 350, width: 350 }}
          notMerge={true}
          lazyUpdate={true}
          option={this.state.option} />
      </div>
    );
  }
}

export default App;

效果