ant文件放在ps的哪里_在Ant Design Pro（React）中使用ECharts

在Ant Design Pro(React)中使用ECharts

2018-05-23T09:54:55

10042

0

0

#### 在之前的系列文章中，我们讲解了如何快速使用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 (

);

}

}

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 (

);

}

}

export default EchartsTest;

```

至此为止，整个功能就已经开发完成啦~

希望本文对您有一些帮助。

相关问题可以留言讨论喔~

0条评论

评论前请先登录

登录

注册

发表回复