react中使用echarts折线图demo

import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import Background from '../../assets/img/background2.png'
import Background3 from '../../assets/img/background3.png'
import IconLeft14 from '../../assets/img/iconLeft2.png'
import { Modal, NavBar, Picker, Icon, Badge, List, Card, Flex, InputItem, Toast, WingBlank, WhiteSpace } from 'antd-mobile'
import Store from './bbydxqStore'
import './bbydxqStyle.less'
import HeadImg from '../../assets/img/morenhead.jpg'
import Level from '../../assets/img/level3.png'

class Bbydxq extends Component {
  state={
    flush: false,
    bushu: [],
    riqi: [
      // '02.01', '02.02', '02.03', '02.04', '02.05', '02.06', '02.07'
    ]
  }
  async componentDidMount() {
    this.setState({
      flush: true,
      riqi: Store.qtDataList,
      bushu: Store.qtBushuList,
    })
  }
  getOtion() {
    let color = ['transparent']
    for (let i = 0; i < 20; i++) {
      color.push('rgba(255,255,255,0.4)')
    }
    const option = {
      width: '80%',
      xAxis: {

        type: 'category',
        // data: this.state.riqi,
        data: ['00:00', '00:20', '00:40', '01:00', '01:20'],
        show: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            type: 'solid'
          // color:"#f00"
          },
          onZero: true,
        // onZeroAxisIndex:"X"
        },
        axisLabel: {
          color: 'rgba(255,255,255,0.69)',
          fontSize: 12
        },
        axisTick: {
          show: false
        },
        offset: 0,
        boundaryGap: false,

      },
      yAxis: {
        // offset: '-13',
        type: 'value',
        show: true,
        data: ['0.25', '0.50', '0.75', '1.00', '1.25'],
        interval: 0.25,
        // max: function (value) {
        //   return value.max >= 10000 ? value.max : 10000
        // },
        axisLabel: {
          color: 'rgba(255,255,255,0.69)'
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
          // color:"rgba(255,255,255,0.4)",
            color: color,
            type: 'solid'
          },
        },

      },
      series: [{
        data: ['0.1', '0.30', '0.25', '1.00', '1.24'],
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#5B8FF9' // 0% 处的颜色
            }, {
              offset: 1, color: '#ffffff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        lineStyle: {
          color: '#ffffff'
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          color: '#ffffff'
        }
      }]
    }
    return option
  }
  render () {
    var u = window.navigator.userAgent
    const isIPad = u.indexOf('iPad') > -1 || u.indexOf('iPa') > -1 // android终端
    console.log('判断当前机型===', isIPad)
    return (
      <div style={{ width: '100%', background: '#FFFFFF' }}>
        <div style={{ marginTop: '20px', height: '800px', background: '#FAFAFA' }}>
          <div style={{ marginTop: '20px', margin: '0px 9px 0px 9px' }}>
            <div>
              <div style={{ height: '9px' }}></div>
              <ReactEcharts
                option={this.getOtion()}
                style={{ width: '100%', height: '800px' }}
                className='react_for_echarts'
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Bbydxq

仅个人纪录使用，详细功能可再进行探讨。