react 中使用echarts 动态展示多条数据

react 中使用echarts 动态展示多条数据

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(parmars){
                    console.log(parmars)
                    return "物料名称："+parmars[0].value+"</br>"+"库存点："+parmars[2].value+"		 </br>"+"即时库存："+parmars[1].value+"</br>"+"变更时间："+parmars[3].value
                }
            },
            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();
    }
}

效果图