echarts-for-react项目实例
实例参考
https://github.com/hustcc/echarts-for-react安装依赖
npm install --save echarts-for-reactimport 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
? index}>{item.name + " ,"}
: index}>{item.name + ""}
})
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
? index}>{item.value + " ,"}
: index}>{item.value + ""}
})
return str;
}
}, {
title: '采摘状态',
dataIndex: 'status',
key:'status',
render:(text,record,index)=>{
return {text==1?"已采摘":'未采摘'}
}
}
];
// 农药使用率
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
? index}>{item.name + " ,"}
: index}>{item.name + ""}
})
return str;
}
}, {
title: '农药名称',
dataIndex: 'pid_data',
key:'pid_data',
render: (text, record, index) => {
let str = text.map((item, index) => {
return index < text.length - 1
? index}>{item.name + " ,"}
: index}>{item.name + ""}
})
return str;
}
}, {
title: '使用量或浓度',
dataIndex: 'amount',
key:'amount'
}, {
title: '使用时间',
dataIndex: 'ctime',
key:'ctime'
}, {
title: '备注',
dataIndex: 'remark',
key:'remark',
render:(text,record)=>{
return {text=="undefined"?"":text}
}
}, {
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
? index + ""}>{item.name + " ,"}
: index + ""}>{item.name}
})
return str;
}
}, {
title: '肥料名称',
dataIndex: 'fid_data',
render: (text, record, index) => {
let str = text.map((item, index) => {
return index < text.length - 1
? index + ""}>{item.name + " ,"}
: index + ""}>{item.name}
})
return str;
}
}, {
title: '施肥方式',
dataIndex: 'type_data',
render: (text, record, index) => {
let str = text.map((item, index) => {
return index < text.length - 1
? index + ""}>{item.value + " ,"}
: index + ""}>{item.value}
})
return str;
}
}, {
title: '肥料量/浓度',
dataIndex: 'amount',
render: (text, record, index) => {
return {record.amount + "/" + record.times}
}
}, {
title: '施肥时间',
dataIndex: 'ctime',
render: (text, record, index) => {
return {new Date(parseInt(text) * 1000).toLocaleString().substr(0, 9).replace(/\//g, "-")}
}
}, {
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
? index}>{item.name + " ,"}
: index}>{item.name}
})
return str;
}
}, {
title: '灌溉方式',
dataIndex: 'type_data',
render:(text,record,index)=>{
let str = text.map((item, index) => {
return index < text.length - 1
? index}>{item.value + " ,"}
: index}>{item.value}
})
return str;
}
}, {
title: '灌溉时间',
dataIndex: 'ctime',
render:(text)=>{
return {new Date(parseInt(text)*1000).toLocaleString().substr(0,9).replace(/\//g, "-")}
}
}, {
title: '备注',
dataIndex: 'remark',
render:(text,record)=>{
return {text=="undefined"?"":text}
}
}, {
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
? index + ""}>{item.name + " ,"}
: index + ""}>{item.name}
})
return str;
}
}, {
title: '光照方式',
dataIndex: 'type_data',
render: (text, record, index) => {
let str = text.map((item, index) => {
return index < text.length - 1
? index + ""}>{item.value + " ,"}
: index + ""}>{item.value}
})
return str;
}
}, {
title: '棚内光照度',
dataIndex: 'incode'
}, {
title: '棚外光照度',
dataIndex: 'outcode'
},{
title: '记录时间',
dataIndex: 'ctime',
render:(text,record,index)=>{
return
{new Date(parseInt(text) * 1000).toLocaleString().substr(0, 9).replace(/\//g, "-")}
}
}, {
title: '记录人',
dataIndex: 'creater'
}, {
title: '备注',
dataIndex: 'remark',
render:(text,record)=>{
return {text=="undefined"?"":text}
}
}
];
return (
<div className="search_article_box">
"id" dataSource={this.props.batchModel.Batchinfo} bordered pagination={false} className="marginb25"/>
"marginb25">
{
this.echarts_react = e;
}} option={this.getOtionTem()}/>
div>
"echarts_tit">23°C
"echarts_tit">种植周期棚内平均温度
{
this.echarts_react = e;
}} option={this.getOtionHum()}/>
div>
"echarts_tit">88%
"echarts_tit">种植周期棚内平均湿度
"BatchContent_list">
'农药使用记录'} key="1">
"id" dataSource={this.props.batchModel.NYinfo} pagination={false}/>
"BatchContent_list">
'施肥记录'} key="2">
"id" dataSource={this.props.batchModel.SFinfo} pagination={false}/>
"BatchContent_list">
'灌溉记录'} key="3">
"id" dataSource={this.props.batchModel.GGinfo} pagination={false}/>
"BatchContent_list">
'光照调节记录'} key="4">
"id" dataSource={this.props.batchModel.GZinfo} pagination={false}/>
div>
);
}
}
export default connect(({batchModel}) => ({batchModel}))(ChartAPIComponent);
你可能感兴趣的:(React)