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;

这里你要画什么的时候，就引入什么，具体参考引入路径地址：

底下有个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();
    });