React＋Echarts简单的封装套路

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

今天我们来介绍一下React中，对Echarts的一个简单的封装。

首先在我们的React项目中，想使用Echart包，首先需要先安装它，安装代码如下，任选一个就可以

cnpm install echarts --save
npm install echarts --save
yarn add echarts --save

安装好之后，新建一个JS文件，命名test.js，首先导入的是各种依赖（总代码在文章结尾）

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重复的问题（以下代码已省略部分）

初始化完成后，使用图表是当然需要使用数据的，我们当然是不希望数据是只能固定一排或者两排的，所以我们应该在组件外传入不定量的数据，然后在组件中自动去初始化这个图表，这里我的传入数据有：图表标题、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