SpringCloud集成VUE通过ECHARTS做统计

通过图表的形式展示，统计的数据都来自订单模块，因此我们在 该模块封装好数据，在统计模块通过feign的形式获取数据。

 先编写对应sql语句，根据名称查询数量，条件是开始时间结束时间

SELECT reserve_date,count(*) 
from order_info
WHERE hosname LIKE ? 
AND reserve_date >= ? AND reserve_date <= ?
GROUP BY reserve_date
ORDER BY reserve_date

 在order模块编写对应xml文件

<select id="selectOrderCount" resultType="com.lzq.yygh.vo.order.OrderCountQueryVo">
        select reserve_date as reserveDate, count(reserve_date) as count
        from order_info
        <where>
        <if test="hosname != null and hosname != ''">
            and hosname like CONCAT('%',#{hosname},'%')
        </if>
        <if test="reserveDateBegin != null and reserveDateBegin != ''">
            and reserve_date >= #{reserveDateBegin}
        </if>
            <if test="reserveDateEnd != null and reserveDateEnd != ''">
                and reserve_date &lt;= #{reserveDateEnd}
            </if>
            and is_deleted = 0
        </where>
        group by reserve_date
        order by reserve_date
    </select>

service层

/**
     * 订单统计
     */
    Map<String, Object> getCountMap(OrderCountQueryVo orderCountQueryVo);
    
     @Override
    public Map<String, Object> getCountMap(OrderCountQueryVo orderCountQueryVo) {
        //查询数据list集合
        List<OrderCountVo> orderCountVos = baseMapper.selectOrderCount(orderCountQueryVo);
        //将集合封装 一个放日期 一个放数据
        //通过流遍历取日期 在转成集合
        List<String> dateList = orderCountVos.stream().map(OrderCountVo::getReserveDate).collect(Collectors.toList());
        //对应数量
        List<Integer> countList = orderCountVos.stream().map(OrderCountVo::getCount).collect(Collectors.toList());
        Map<String, Object> map = new HashMap<>();
        map.put("dateList", dateList);
        map.put("countList", countList);
        return map;
    }

控制层

 @ApiOperation(value = "获取订单统计数据")
    @PostMapping("inner/getCountMap")
    public Map<String, Object> getCountMap(@RequestBody OrderCountQueryVo orderCountQueryVo){
     return orderInfoService.getCountMap(orderCountQueryVo);
    }

编译时不加载xml文件，可以把xml文件放在resource下，或者编译后将xml复制到target文件下

通过配置让编译时加载java下的xml文件，配置文件

mybatis-plus.mapper-locations=classpath:com/lzq/yygh/mapper/xml/*.xml

pom文件

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
    <resources>
    <resource>
        <directory>src/main/java</directory>
        <includes>
            <include>**/*.yml</include>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
    </resource>
    <resource>
        <directory>src/main/resources</directory>
        <includes> <include>**/*.yml</include>
            <include>**/*.properties</include>
            <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
    </resource>
    </resources>
    </build>

要使用远程调用，创建service_order_client，添加feign接口

@FeignClient(value = "service-orders")
@Repository
public interface OrderFeignClient {
    /**
     * 获取订单统计数据
     */
    @PostMapping("/api/order/orderInfo/inner/getCountMap")
    Map<String, Object> getCountMap(@RequestBody OrderCountQueryVo orderCountQueryVo);
}

创建service_statistics模块

<dependencies>
        <dependency>
            <groupId>com.lzq</groupId>
            <artifactId>service_order_client</artifactId>
            <version>0.0.1-SNAPSHOT</version>
        </dependency>
    </dependencies>

配置文件

# 服务端口
server.port=8209
# 服务名
spring.application.name=service-sta
# 环境设置：dev、test、prod
spring.profiles.active=dev
# nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8888

启动类

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@EnableDiscoveryClient
@EnableFeignClients(basePackages = {"com.lzq"})
@ComponentScan(basePackages = {"com.lzq"})

public class ServiceStatisticsApplication {
    public static void main(String[] args) {
        SpringApplication.run(ServiceStatisticsApplication.class, args);
    }
}

控制层

@Api(tags = "统计管理接口")
@RestController
@RequestMapping("/admin/statistics")
public class StatisticsController {
    @Autowired
    private OrderFeignClient orderFeignClient;
    @ApiOperation(value = "获取订单统计数据")
    @GetMapping("getCountMap")
    public R getCountMap(@ApiParam(name = "orderCountQueryVo",
            value = "查询对象", required = false)OrderCountQueryVo orderCountQueryVo) {
        Map<String, Object> map = orderFeignClient.getCountMap(orderCountQueryVo);
        return R.ok().data(map);
    }
}

在编写对应的网关

前端安装插件 ECHARTS

npm install --save echarts@4.1.0

添加路由，router，index.js

{
      path: '/statistics',
      component: Layout,
      redirect: '/statistics/order/index',
      name: 'BasesInfo',
      meta: { title: '统计管理', icon: 'table' },
      alwaysShow: true,
      children: [
      {
      path: 'order/index',
      name: '预约统计',
      component: () =>import('@/views/yygh/sta/index'),
      meta: { title: '预约统计' }
      }
      ]
      },

创建对应页面，封装api请求

import request from '@/utils/request'
const api_name = '/admin/statistics'
export default {
 getCountMap(searchObj) {
 return request({
 url: `${api_name}/getCountMap`,
 method: 'get',
 params: searchObj
 })
 }
}

对应页面

<template>
    <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="searchObj.hosname" placeholder="点击输入医院名称"/>
        </el-form-item>

        <el-form-item>
            <el-date-picker
                v-model="searchObj.reserveDateBegin"
                type="date"
                placeholder="选择开始日期"
                value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item>
            <el-date-picker
                v-model="searchObj.reserveDateEnd"
                type="date"
                placeholder="选择截止日期"
                value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-button
            :disabled="btnDisabled"
            type="primary"
            icon="el-icon-search"
            @click="showChart()">查询</el-button>
    </el-form>

    <div class="chart-container">
        <div id="chart" ref="chart" 
            class="chart" style="height:500px;width:100%"/>
    </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import statisticsApi from '@/api/yygh/sta'

export default {

    data() {
        return {
            searchObj: {
                hosname: '',
                reserveDateBegin: '',
                reserveDateEnd: ''
            },
            btnDisabled: false,
            chart: null,
            title: '',
            xData: [], // x轴数据
            yData: [] // y轴数据
        }
    },

    methods: {
        // 初始化图表数据
        showChart() {
            statisticsApi.getCountMap(this.searchObj).then(response => {
                this.yData = response.data.countList
                this.xData = response.data.dateList
                this.setChartData()
            })
        },

        setChartData() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'))
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: this.title + '挂号量统计'
                },
                tooltip: {},
                legend: {
                    data: [this.title]
                },
                xAxis: {
                    data: this.xData
                },
                yAxis: {
                    minInterval: 1
                },
                series: [{
                    name: this.title,
                    type: 'line',
                    data: this.yData
                }]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },
    }
}
</script>

标签：xml,SpringCloud,getCountMap,orderCountQueryVo,VU,E通,date,order,reserve
来源： https://blog.csdn.net/weixin_52210557/article/details/122768794