React简单封装ECharts饼图
使用ECharts获取EChartsEcharts官网教程中就有告诉通过各种方式获取Echarts:http://echarts.baidu.com/tutorial.html 最简单的方式就是直接引用js文件就o了~ 当然,这次要用的是webpack来进行包管理,所以就要通过webpack来获取Echarts: npm install echarts --save 引入ECharts通过webpack获取的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定义组件我们先定义一个 render() { return ( <div className="pie-react"> <div ref="pieChart" style={{width: "200px",height: "200px"}}> </div> </div> ) } initPieChart()就像平时使用ECharts一样,我们先是获取数据,然后 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上面已经定义了 当然是要在DOM渲染完成了之后啊,然后通过refs去获取这个DOM节点~ 也就是 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 原文地址~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |