React学习系列echarts简单封装组件

import React, { Component } from \'react\';
// 引入 ECharts 主模块
import echarts from \'echarts/lib/echarts\';
// 引入饼状图
import  \'echarts/lib/chart/pie\';
import  \'echarts/lib/chart/line\';
// 引入提示框和标题组件
import \'echarts/lib/component/tooltip\';
import \'echarts/lib/component/ \';
// 引入图例组件
import \'echarts/lib/component/legend\';

class MyCharts extends Component {
    constructor(props){
        super(props);
    }

    // 更新数据重新初始化视图
    componentDidUpdate() {
        this.initChart();
    }
    // 首次加载初始化视图
    componentDidMount(){
        this.initChart();
    };

    initChart = () =>{
        let option = {
             : {
                text: this.props. ,
            },
            tooltip: {
                trigger: \'axis\'
            },
            legend: {
                data: this.props.edata.legend
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {},
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: [\'line\', \'bar\']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: \'category\',
                boundaryGap: false,
                data: this.props.edata.xSeries
            },
            yAxis: {
                type: \'value\',
                axisLabel: {
                    formatter: \'{value} \'
                }
            },
            series: this.props.edata.series
        };

        let myChart = echarts.init(document.getElementById(\'charts\'));
        // 绘制图表
        myChart.setOption(option);
    }


    render() {
        return (
            <div>
                <div id=\"charts\" style={{width: \'800px\', height:\'500px\'} }></div>
            </div>
        )
    }
}
export default MyCharts;

 使用

<DDAppAnalyseCharts  ={\'客户端分析 趋势图\'} edata={edata}/>

数据

  // 图表数据
    edata:{
            legend:[\'A\', \'B\',\'C\'],
            xSeries:[\'2018.12.01\', \'2018.12.02\', \'2018.12.03\', \'2018.12.04\', \'2018.12.05\', \'2018.12.06\', \'2018.12.07\'],
            series:[
            {
                name: \'A\',
                type: \'line\',
                data: [11, 11, 15, 13, 12, 13, 10]
            },
            {
                name: \'B\',
                type: \'line\',
                data: [1, 3, 2, 5, 3, 2, 0]
            },
            {
                name: \'C\',
                type: \'line\',
                data: [10, 13, 22, 51, 23, 12, 10]
            }
        ]
    },

 效果图（数据是随机生成的）