nispgithub.github.io

echart

引入

从 npm 获取

cnpm install echarts

示例

<template>
    <div>
        <div id="main" style="width: 100%;height: 400px;"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import { customApi } from '@/api/customApi'
//onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'echarts实例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

})

</script>

<style lang="scss" scoped>

</style>

统计分析

一周客户数量统计

customList.vue

<template>
    <div>
        <div id="main" style="width: 100%;height: 400px;"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import { customApi } from '@/api/customApi'

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: '一周客户数量统计'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
// 异步加载数据
customApi.count().then(res => {
  // 填入数据
  myChart.setOption({
    xAxis: {
      data: res.res.categories
    },
    series: [
        {
            // 根据名字对应到相应的系列
            name: '数量',
            data: res.res.data
        }
        ]
   });
})

})

</script>

<style lang="scss" scoped>

</style>

customApi.js

count(){
        return instance.get('/rbac/custom/count').then(res => res.data);
    }

后台接口

 /*
     * 统计
     * 近七天的客户数量
     *
     * */
    @GetMapping("/count")
    public ResponseBean count(){
        try{
            return ResponseBean.ok(customService.countCustom());
        }catch (Exception e){
            //e.printStackTrace();
            log.error("CustomController--remove====>");
            log.error(e.getMessage());
            return ResponseBean.failed(e.getMessage());
        }
    }

@Override
    public ChartBarBean countCustom() throws Exception {
        ChartBarBean result = new ChartBarBean();
        List<Map<String,Object>> list = customMapper.countCustom();
        if(list != null && list.size() > 0){
            for(Map<String,Object> map : list){
                //x轴日期
                result.getCategories().add(map.get("date"));
                //y轴数量
                result.getData().add(map.get("count"));
            }
        }
        return result;
    }

@Select("select t.date,IFNULL(count,0) as count from (\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 5 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 4 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 3 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 2 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select DATE_SUB( CURRENT_DATE, INTERVAL 1 DAY ) as date from DUAL\n" +
            "UNION ALL\n" +
            "select CURRENT_DATE as date from DUAL ) as t\n" +
            "left JOIN\n" +
            "(SELECT\n" +
            "\tcount( id ) AS count,\n" +
            "\tDATE_FORMAT( create_time, '%Y-%m-%d' ) AS date \n" +
            "FROM\n" +
            "\t`custom` \n" +
            "WHERE\n" +
            "\tcreate_time >= DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) \n" +
            "\tAND create_time <= DATE_ADD( CURRENT_DATE, INTERVAL 1 DAY )  \n" +
            "GROUP BY\n" +
            "\tdate) as tt on t.date = tt.date ORDER BY t.date asc\n" +
            "\t")
    List<Map<String,Object>> countCustom();

补充

sql解析

七天日期

select DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 5 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 4 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 3 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 2 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 1 DAY ) as date from DUAL
UNION ALL
select CURRENT_DATE as date from DUAL 

2023-11-04
2023-11-05
2023-11-06
2023-11-07
2023-11-08
2023-11-09
2023-11-10

根据日期分组，查询近七天每天的客户数量

SELECT
	count( id ) AS count,
	DATE_FORMAT( create_time, '%Y-%m-%d' ) AS date 
FROM
	`custom` 
WHERE
	create_time >= DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) 
	AND create_time <= DATE_ADD( CURRENT_DATE, INTERVAL 1 DAY )  
GROUP BY
	date

左连接

当天没有客户的，默认数量0

select t.date,IFNULL(count,0) as count from (
select DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 5 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 4 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 3 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 2 DAY ) as date from DUAL
UNION ALL
select DATE_SUB( CURRENT_DATE, INTERVAL 1 DAY ) as date from DUAL
UNION ALL
select CURRENT_DATE as date from DUAL ) as t
left JOIN
(SELECT
	count( id ) AS count,
	DATE_FORMAT( create_time, '%Y-%m-%d' ) AS date 
FROM
	`custom` 
WHERE
	create_time >= DATE_SUB( CURRENT_DATE, INTERVAL 6 DAY ) 
	AND create_time <= DATE_ADD( CURRENT_DATE, INTERVAL 1 DAY )  
GROUP BY
	date) as tt on t.date = tt.date ORDER BY t.date asc