react使用ECharts

1.安装echars

npm install echarts --save

2.代码里引入echars模块

// 引入 ECharts 主模块
// 引入 ECharts 主模块
import echarts from ‘echarts/lib/echarts’;
import ‘echarts/lib/chart/line’;
import ‘echarts/lib/component/tooltip’;
import ‘echarts/lib/component/title’;

3.前往echars官网，进入社区-gallery

http://gallery.echartsjs.com/explore.htm

4.随便进入某一个示例（可通过筛选查找不同类图案）

如进入http://gallery.echartsjs.com/editor.html?c=xr1XxW-i7M

5.添加代码

constructor(props){
    super(props)
    this.state = {}
}

componentDidMount() {
 	//put 官网实例option前面同级代码
 	
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById(this.props.id));
    // 绘制图表
    this.myChart .setOption({
    //官网实例option下面代码
    });
    window.addEventListener('resize', this.resize);
}

resize = () => {
    this.myChart.resize();
}

componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
}

render() {
    return (
        <div id={this.props.id}  style={{height: '24px'}}></div>
    );
}

6.从官网拉入代码

把官网实例中option = {}中的代码拉到 this.myChart .setOption(）中间，其他声明放到 componentDidMount() {}下面