React簡單封裝ECharts餅圖

使用ECharts

獲取ECharts

Echarts官網教程中就有告訴經過各類方式獲取Echarts：http://echarts.baidu.com/tutorial.html

最簡單的方式就是直接引用js文件就o了~

固然，此次要用的是webpack來進行包管理，因此就要經過webpack來獲取Echarts：

npm install echarts --save

引入ECharts

經過webpack獲取的ECharts會放在項目的node_modules目錄下，能夠直接經過require('echarts')獲得。

默認使用 require('echarts') 獲得的是已經加載了全部圖表和組件的 ECharts 包，所以體積會比較大，若是在項目中對體積要求比較苛刻，也能夠只按需引入須要的模塊。

官方式這麼說的，因此咱們要到https://github.com/ecomfe/echarts/blob/master/index.js去查看能夠引入的模塊列表，並按需引入。

好比此次我須要畫一個餅圖，我就須要引入：

var echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/pie')
require('echarts/lib/component/title')

gogogo

定義組件

咱們先定義一個Component,ECharts的渲染是須要在這個div有寬高的前提下，因此在這個組件的render()方法中要有一個div容器來展現ECharts,而且這個div要設置寬高。

render() {
    return (
    <div className="pie-react">
      <div ref="pieChart" style={{width: "200px", height: "200px"}}>
      </div>
    </div>
  )
}

initPieChart()

就像平時使用ECharts同樣，咱們先是獲取數據，而後initECharts，而後setOption，就搞定了~

initPieChart() {
  const { data } = this.props
  let myChart = echarts.init(this.refs.pieChart)
  let options = this.setOption(data)
  myChart.setOption(options)
}
//這是一個最簡單的餅圖~
setOption(data) {
  return {
    title:{
      text:"編程語言",
      left:"center"
    },
    series : [
      {
        name: '比例',
        type: 'pie',
        data: data,
        label: {
          normal: {
            formatter: "{d}% \n{b}",
          }
        }
      }
    ]
  }
}

綁定方法

constructor(props) {
  super(props)
  this.setOption = this.setOption.bind(this)
  this.initChart = this.initChart.bind(this)
}

初始化ECarts

上面已經定義了initPieChart方法，咱們該在何時用這個方法呢？

固然是要在DOM渲染完成了以後啊，而後經過refs去獲取這個DOM節點~

也就是componentDidMount的時候：

componentDidMount() {
  this.iniChart();
}

更新

componentDidUpdate() {
  this.iniChart();
}

傳數據

import Pie from './pie';
const data = [
  {value: 2, name: "JavaScript"},
  {value: 1, name: "Java"},
  {value: 1, name: "HTML/CSS"}
]
export default class ComponentBody extends React.Component{
  render(){
    return(
      <div className="bodyindex">
        <Pie data={data}/>
      </div>
    )
  }
}

結果

完整代碼見https://github.com/axuebin/react-echarts-demo/blob/master/src/pie.js

原文地址~