react+antd系列之引入echart图表

要在antd中引入echart图表，首先得安装echart包，命令如下：cnpm install echarts –saveechart安装完毕，要如何使用呢，在react中我们要引入我们刚刚安装的echart，如下：import echarts from ’echarts/lib/echarts’;但是这里引入这个还不止，假设你要画柱状图，则你得引入：import ’echarts/lib/chart/bar’;如果你要画折线图，你得引入：import ’echarts/lib/chart/line’;这里你要画什么的时候，就引入什么，具体参考引入路径地址：https://www.npmjs.com/package…底下有个echart图表例子，代码如下如下：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’;class Test extends React.Component { componentDidMount() { // 初始化 var myChart = echarts.init(document.getElementById(‘main’)); // 绘制图表 myChart.setOption({ title: { text: ‘某地区蒸发量和降水量’ }, tooltip : { trigger: ‘axis’ }, legend: { data:[‘蒸发量’,‘降水量’] }, 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 : this.props.data.xdata } ], yAxis : [ { type : ‘value’ } ], series : [ { name:‘蒸发量’, type:‘bar’, data: this.props.data.ydata.ydata1, markPoint : { data : [ {type : ‘max’, name: ‘最大值’}, {type : ‘min’, name: ‘最小值’} ] }, markLine : { data : [ {type : ‘average’, name: ‘平均值’} ] } }, { name:‘降水量’, type:‘bar’, data: this.props.data.ydata.ydata2, markPoint : { data : [ {type : ‘max’, name: ‘最大值’}, {type : ‘min’, name: ‘最小值’} ] }, markLine : { data : [ {type : ‘average’, name : ‘平均值’} ] } }, ] });}render() { return ( <div id=“main” style={{ width: ‘100%’, height: 500 }}></div> );}}export default Test;我们把这个图表封装成一个组件，然后我们在别的页面可以引入这个组件，代码如下：import React from ‘react’;import { connect } from ‘dva’;import styles from ‘./IndexPage.css’;import Test from ‘../components/echart.js’;function IndexPage() { return ( <div className={styles.normal}> <Test data={{ xdata: [‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’], ydata: { ydata1:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], ydata2:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], } }}/> </div> );}IndexPage.propTypes = {};export default connect()(IndexPage);效果如下：如果我们要让图表自适应，也就是跟随屏幕缩放而自动缩放改怎么处理呢？其实只要添加一句代码即可，这里有两种方案，第一种如下：window.onresize = myChart.resize;第二种如下： window.addEventListener(“resize”,function(){ myChart.resize(); });具体源码地址如下：https://gitee.com/hope93/intr…