react+antd系列之引入echart图表

要在antd中引入echart图表，首先得安装echart包，命令如下：

cnpm install echarts --save

echart安装完毕，要如何使用呢，在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...