React＋Echarts简单的封装套路
今天我们来介绍一下React中，对Echarts的一个简单的封装。
首先在我们的React项目中，想使用Echart包，首先需要先安装它，安装代码如下，任选一个就可以
cnpm install echarts --save npm install echarts --save yarn add echarts --save
安装好之后，新建一个JS文件，命名test.js，首先导入的是各种依赖（总代码在文章结尾）
import React from 'react'; import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/line'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/markPoint'; import 'echarts/lib/component/markLine';
Echeart是需要对真实DOM进行渲染的，且必须用ID不能用className，所以在componentDidMount生命周期的时候，就需要get这个图表的id进行初始化，如：
let myChart = echarts.init(document.getElementById('myTable'));
但是反过来想一想，当你需要多次使用该组件的时候，你会发现如果是固定id的时候会出现问题，因为id只能有一个，所以这里会有两种处理方式：
1、如果你习惯于在这个组件留下能操控的id，你可以在给这个组件传值的时候，传入一个id参数，这样可以自己手动保证id不重复，还能在组件外能CSS或JS操作这个图标。
let { id } = this.props.data;
let myChart = echarts.init(document.getElementById( id ? id : 'myTable'));
2、如果你不需要留下自己操作的id，可以使用随机的id，这样不用留神是否id重复的问题（以下代码已省略部分）
let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36) let id = getRandomID(); class Test extends React.Component { componentDidMount() { window.addEventListener("resize", function () { myChart.resize(); }); // 初始化 let myChart = echarts.init(document.getElementById(id)); render() { return ( <div id={id}></div> ); } } export default Test;
初始化完成后，使用图表是当然需要使用数据的，我们当然是不希望数据是只能固定一排或者两排的，所以我们应该在组件外传入不定量的数据，然后在组件中自动去初始化这个图表，这里我的传入数据有：图表标题、x轴名、y轴数据、y轴数据所对应的项目名、该图表的高度和宽度、id。以下就是我的组件代码：
import React from 'react'; import echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/line'; import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'echarts/lib/component/legend'; import 'echarts/lib/component/toolbox'; import 'echarts/lib/component/markPoint'; import 'echarts/lib/component/markLine'; const defaultType = 'bar'; const defaultWidth = '100%'; const defaultHeight = '300px'; let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36) let id = getRandomID(); class Test extends React.Component { componentDidMount() { window.addEventListener("resize", function () { myChart.resize(); }); // 初始化 let { title, xdata, ydata, legend } = this.props.data; let myChart = echarts.init(document.getElementById(id)); let series = []; for (let i = 0; i < ydata.length; i++) { let item = { name: legend[i], type: defaultType, data: ydata[i], markPoint: { data: [ { type: 'max', name: '最大值' }, { type: 'min', name: '最小值' } ] }, markLine: { data: [ { type: 'average', name: '平均值' } ] } } series.push(item) } // 绘制图表 myChart.setOption({ title: { text: title }, tooltip: { trigger: 'axis' }, legend: { data: legend }, toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true, type: 'jpg' } } }, xAxis: [ { type: 'category', data: xdata } ], yAxis: [ { type: 'value' } ], series }); } render() { let { width, height } = this.props.data; return ( //默认高宽 <div id={id} style={{ width: width ? width : defaultWidth, height: height ? height : defaultHeight }}></div> ); } } export default Test;
这样封装好了之后，我们的调用就很舒服，无论是传几条数据在ydata里面都可以。
import React, { Component } from 'react'
import Test from './Test'
class All extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="all">
<Test data={{
id: 'mainmain',
width: '100%',
height: '500px',
title: '某地区新增男孩人数、女孩人数和总人数',
xdata: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
ydata: [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
[4.6, 10.8, 16, 50, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6]],
legend: ['男孩', '女孩', '总人数']
}} />
</div>
)
}
}
export default All
这是一个非常简单，但是实用的封装，不止是在Echarts，在很多其他的地方，大家都可以用到这么一套方法来封装自己的组件
