echarts-for-react项目实例

实例参考

https://github.com/hustcc/echarts-for-react

安装依赖

npm install --save echarts-for-react

import React from 'react';
import {connect} from 'dva'
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import '../index/IndexPage.css';
import { Table, Row, Col ,Collapse} from 'antd';
const Panel = Collapse.Panel;

class ChartAPIComponent extends React.Component {
   
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    //通过ID获取批次信息
    this.props.dispatch({type:'batchModel/getinfo',payload:this.props.location.query.id});
    //获取对应批次的农药记录
    this.props.dispatch({type:'batchModel/getNYinfo',payload:this.props.location.query.id});
    //获取对应批次的施肥记录
    this.props.dispatch({type:'batchModel/getSFinfo',payload:this.props.location.query.id});
    //获取对应批次的灌溉记录
    this.props.dispatch({type:'batchModel/getGGinfo',payload:this.props.location.query.id});
    //获取对应批次的灌溉记录
    this.props.dispatch({type:'batchModel/getGZinfo',payload:this.props.location.query.id});
    this.props.dispatch({type:'batchModel/getWSinfo',payload:this.props.location.query.id});
  }
  getOtionTem() {
    const option = {
      tooltip: {
        trigger: 'axis',
        position: function(pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: '棚内种植温度记录'
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.props.batchModel.WSinfo
          ? this.props.batchModel.WSinfo.map((item, index) => {
            let shijian = new Date(parseInt(item.ctime) * 1000).toLocaleString().substr(0, 9).replace(/\//g, "-");
            return shijian
          })
          : []
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        }, {
          start: 0,
          end: 10,
          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: '100%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgb(254,176,131)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }
      ],
      series: [
        {
          name: '棚内温度',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            normal: {
              color: 'rgb(255, 70, 131)'
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                }, {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])