要在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();
    });

具體原始碼地址如下：
https://gitee.com/hope93/introducing_echart_into_antd