在Ant Design Pro（React）中使用ECharts

淩亂°似流年 2022-03-01 00:08 784阅读 0赞

使用**Ant Design Pr**o解决方案可以快速搭建前端框架，而**ECharts**是前端最流行，功能最强大的前端图表库。

下面将讲解下如何在Ant Design Pro使用ECharts。

Ant Design Pro本身是通过**Webpack**进行打包的，而ECharts本身也提供了Webpack的安装方式，因此我们仅需要通过npm命令进行安装即可：

npm install echarts --save

如果没有报错，说明ECharts正常安装完毕。

下面分两种情况进行讲解：**静态显示**及**数据流通应用**

**（1）静态显示**

(a) 首先在/common/menu.js文件添加你的展示页及路径

比如：

{
      name: '测试图表',
      path: 'testechart',
      // hideInBreadcrumb: true,
      // hideInMenu: true,
    },

我们是想在dashboard下面新增一个页面，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70][]

(b) 然后在/common/router.js文件中添加以下内容，即你需要用到的models文件及业务实现代码路径

'/dashboard/testechart': {
          component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/testEchart')),
        },

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: '未来一周气温变化',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高气温','最低气温']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高气温',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    });
        }
        render() {
            return (
                <div id="main" style={
       {width: '80%',height:400}}></div>
            );
        }
    }
    export default EchartsTest;

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1][]

一个在Ant Design Pro解决方案中使用ECharts的静态展示示例就完成了，然而实际应用中很少说数据是固定不变的，数据往往是通过调用后端接口来获得的，然后再通过前端渲染出来，示例如下文所示。

**（2）数据流通应用**

接下来，我们来完整模拟一个真实开发场景并实现这种数据流通的功能。

注：我们不搭建后台Server服务，而是使用Ant Design Pro解决方案提供的Mock数据功能来进行数据模拟。

**补充：**

.roadhogrc.mock.js：功能是提供mock数据的功能，模拟后台服务

src/services/api.js：功能是定义请求函数，在该文件中，定义真实需要请求的后端url地址和参数

src/models/\*.js：models文件夹下的文件中整个Ant Design Pro解决方案中数据的存储和请求管理中心

src/routes/\*.js：routes文件夹下的文件存放的是真实页面组件，在该组建中，我们一方面触发models下的请求动作，另一方面会读取models中存储的数据

下面我们将依次来实现这几个文件：

（a）在.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]
        }]
      }

（2）接下来，我们修改/src/service/api.js文件，该文件中，我们需要定义函数如下：

export async function queryTestData() {
      // 查询测试数据
      return request('/mock_test_data', {
        method: 'POST',
        body: {},
      });
    }

（3）然后我们得在/src/models/目录下添加我们的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
          };
        }
      },
    };

（4）在/common/menu.js文件添加你的展示页及路径

{
      name: '测试图表2',
      path: 'testechart2',
      // hideInBreadcrumb: true,
      // hideInMenu: true,
    },

（5）然后在/common/router.js文件中添加以下内容，即你需要用到的models文件及业务实现代码路径

'/dashboard/testechart2': {
          component: dynamicWrapper(app, ['monitor', 'test'], () => import('../routes/Dashboard/testEchartDemo')),
        },

（6）最后我们需要在/routes/Dashboard/路径下编写我们真实的页面组件代码了，文件名为：testEchartDemo.js，内容如下：

注：所有涉及到的文件名可以自定义，但必须保证一致，比如/common/router.js文件中import('../routes/Dashboard/testEchartDemo')与/routes/Dashboard/testEchartDemo.js文件对应

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(({ setting, test, loading }) => ({
      setting, test
    }))
    
    //class EchartsTest extends Component {
    export default class EchartsTest extends React.Component {
    
      constructor(props) {
            super(props);
            // 设置state
            this.state = {
            };
        }
    
      componentDidMount() {
        this.props.dispatch({
          type: 'test/fetchTestData',
          //body: {}
          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: '80%',height:400}}></div>
        );
      }
    }

(7) 运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70]: /images/20220301/1310a1192a534b04a861326190755ab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 1]: /images/20220301/85ed2b0dcf804eb6bf3dcb75e6092f40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70 2]: /images/20220301/2e3f20f805bb40628f71033306c2f338.png