react之echarts數據更新

react之echarts數據更新

在使用setState更新數據時，如果要將圖標更新，需要做一些簡單的封裝，代碼如下：

import React, { Component } from 'react';
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入柱狀圖
import  'echarts/lib/chart/bar';
// 引入提示框和標題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import  Home from "../routers/Home"

class Welcome extends Component {
    constructor(props) {
    super(props);
        this.state={
            data:["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
            seriesData:[5, 20, 36, 10, 10, 20]
        };
        this.changeData  = this.changeData.bind(this);
        this.initBarEcharts  = this.initBarEcharts.bind(this);
    }
    changeData(){
        this.setState({
            seriesData: [5,6,7,8,9,10]
        });
    }
    initBarEcharts(){
        let myChart = echarts.init(document.getElementById('main'));
        let options = {
            title: { text: 'ECharts 入門示例' },
            tooltip: {},
            xAxis: {
                data: this.state.data
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: this.state.seriesData
            }]
        };
        myChart.setOption(options,true)
    }
    componentDidMount() {
        this.initBarEcharts();
    }
    render() {
        return (
        <Home>
            <div id="main" style={{ width: 400,height: 400 }}></div>
            <button onClick={this.changeData}>changeData</button>
            <p>{this.state.seriesData}</p>
        </Home>
        );
    }
    componentWillUpdate(){

    }
    componentDidUpdate(){
        this.initBarEcharts();
    }
}

export default Welcome;

　　

 

鑽研不易，轉載請注明出處。。。