React简单封装ECharts饼图

前端之家收集整理的这篇文章主要介绍了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"},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

原文地址~

猜你在找的React相关文章