React简单封装了ECharts饼图
时间：2023-04-02 21:00:40
HTML
使用ECharts获取EChartsEcharts官网教程告诉你获取Echarts的各种方式：http://echarts.baidu.com/tutorial.html最简单的方法就是直接引用jsfile当然，这次我们会使用webpack进行包管理，所以需要通过webpack获取Echarts：通过require('echarts')获取。默认使用require('echarts')获取已经加载了所有图表和组件的ECharts包，所以体积会比较大。如果项目中体积要求比较严格，也可以只导入需要的模块。官方是这么说的，所以我们得去https://github.com/ecomfe/echarts/blob/master/index.js查看可以导入的模块列表，根据需要导入。比如我这次需要绘制饼图，需要引入：varecharts=require('echarts/lib/echarts')require('echarts/lib/chart/pie')require('echarts/lib/component/title')gogogo定义一个组件。我们首先定义一个Component。ECharts的渲染需要以div有宽高为前提。所以在这个组件的render()方法中，必须有一个div容器来展示ECharts，并且这个div必须设置WidthHeight。render(){return(
)}initPieChart()就像使用ECharts一样，我们先获取数据，然后是initECharts，然后是setOption，就大功告成了~initPieChart(){const{data}=this.propsletmyChart=echarts.init(this.refs.pieChart)letoptions=this.setOption(data)myChart.setOption(options)}//这是最简单的饼图~setOption(data){return{title:{text:"programminglanguage",left:"center"},系列：[{名称：'scale'，类型：'pie'，数据：数据，标签：{正常：{格式化程序：“{d}％\n{b}”，}}}]}}绑定方法构造函数（props){super(props)this.setOption=this.setOption.bind(this)this.initChart=this.initChart.bind(this)}初始化ECarts上面已经定义了initPieChart方法，什么时候使用呢this方法？当然DOM渲染完成后，再使用refs获取DOM节点~也就是componentDidMount时：componentDidMount(){this.iniChart();}更新组件entDidUpdate(){this.iniChart();}传递数据importPiefrom'./pie';constdata=[{value:2,name:"JavaScript"},{value:1,name:"Java"},{value:1,name:"HTML/CSS"}]exportdefaultclassComponentBodyextendsReact.组件{render(){return(
)}}参见https://github.com/axuebin/react-echarts-demo/blob结果的完整代码在/master/src/pie.js~
