vue后台系统管理项目-echarts实现订单统计

echarts柱状图实现订单统计

主要功能

• 不同订单状态切换显示不同的柱状图数据；
• 根据条件切换选择年度视图、月度视图；
• 根据条件切换指定年份、指定月份显示当前的数据；
• 根据搜索条件查询查看柱状图数据；
• 柱状图数据导出功能，可导出Excel、导出PDF；
• 柱状图实现，属性配置、页面自适应；

目录

echarts柱状图实现订单统计

页面布局

获取数据方法

1. 已完成订单、运输中tab切换，数据获取

2.getOrderFirstAP调用接口，获取柱状图图标数据

3.获取年份

4.获取默认月份

5.查询方法

6.重置功能

7.导出功能

8.柱状图数据配置

---

实现效果 

 

页面布局

本项目使用的element-ui框架，可根据需求自行修改，功能都是都是一样的，通用。

<div class="main mt30">
      <!-- 已完成订单 -->
      <!-- 第一个图表 -->
      <div class="ordersed">
        <!-- tab 切换栏 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode