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

1. 使用create-react-app 創建react工程
2. 安裝echarts的相關依賴

   yarn  add  echarts-for-react echarts --save
   

3. mock數據接口：
   https://www.easy-mock.com/mock/5cb5cfc4d7dd0a5c6904fe0e/ys/queryDepthTimeSequenceByCellId
4. 相關代碼：

   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;
   
   

5. 效果