近期开发了一个react项目,用的是蚂蚁金服推出的脚手架——Ant Design/Ant Design Pro,基于dva框架进行开发。
用Pro的意图原本是觊觎他的图表,觉得能够省事很多,但在实际开发中发现文档偏少,再次开发起来也不太实用,目前来讲图表这块还不算太成熟。而后仍是选用了echart,在react中用起来有些不一样之处莫过于对数据的操做。react
1.首先安装 react-echart 配置:npm
$ 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还不存在,因此须要特殊处理。如下为主要代码:echarts
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端实现效果图:dom
手机端实现效果图:this
文中若有错误,敬请指出~
5.参考文档连接
https://www.jianshu.com/p/2e6789187d30spa