import React from 'react';
import http from 'misc/http';
import Constant from 'misc/constant';
import moment from 'moment';
import global from 'misc/global';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title'
import { format } from 'echarts/lib/export';
export default class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
seriesData: []
};
this.initBarEcharts = this.initBarEcharts.bind(this);
}
initBarEcharts() {
console.log(this.props)
let day = this.props.day
// let tockPointName = this.props.tockPointName
let myChart = echarts.init(document.getElementById('main'));
let options = {
title: { text: '实时库存记录' },
tooltip: {
trigger: 'axis',
formatter: function(a) {
// console.log(a)
let list = []
let listItem = ''
for (var i = 0; i < a.length; i++) {
if(a[i].value!='' ){
list.push(
a[i].seriesName +':'+ a[i].value
)
}
}
listItem = list.join('<br>')
return listItem
}
},
xAxis: {
data: day
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {},
series: [
{
name: '物料名称',
type: 'line',
data: this.props.productName
},
{
name: '库存点',
type: 'line',
data: this.props.count
},
{
name: '即时库存',
type: 'line',
data: this.props.stockPointName
},
{
name: '变更时间',
type: 'line',
data: this.props.day
}
]
};
myChart.setOption(options, true)
}
componentDidMount() {
this.initBarEcharts();
}
render() {
return (
<div>
<div id="main" style={{ width: '100%', height: 400 }}></div>
{/* <button onClick={this.changeData}>changeData</button> */}
<p>{this.state.seriesData}</p>
</div>
);
}
componentWillUpdate() {
}
componentDidUpdate() {
this.initBarEcharts();
}
}
react echarts动态数据展示
最新推荐文章于 2024-05-09 08:34:54 发布