echarts-for-react项目实例

来源：互联网发布：数据库性能测试工具编辑：程序博客网时间：2024/05/18 18:45

实例参考

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)'                }              ])            }          },          data: this.props.batchModel.WSinfo            ? this.props.batchModel.WSinfo.map((item, index) => {              let datas = item.temper;              return datas            })            : []        }      ]    }    return option;  }  getOtionHum() {    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(75,166,78)',            shadowOffsetX: 2,            shadowOffsetY: 2          }        }      ],      series: [        {          name: '棚内湿度',          type: 'line',          smooth: true,          symbol: 'none',          sampling: 'average',          itemStyle: {            normal: {              color: 'rgb(75,166,78)'            }          },          areaStyle: {            normal: {              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [                {                  offset: 0,                  color: 'rgb(75,166,78)'                }, {                  offset: 1,                  color: 'rgb(75,166,78)'                }              ])            }          },          data:this.props.batchModel.WSinfo?this.props.batchModel.WSinfo.map((item,index)=>{            let datas = item.humid;            return datas          }):[]        }      ]    }    return option;  }  render() {    // 批次详情表格数据    const columns = [      {        title: '批次号',        dataIndex: 'sn',        key:'sn'      }, {        title: '种植大棚',        dataIndex: 'pid_data',        key:'pid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.name + " ,"}</span>              : <span key={index}>{item.name + ""}</span>          })          return str;        }      }, {        title: '种植日期',        dataIndex: 'ctime',        key:'ctime'      }, {        title: '采摘日期',        dataIndex: 'ptime',        key:'ptime'      }, {        title: '成活率',        dataIndex: 'survival',        key:'survival'      }, {        title: '品类',        dataIndex: 'variety_data',        key:'variety_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.value + " ,"}</span>              : <span key={index}>{item.value + ""}</span>          })          return str;        }      }, {        title: '采摘状态',        dataIndex: 'status',        key:'status',        render:(text,record,index)=>{          return <span>{text==1?"已采摘":'未采摘'}</span>        }      }    ];    // 农药使用率    const columns_NY = [      {        title: '棚号',        dataIndex: 'bid_data',        key:'bid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.name + " ,"}</span>              : <span key={index}>{item.name + ""}</span>          })          return str;        }      }, {        title: '农药名称',        dataIndex: 'pid_data',        key:'pid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.name + " ,"}</span>              : <span key={index}>{item.name + ""}</span>          })          return str;        }      }, {        title: '使用量或浓度',        dataIndex: 'amount',        key:'amount'      }, {        title: '使用时间',        dataIndex: 'ctime',        key:'ctime'      }, {        title: '备注',        dataIndex: 'remark',        key:'remark',        render:(text,record)=>{          return <span>{text=="undefined"?"":text}</span>        }      }, {        title: '记录人',        dataIndex: 'creater',        key:'creater'      }    ];    // 施肥记录    const columns_SF = [      {        title: '大棚',        dataIndex: 'bid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index + ""}>{item.name + " ,"}</span>              : <span key={index + ""}>{item.name}</span>          })          return str;        }      }, {        title: '肥料名称',        dataIndex: 'fid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index + ""}>{item.name + " ,"}</span>              : <span key={index + ""}>{item.name}</span>          })          return str;        }      }, {        title: '施肥方式',        dataIndex: 'type_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index + ""}>{item.value + " ,"}</span>              : <span key={index + ""}>{item.value}</span>          })          return str;        }      }, {        title: '肥料量/浓度',        dataIndex: 'amount',        render: (text, record, index) => {          return <span>{record.amount + "/" + record.times}</span>        }      }, {        title: '施肥时间',        dataIndex: 'ctime',        render: (text, record, index) => {          return <span>{new Date(parseInt(text) * 1000).toLocaleString().substr(0, 9).replace(/\//g, "-")}</span>        }      }, {        title: '记录人',        dataIndex: 'creater'      }    ];    const columns_GG = [      {        title: '棚号',        dataIndex: 'bid_data',        render:(text,record,index)=>{          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.name + " ,"}</span>              : <span key={index}>{item.name}</span>          })          return str;        }      }, {        title: '灌溉方式',        dataIndex: 'type_data',        render:(text,record,index)=>{          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index}>{item.value + " ,"}</span>              : <span key={index}>{item.value}</span>          })          return str;        }      }, {        title: '灌溉时间',        dataIndex: 'ctime',        render:(text)=>{          return <span>{new Date(parseInt(text)*1000).toLocaleString().substr(0,9).replace(/\//g, "-")}</span>        }      }, {        title: '备注',        dataIndex: 'remark',        render:(text,record)=>{          return <span>{text=="undefined"?"":text}</span>        }      }, {        title: '记录人',        dataIndex: 'creater'      }    ];    const columns_GZ = [      {        title: '棚号',        dataIndex: 'bid_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index + ""}>{item.name + " ,"}</span>              : <span key={index + ""}>{item.name}</span>          })          return str;        }      }, {        title: '光照方式',        dataIndex: 'type_data',        render: (text, record, index) => {          let str = text.map((item, index) => {            return index < text.length - 1              ? <span key={index + ""}>{item.value + " ,"}</span>              : <span key={index + ""}>{item.value}</span>          })          return str;        }      }, {        title: '棚内光照度',        dataIndex: 'incode'      }, {        title: '棚外光照度',        dataIndex: 'outcode'      },{        title: '记录时间',        dataIndex: 'ctime',        render:(text,record,index)=>{          return <span>            {new Date(parseInt(text) * 1000).toLocaleString().substr(0, 9).replace(/\//g, "-")}          </span>        }      }, {        title: '记录人',        dataIndex: 'creater'      }, {        title: '备注',        dataIndex: 'remark',        render:(text,record)=>{          return <span>{text=="undefined"?"":text}</span>        }      }    ];    return (      <div className="search_article_box">        <Table columns={columns} rowKey="id" dataSource={this.props.batchModel.Batchinfo} bordered pagination={false} className="marginb25"/>        <Row className="marginb25">          <Col span={12}>            <div id="echarts_temperature" className="echarts_box">              <ReactEcharts ref={(e) => {                this.echarts_react = e;              }} option={this.getOtionTem()}/>            </div>            <p className="echarts_tit">23°C</p>            <p className="echarts_tit">种植周期棚内平均温度</p>          </Col>          <Col span={12}>            <div id="echarts_humidity" className="echarts_box">              <ReactEcharts ref={(e) => {                this.echarts_react = e;              }} option={this.getOtionHum()}/>            </div>            <p className="echarts_tit">88%</p>            <p className="echarts_tit">种植周期棚内平均湿度</p>          </Col>        </Row>        <Collapse accordion className="BatchContent_list">          <Panel header={'农药使用记录'} key="1">            <Table columns={columns_NY} rowKey="id" dataSource={this.props.batchModel.NYinfo} pagination={false}/>          </Panel>        </Collapse>        <Collapse accordion className="BatchContent_list">          <Panel header={'施肥记录'} key="2">            <Table columns={columns_SF} rowKey="id" dataSource={this.props.batchModel.SFinfo} pagination={false}/>          </Panel>        </Collapse>        <Collapse accordion className="BatchContent_list">          <Panel header={'灌溉记录'} key="3">            <Table columns={columns_GG} rowKey="id" dataSource={this.props.batchModel.GGinfo} pagination={false}/>          </Panel>        </Collapse>        <Collapse accordion className="BatchContent_list">          <Panel header={'光照调节记录'} key="4">            <Table columns={columns_GZ} rowKey="id" dataSource={this.props.batchModel.GZinfo} pagination={false}/>          </Panel>        </Collapse>      </div>    );  }}export default connect(({batchModel}) => ({batchModel}))(ChartAPIComponent);

阅读全文

0 0