这次我们来闲谈一下react开发如何使用echarts。
echarts是个好东西，很强大的配置功能，很多开发者都在使用它。那么在react里面如何去调用echarts？如何封装echarts呢？
react开发者，首先会想到的是上github搜索“react echarts”，然后找最多start的那个插件，比如“echarts-for-react”，那么，我们是不是真的有必要用插件来做呢？
带着上面这些疑问，下面我将一个个给大家解答开发中的一些体会。
1、是不是应该使用别人封装好的react-echarts插件？
这个答案没有绝对的标准，我觉得不需要第三方的react-echarts插件，使用echarts官方的插件即可实现我们需要的功能。
echarts很庞大，每种类型的图标都是一个单独的组件，还有各种小插件，比如label、title等，或许你应该看看这个教程：在webpack中使用echarts
这个官方教程提到了一点很重要，为了避免我们引用过于庞大的echarts源文件，可以采用模块化加载的方式。
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
2、如何在react中封装echarts组件？
react完完全全就是组件化开发，跟echarts可以很好的切合，以封装pie图为例。
a、我们首先要新建一个pieReact.js文件(你想用jsx或者ts为后缀也可以)。
b、添加基本的react组件模型，一个render方法，定义了一个div容器来展示canvas，style初始化容器的宽度和高度，如果不设置，就无法渲染canvas，这里用到了ref来获取节点，而不是id。
import React,{ Component } from 'react';
export class PieReact extends React.Component {
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",height: "200px"}}></div>
</div>
)
}
}
c、请问你安装好了echarts了吗？没有就请安装。
npm install echarts --save-dev
d、在pieReact组件中导入echarts，每个echarts小插件的导入方式可以参考：echarts组件导入方式
import React,{ Component } from 'react';
//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/pie') //图表类型
require('echarts/lib/component/title') //标题插件
export class PieReact extends React.Component {
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",height: "200px"}}></div>
</div>
)
}
}
e、那我们要怎么初始化echarts呢？在react中，我们需要等到虚拟dom渲染完成了才能通过refs去获取节点，这样我们就可以在组件componentDidMount的时候初始化echarts。
import React,{ Component } from 'react';
//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/pie') //图表类型
require('echarts/lib/component/title') //标题插件
export class PieReact extends React.Component {
componentDidMount() {
const { data } = this.props //外部传入的data数据
let myChart = echarts.init(this.refs.pieChart) //初始化echarts
//我们要定义一个setPieOption函数将data传入option里面
let options = this.setPieOption(data)
//设置options
myChart.setOption(options)
}
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",height: "200px"}}></div>
</div>
)
}
}
f、添加setPieOption函数，只返回一个纯对象。在constructor绑定setPieOption到当前的实例。
import React,{ Component } from 'react';
//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/pie') //图表类型
require('echarts/lib/component/title') //标题插件
export class PieReact extends React.Component {
constructor(props) {
super(props)
this.setPieOption = this.setPieOption.bind(this)
}
componentDidMount() {
const { data } = this.props //外部传入的data数据
let myChart = echarts.init(this.refs.pieChart) //初始化echarts
//我们要定义一个setPieOption函数将data传入option里面
let options = this.setPieOption(data)
//设置options
myChart.setOption(options)
}
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",height: "200px"}}></div>
</div>
)
}
//一个基本的echarts图表配置函数
setPieOption(data) {
return {
series : [
{
name: '比例',type: 'pie',radius: ['70%','90%'],avoidLabelOverlap: true,data: data,//传入外部的data数据
label: {
normal: {
show: false,position: 'center',textStyle: {
fontSize: '18'
},formatter: "{d}% \n{b}",},emphasis: {
show: true,textStyle: {
fontSize: '18',}
}
},labelLine: {
normal: {
show: false
}
}
}
]
}
}
}
g、现在可以初始化显示一个echarts的pie图了，那么如果外部传入的data发生了改变怎么办呢？我们还需要添加一个方法来监听props的变化，幸运的是react已经帮我们做好了这些。使用componentDidUpdate()。
import React,{ Component } from 'react';
//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/pie') //图表类型
require('echarts/lib/component/title') //标题插件
export class PieReact extends React.Component {
constructor(props) {
super(props)
this.setPieOption = this.setPieOption.bind(this)
}
componentDidMount() {
const { data } = this.props //外部传入的data数据
let myChart = echarts.init(this.refs.pieChart) //初始化echarts
//我们要定义一个setPieOption函数将data传入option里面
let options = this.setPieOption(data)
//设置options
myChart.setOption(options)
}
componentDidUpdate() {
const { data } = this.props //外部传入的data数据
let myChart = echarts.init(this.refs.pieChart) //初始化echarts
//我们要定义一个setPieOption函数将data传入option里面
let options = this.setPieOption(data)
//设置options
myChart.setOption(options)
}
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",labelLine: {
normal: {
show: false
}
}
}
]
}
}
}
h、你会发现componentDidMount和componentDidUpdate执行的方法是一样的，那么我们可以提取出来作为一个单独的方法，然后在componentDidMount和componentDidUpdate调用即可。下面我们来看看代码的最终形态吧。
import React,{ Component } from 'react';
//导入echarts
var echarts = require('echarts/lib/echarts') //必须
require('echarts/lib/chart/pie') //图表类型
require('echarts/lib/component/title') //标题插件
export class PieReact extends React.Component {
constructor(props) {
super(props)
this.setPieOption = this.setPieOption.bind(this)
this.initPie = this.initPie.bind(this)
}
initPie() {
const { data } = this.props //外部传入的data数据
let myChart = echarts.init(this.refs.pieChart) //初始化echarts
//我们要定义一个setPieOption函数将data传入option里面
let options = this.setPieOption(data)
//设置options
myChart.setOption(options)
}
componentDidMount() {
this.initPie()
}
componentDidUpdate() {
this.initPie()
}
render() {
return (
<div className="pie-react">
<div ref="pieReact" style={{width: "100%",labelLine: {
normal: {
show: false
}
}
}
]
}
}
}
i、至于怎么动态改变this.props.data，就需要在外部组件做操作了，如果是定时器类型的更新，可以在action的ajax方法设置定时器去请求新的数据，如果是事件类型的更新（比如点击操作），就直接通过点击事件触发action去请求新数据。
j、在外部调用这个组件很简单，我只封装了一个data接口，更多接口的封装可以自己根据需要去做，比如颜色、字体大小自定义，定义标题，定位label等。
import { PieReact } from './PieReact'
//data的格式
/*
const data = [
{value: 1,name: "是"},{value: 2,name: "否"}
]
*/
class Home extends React.Component {
render () {
const { data } = this.props.reducer
<div>
<PieReact
data={data}
/>
</div>
}
}
最后，提问环节。
小明同学：我只用了react，没用到redux，你说的action更新我都没有这个文件啊。
我：自己不会动动脑筋转个弯吗？好了，下课。
效果图
