在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架，而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下面新增一个页面，如下：
(b) 然后在/common/router.js文件中添加以下内容，即你需要用到的models文件及业务实现代码路径
'/dashboard/testechart': {
component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/testEchart')),
},(c) 然后在/routes/Dashboard/路径下添加你的业务实现逻辑代码testEchart.js，需要注意的是：名字可以更改，但是需要与上述保持一致，testEchart.js代码如下：
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;效果如下：
一个在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) 运行效果