在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')),},

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);// 设置statethis.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) 运行效果

在Ant Design Pro（React）中使用ECharts相关推荐

React 基于ant design Pro 4 实现的一个分页, 自定义页码颜色
标题目录代码样式前言这是在 Ant Design Pro 4 中基于 ant design 的 Pagination 分页组件的基础上开发的. 有这么一个需求, 页码的颜色基于该页是否有差异, ...
同志们,免费版的Ant Design Pro Vue3 来啦
Vue3也出了一段时间了,于是照着ant pro vue搭个免费的vue3版希望大家喜欢基于 Vite2 Vue3 Ant-Design-of-Vue2 TS实现的 Ant Design Pro ...
ant design pro 菜单图标引入问题 iconfontUrl inconfont图标本地
ant design pro 菜单栏使用图标官网使用inconfont图标,推荐使用inconfont官网的线上地址查看地址:https://pro.ant.design/zh-CN/docs/n ...
Ant Design Pro 使用自定义iconfont图标，改变导航栏的图标
Ant Design Pro 使用iconfont上的图标有两种方法: 1.加载在线图标创建一个项目(图标的前缀一定要设置为:icon-) 创建远程连接复制代码,找到ant design pro项 ...
Ant Design Pro引入Echarts 报错Unexpected token
想要在ant design pro中引入echart,发现在网上找了很多示例直接运行不通过,可能需要更改下部分格式,比如直接引用下面链接中的代码就会报错:Unexpected token, https ...
Ant design pro引入Echarts报错：TypeError: Cannot read property 'x_data' of undefined
目录 (1)报错:TypeError: Cannot read property 'x_data' of undefined (2)报错:× Error: Component series.line ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
使用Ant Design Pro，一个企业级开箱即用的中后台前端
#目录 ** 此文仅是个人自学理解的学习笔记,若有不对之处敬请指导更正,谢谢! ** 文章目录 @[toc] Ant Design Pro 了解知识储备安装使用方法一:clone 实践 ESli ...

在Ant Design Pro（React）中使用ECharts

在Ant Design Pro（React）中使用ECharts相关推荐

最新文章

热门文章