react使用echarts

1、安装echarts：

npm install echarts --save

2、制作线性图组件，只引入echart必要的js内容

/**
 * Created by yongyuehuang on 2017/8/5.
 */
import React from 'react'
import echarts from 'echarts/lib/echarts' //必须
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'

import 'echarts/lib/component/legend'  // 注意这里引入绘制图形的各类配置组件，不然功能不生效的
import 'echarts/lib/chart/line'

export default class LineReact extends React.Component {
  
  constructor(props) {
    super(props)
    this.initPie = this.initPie.bind(this)
  }
  
  initPie() {
    const { option={} } = this.props //外部传入的data数据
    let myChart = echarts.init(this.ID) //初始化echarts
    
    //设置options
    myChart.setOption(option)
    window.onresize = function() {
      myChart.resize()
    }
  }
  
  componentDidMount() {
    this.initPie()
  }
  
  componentDidUpdate() {
    this.initPie()
  }
  
  render() {
    const { width="100%", height="300px" } = this.props
    return <div ref={ID => this.ID = ID} style={{width, height}}></div>
  }
}

3、引入组件和组件数据

import React, { Component } from 'react';
import { lineOption } from './optionConfig/options'  // 组件数据
import('./EchartsDemo/LineReact')) from {LineReact} //折线图组件


class App extends Component {
  render() {
    return (
      <div>
               
        <h2>折线图react组件实现</h2>
        <LineReact option={lineOption} />

      </div>
    );
  }
}

export default App;

 

来源：

https://github.com/react-love/react-echarts-modules