在之前的系列文章中，我們講解了如何快速使用Ant Design Pro解決方案來快速搭建前端框架。

而ECharts是前端最流行，功能最強大的前端圖表庫。

下面，我們將會在本文中講解如何在Ant Design Pro使用ECharts。

安裝

首先，如何在Ant Design Pro解決方案下安裝ECharts呢？ 
Ps：關於Ant Design Pro的基本知識可以訪問如下文章進行了解： 
https://www.missshi.cn/api/view/blog/5ab755dd22890966e2000003 
https://www.missshi.cn/api/view/blog/5ab7533a22890966e2000001

npm install echarts --save

進行該命令後，稍等一陣便可以正常安裝完成echarts了。

靜態顯示

安裝完成後，我們先來看一下如何讓ECharts圖示在Ant Design Pro的某個頁面中顯示出來。 
首先，修改Ant Design Pro專案下src/common/router.js檔案，將某個路由地址指向某個檔案。 
例如，在routerConfig

'/test': {
      component: dynamicWrapper(app, ['test'], () => import('../routes/Test/Test')),
},

此時，在訪問/test地址時，將訪問routes/Test/Test檔案。 
下面，我們需要建立一個檔案routes/Test/Test：

import React, { Component } from 'react';
// 引入 ECharts 主模組
import echarts from 'echarts/lib/echarts';
// 引入柱狀圖
import  'echarts/lib/chart/bar';
// 引入提示框和標題元件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
class EchartsTest extends Component {
    componentDidMount() {
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        // 繪製圖表
        myChart.setOption({
            title: { text: 'ECharts 入門示例' },
            tooltip: {},
            xAxis: {
                data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
    render() {
        return (
            <div id="main" style="{{" width:="" 400,="" height:="" 400="" }}=""></div>
        );
    }
}
export default EchartsTest;
 

此時，我們的入門Demo已經完成了。 
在該檔案中，我們定義了一個React元件EchartsTest。該元件在componentDidMount時例項化了一個myChart物件並設定了相關EChart屬性。同時，設定了myChart物件在id為main的物件中顯示。 
而在render的部分，返回了一個id=”main”的DIV塊。

下面，我們來啟動Ant Design Pro的開發模式進行觀察：

npm start

啟動完成後，訪問如下地址：http://localhost:8000/#/test 
可以看到如下結果： 
 
至此，一個靜態在Ant Design Pro的解決方案中使用ECharts的示例就完成了。

資料流通應用

然而，在正式應用中，圖示中的資料通常不是提前在前端程式碼中寫好的，而是前端通過呼叫後臺介面獲取資料，然後再前端渲染出來的。 
因此，在接下來的內容中，我們則來完整模擬一個真實開發場景並實現這種資料流通的功能。 
Ps：此處，我們不搭建後臺Server服務，而是使用Ant Design Pro解決方案提供的Mock資料功能進行資料模擬。

首先，我們來梳理一下Ant Design Pro解決方案中資料請求的涉及的檔案：

• .roadhogrc.mock.js：功能是提供mock資料的功能，模擬後臺服務。
• src/services/api.js：功能是定義請求函式，在該檔案中，定義真實需要請求的後端url地址和引數。
• src/models/*.js：models資料夾下的檔案中整個Ant Design Pro解決方案中資料的儲存和請求管理中心。
• src/routes/*.js：routes資料夾下的檔案存放的是真實頁面元件，在該元件中，我們一方面會觸發models下的請求動作，另一方面會讀取models中儲存的資料。

下面，我們來依次實現這幾個檔案：

.roadhogrc.mock.js

在.roadhogrc.mock.js檔案中，我們模擬後臺來提供資料： 
在proxy字典中，我們可以新增一項：

'POST /mock_test_data': (req, res) => {
  res.send({ 
    status: 'ok', 
    code: 200, 
    x_data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
  });
},

該項表示在我們使用POST方式訪問/mock_test_data地址時，會返回如下資訊：

{ 
  status: 'ok', 
  code: 200, 
  x_data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],
  series: [{
      name: '銷量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
  }]
}

接下來，我們來繼續修改src/services/api.js檔案。 
在該檔案中，我們需要定義函式如下：

export async function queryTestData() {
  // 查詢測試資料
  return request('/mock_test_data', {
    method: 'POST',
    body: {},
  });
}

下面，我們需要修改src/models/test.js檔案：

// 從services/api檔案中引入queryTestData函式
import {
  queryTestData,
} from '../services/api';
export default {
  namespace: 'test',
  // 資料儲存中心，初始化為空
  state: {
    x_data: [],
    series: []
  },
  effects: {
    // 定義動作，呼叫該動作時發起請求
    *fetchTestData(body, { call, put }) {
      const response = yield call(queryTestData);
      // 接收到請求的返回值後，呼叫saveTestData進行儲存
      yield put({
        type: 'saveTestData',
        x_data: response.x_data,
        series: response.series,
      });
    }
  },
  reducers: {
    // 將請求的響應值儲存至資料儲存中心中。
    saveTestData(state, action) {
      return {
        ...state,
        x_data: action.x_data,
        series: action.series
      };
    }
  },
};

最後，我們來修改routes/Test/Test檔案：

import React, { Component } from 'react';
import { connect } from 'dva';
// 引入 ECharts 主模組
import echarts from 'echarts/lib/echarts';
// 引入柱狀圖
import  'echarts/lib/chart/bar';
// 引入提示框和標題元件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
@connect(({ test, loading }) => ({
  test
}))
class EchartsTest extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'test/fetchTestData',
      body: {}
    });
  }
  componentWillReceiveProps(nextProps) {
    var myChart = echarts.init(document.getElementById('main'));
    // 繪製圖表
    myChart.setOption({
        title: { text: 'ECharts 入門示例' },
        tooltip: {},
        xAxis: {
            data: nextProps.test.x_data
        },
        yAxis: {},
        series: nextProps.test.series
    });
  }
  render() {
    return (
        <div id="main" style="{{" width:="" 400,="" height:="" 400="" }}=""></div>
    );
  }
}
export default EchartsTest;

至此為止，整個功能就已經開發完成啦~ 
希望本文對您有一些幫助。 

原地址：https://www.missshi.cn/api/view/blog/5b05226413d85b3c71000000