在Ant Design Pro（React）中使用ECharts

Z时代
2024-01-10
分类：综合

react

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

以上是在Ant Design Pro（React）中使用ECharts 的全部内容，来源链接： utcz.com/z/383682.html

在Ant Design Pro（React）中使用ECharts

其他人也看了：