在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