在Ant Design Pro（React）中使用ECharts

时间：2024-03-23 07:39:20

在之前的系列文章中，我们讲解了如何快速使用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 
Ant Design Pro本身是通过Webpack进行打包的，而ECharts本身也提供了通过Webpack的安装方式。 
因此，我们仅仅需要通过npm命令进行安装即可：

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（React）中使用ECharts 
至此，一个静态在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

相关文章