在React中使用Echart

近期开发了一个react项目，用的是蚂蚁金服推出的脚手架——Ant Design/Ant Design Pro,基于dva框架进行开发。
用Pro的意图本来是觊觎他的图表，以为可以省事不少，但在实际开发中发现文档偏少，再次开发起来也不太实用，目前来说图表这块还不算太成熟。然后还是选用了echart，在react中用起来有些不同之处莫过于对数据的操作。

1.首先安装 react-echart 配置：

$ npm install echarts --save-dev

2.安装成功后可以直接引用,以下是为了避免图表配置导致文件过长，将图表配置的相关代码放入了 lineChart 文件中。

module.exports = {
  	tooltip: {
  		trigger: 'axis'
  	},
  	legend: {
  		data:['本年级'],
  		x:'right'
  	},
  	grid: {
  		left: '3%',
  		right: '4%',
  		bottom: '3%',
  		containLabel: true
  	},
  	toolbox: {
  		feature: {
  			saveAsImage: {}
  		}
  	},
  	xAxis: {
  		type: 'category',
  		boundaryGap: false,
  		data: ['-', '-', '-', '-', '-', '-']
  	},
  	yAxis: {
        name : '单位(%)',
  		type: 'value'
  	},
  	series: [
  		{
  			name:'本年级',
  			type:'line',
  			stack: '总量',
  			color:'#1daef8',
  			data: [0, 0, 0, 0, 0, 0],
  		}
  	]
};

3.数据请求的时候有发现过组件内取不到 DOM 的情况，是因为组件未渲染，id还不存在，所以需要特殊处理。以下为主要代码：

import React, { Component }from 'react';
import {connect} from 'dva';
import echarts from 'echarts/lib/echarts';
import  'echarts/lib/chart/line';
import lineChart from '../Chart/lineChart';
//数据概况
class DataProfile extends React.Component {
    constructor(props) {
        super(props)
        let id = ( '_' + Math.random()).replace('.','_');
        this.state = {
            pieId : 'pie' + id,	//定义初始化随机id
        }
    }
    initPie(id) {
	//获取Chart的真实DOM,虽然react不推荐操作真实DOM,但是Echart对图表的渲染就是基于真实DOM的
        let myChart = echarts.getInstanceByDom(document.getElementById(id));
        if( myChart === undefined){
            myChart = echarts.init(document.getElementById(id));
        }
        myChart.setOption(config)
    }
    componentDidMount() {
	this.initPie(this.state.pieId);
	setTimeout(()=>{
	        let chartRes = this.props.state.getCorrectRateLineChartData;	//取到返回的图表数据值
		let chartDataX = [];		//创建X轴值数组
		let chartDataY = [];		//创建Y轴值数组
		if(chartRes && chartRes.data){
			for(let i = 0; i < chartRes.data.length; i++){
				if(chartRes.data[i].x){
					let xVal = chartRes.data[i].x;
					let xData = new Date(chartRes.data[i].x);
					let time1 = (xData.getTime())/1000;
					let y1Data = parseInt(chartRes.data[i].y1 * 100);
					chartDataX[i] = chartRes.data[i].x;
					chartDataY[i] = y1Data;
				}
			}
		}
		config.xAxis.data = chartDataX;		//更新图表的X轴默认值
		config.series[0].data = chartDataY;		//更新图表的Y轴默认值
		this.initPie(this.state.pieId);		//重新渲染图表
		},1000)
    }
    render(){<div div={this.state.pieId} style={{width:500,height:400}}></div>} componentWillMount () { const {dispatch} = this.props; dispatch({ type: 'dataProfile/getCorrectRateLineChart' }); } export default connect((state) => ({ state: { ...state.dataProfile, loading: state.loading.models.dataProfile } }))(DataProfile);

 

4.最终实现效果图。

PC端实现效果图：

手机端实现效果图：

文中如有错误，敬请指出~
5.参考文档链接
https://www.jianshu.com/p/2e6789187d30