标签:char bsp sim id重复 自己的 简单的 get yarn code
今天我们来介绍一下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,在很多其他的地方,大家都可以用到这么一套方法来封装自己的组件
标签:char bsp sim id重复 自己的 简单的 get yarn code
原文地址:https://www.cnblogs.com/JobsOfferings/p/ReactWithEcharts.html