项目中的Echarts图表统计

这篇具有很好参考价值的文章主要介绍了项目中的Echarts图表统计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前情提要:本次Echarts数据可视化基于图书管理系统设计

一、Echarts

Echarts是一个开源的可视化图表库,由百度前端技术部开发维护。它基于JavaScript语言实现,通过简单的配置即可生成丰富多样的图表,包括柱状图、折线图、饼图等等。Echarts支持各种数据格式,如JSON、XML、CSV等,同时也提供了强大的交互功能,可以让用户在图表上进行缩放、平移、标记等操作。Echarts还有丰富的扩展插件和主题,方便用户根据不同需求进行自定义定制。Echarts的优点在于使用简单、灵活性高、可定制性强,并且提供了完善的文档和API参考,方便开发人员快速上手和开发。

二、前端(Vue+Echarts)

Echarts下载:npm i echarts -S

HomeView.vue(完整代码)

<template>
  <div>
    <div style="margin: 20px 0">
      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-card>
      <div id="line" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import request from "@/utils/request";
import * as echarts from 'echarts'

const option = {
  title: {
    text: '图书借还统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['借书数量', '还书数量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []  //从后台动态获取
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '借书数量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: []    //从后台动态获取
    },
    {
      name: '还书数量',
      type: 'line',
      smooth: true,
      data: []   //从后台动态获取
    }
  ]
}

  export default {
    data() {
      return {
        admin: Cookies.get('admin') ? JSON.parse(Cookies.get('admin')) : {},
        lineBox: null,
        timeRange: 'week',
        options: [
          {label: '最近一周', value: 'week'},
          {label: '最近一个月', value: 'month'},
          {label: '最近两个月', value: 'month2'},
          {label: '最近三个月', value: 'month3'},
        ]
      }
    },
    mounted() {  // 等页面元素全部初始化好才开始加载mounth()函数
      this.load()
    },
    methods: {
      load() {
        if (!this.lineBox) {
          this.lineBox = echarts.init(document.getElementById('line'))  //初始化echarts容器
        }
        //从后台获取数据
        request.get('/borrow/lineCharts/' + this.timeRange).then(res => {
          option.xAxis.data = res.data.date
          option.series[0].data = res.data.borrow
          option.series[1].data = res.data.retur
          this.lineBox.setOption(option)  //设置容器的属性值,当数据重新发生变化时,一定要重新setOption()
        })
      }
    }
  }
</script>

<style>
.input {
  width: 300px;
}
</style>

1、导入echarts

import * as echarts from 'echarts'

2、原始的option代码

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

3、修改

目录:

text: '图书借还统计

折线:

 legend: {
    data: ['借书数量', '还书数量']
  },

横坐标:

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },

纵坐标:

  yAxis: {
    type: 'value'
  },

series(与相应折线legend对应)

series: [
    {
      name: '借书数量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: []
    },
    {
      name: '还书数量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: []
    }
  ]

4、定义echart图标对应的dom元素
html

    <el-card>
      <div id="line" style="width: 100%; height: 400px"></div>
    </el-card>

项目中的Echarts图表统计项目中的Echarts图表统计5、定义echarts容器
js

    data() {
      return {
        lineBox: null,
      }
    }

6、根据时间范围加载最新的数据
html

    <div style="margin: 20px 0">
      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>

js

    mounted() {  // 等页面元素全部初始化好才开始加载mounth()函数
      this.load()
    },
    methods: {
      load() {
        if (!this.lineBox) {
          this.lineBox = echarts.init(document.getElementById('line'))  //初始化echarts容器
        }
        //从后台获取数据
        request.get('/borrow/lineCharts/' + this.timeRange).then(res => {
          option.xAxis.data = res.data.date
          option.series[0].data = res.data.borrow
          option.series[1].data = res.data.retur
          this.lineBox.setOption(option)  //设置容器的属性值,当数据重新发生变化时,一定要重新setOption()
        })
      }
    }

三、后端(SpringBoot+MyBatis)

1、请求接口
项目中的Echarts图表统计2、返回前端的数据
项目中的Echarts图表统计

BorrowController.java

    //timeRange:week、month、month2、month3
    @GetMapping("/lineCharts/{timeRange}")
    public Result lineCharts(@PathVariable String timeRange) {
        return Result.success(borrowService.getCountByTimeRange(timeRange));
    }

IBorrowService.java

Map<String, Object> getCountByTimeRange(String timeRange);

BorrowService.java

导入
import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.date.DateField;
import cn.hutool.core.date.DateTime;
import cn.hutool.core.date.DateUtil;

Java工具类库Hutool 提供的方法:
DateUtil.rangeToList() 返回从开始时间到结束时间的一个时间范围 返回类型 List < DateTime >
DateUtil.offsetDay() 计算时间的一个工具方法 返回类型 DateTime

通过自定义函数 datetimeToDateStr()DateTime类型 的 List 转换成一个 String类型 的 List
原因是前端里 “data”:[ ]、“return”:[ ]、“borrow”:[ ] 数组存储的是String类型的元素
项目中的Echarts图表统计

    @Override
    public Map<String, Object> getCountByTimeRange(String timeRange) {
        Map<String, Object> map = new HashMap<>();
        Date today = new Date();
        List<DateTime> dateRange;
        switch (timeRange) {
            case "week":
                dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -6), today, DateField.DAY_OF_WEEK);
                break;
            case "month":
                dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -29), today, DateField.DAY_OF_MONTH);
                break;
            case "month2":
                dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -59), today, DateField.DAY_OF_MONTH);
                break;
            case "month3":
                dateRange = DateUtil.rangeToList(DateUtil.offsetDay(today, -89), today, DateField.DAY_OF_MONTH);
                break;
            default:
                dateRange = new ArrayList<>();
        }
        List<String> dateStrRange = datetimeToDateStr(dateRange);
        map.put("date", dateStrRange); // x轴的时间日期数据生成完毕
        //1 borrow  2 retrun
        //getCountByTimeRange:不会统计数据库没有的日期,比如没有2022.11.4,他不会返回 **data=2022-11-04,count=0**
        List<BorrowReturCountPO> borrowCount = borrowMapper.getCountByTimeRange(timeRange, 1);
        List<BorrowReturCountPO> returnCount = borrowMapper.getCountByTimeRange(timeRange, 2);
        map.put("borrow", countList(borrowCount, dateStrRange));
        map.put("retur", countList(returnCount, dateStrRange));
        return map;
    }

注意:
getCountByTimeRange sql语句:不会统计数据库没有的日期,比如没有2022.11.4,他不会返回 data=2022-11-04,count=0 这个数据,所以又写countList()函数对在统计数据库时其中不存在的数据进行处理

datetimeToDateStr()函数

把 DateTime类型 的 List 转换成一个 String类型 的 List

    private List<String> datetimeToDateStr(List<DateTime> dateTimeList) {
        List<String> list = CollUtil.newArrayList();
        if (CollUtil.isEmpty(dateTimeList)) {
            return list;
        }
        for (DateTime dateTime : dateTimeList) {
            String date = DateUtil.formatDate(dateTime);
            list.add(date);
        }
        return list;
    }

countList()函数

1、对在统计数据库时其中不存在的数据进行处理
2、.map(BorrowReturCountPO::getCount) 取出对象里的count值
3、有就取出,没有就.orElse(0)对没匹配的数据返回 0

    private List<Integer> countList(List<BorrowReturCountPO> countPOList, List<String> dateRange) {
        List<Integer> list = CollUtil.newArrayList();
        if (CollUtil.isEmpty(countPOList)) {
            return list;
        }
        for (String date : dateRange) {
            Integer count = countPOList.stream().filter(countPO -> date.equals(countPO.getDate()))
                    .map(BorrowReturCountPO::getCount).findFirst().orElse(0);
            list.add(count);
        }
       /*    "date": [
                    "2023-06-01",
                    "2023-06-02",
                    "2023-06-03",
                    "2023-06-04",
                    "2023-06-05",
                    "2023-06-06",
                    "2023-06-07"
        ],
            "retur": [
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    2
        ],
            "borrow": [
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    3
        ]*/
        return list;
    }

BorrowReturCountPO(自定义类封装)

@Data
public class BorrowReturCountPO {
    private String date;
    private Integer count;
}

BorrowMapper.java

    List<BorrowReturCountPO> getCountByTimeRange(@Param("timeRange") String timeRange, @Param("type") int type);  // 1 borrow  2 return

Borrow.xml

1、DATE_FORMAT(createtime,‘%Y-%m-%d’) :把DateTime类型的数据格式化为 yyyy-MM-dd
2、getCountByTimeRange sql语句:如果是1查 borrow表,2查 return表
3、DATE_SUB(NOW(),INTERVAL 1 WEEK) :数据库进行时间计算的函数(对当前的时间减去一周)文章来源地址https://www.toymoban.com/news/detail-474899.html

    <select id="getCountByTimeRange" resultType="com.example.springboot.mapper.po.BorrowReturCountPO">
        select count(id) as count, DATE_FORMAT(createtime,'%Y-%m-%d') as date from
        <if test="type == 1">
            borrow
        </if>
        <if test="type == 2">
            retur
        </if>
        where
        <choose>
            <when test="timeRange == 'week'">
                createtime >=  DATE_SUB(NOW(),INTERVAL 1 WEEK)
            </when>
            <when test="timeRange == 'month'">
                createtime >=  DATE_SUB(NOW(),INTERVAL 1 MONTH)
            </when>
            <when test="timeRange == 'month2'">
                createtime >=  DATE_SUB(NOW(),INTERVAL 2 MONTH)
            </when>
            <when test="timeRange == 'month3'">
                createtime >=  DATE_SUB(NOW(),INTERVAL 3 MONTH)
            </when>
            <otherwise>
                createtime > now()
            </otherwise>
        </choose>
        group by date
    </select>

到了这里,关于项目中的Echarts图表统计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3项目中使用ECharts图表并实现自适应效果

    在项目中输入如下代码: 安装完成可以在package.json中看到: 创建ECharts图表的文件barCharts.vue,将它引入并在父组件中使用。在使用setup时,我们把组件直接引入进来,就可以直接使用了,不用像Vue2那样需要注册了。 在父组件中创建一个有宽高的容器,里面放ECharts组件,ECh

    2024年02月03日
    浏览(50)
  • ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    Documentation - Apache ECharts 字符串模板的相识变量使用(不同的图表对应都有对应的变量): Documentation - Apache ECharts 具体详细使用可以点^^^链接查看: 你只需要创建一个 div id =\\\"xjzbChart\\\"/div 然后 获取 xjzbChart = echarts.init(document.getElementById(\\\'xjzbChart\\\')); 在 series数组里面创建两个图表对象

    2024年02月13日
    浏览(44)
  • uniapp+vue3+ts+vite+echarts开发图表类小程序,将echarts导入项目使用的详细步骤,耗时一天终于弄好了

    想在uniapp和vue3环境中使用echarts是一件相当前卫的事情,官方适配的还不是很好,echarts的使用插件写的是有些不太清晰的,这里我花费了一天的时间,终于将这个使用步骤搞清楚了,并且建了一个仓库,大家可以直接clone下来使用。先看一下pc端和小程序端的效果: 微信小程

    2024年02月05日
    浏览(87)
  • Java项目-苍穹外卖-Day11-Apache ECharts数据统计

    主要是以下四项的统计,以不同形式的图形进行展示 自己去网站上看一哈,我不太懂前端 com.sky.controller.admin.ReportController com.sky.service.impl.ReportServiceImpl.java orderMapper orderMapper.xml Reportcontroller ReportServiceImpl orderMapper.xml reportController ReportServiceImpl orderMapper.xml

    2024年02月09日
    浏览(43)
  • web前端之若依项目窗口大小改变或侧边栏伸缩时echarts图表自适应、封装执行文件和模板文件、展开、折叠、ApacheECharts、KeepAlive、RouterView、deactivated

    如需完整代码请WX私聊: MJ682517 没有任何套路,直接发代码 在 vue 项目中,窗口大小不变(排除window的resize监听),侧边菜单栏折叠展开,导致右边内容区域宽度变化, echarts 图表不会自适应。常规解决办法的是使用window.addEventListener(“resize”)来监听窗口变化,但当前窗口大小并

    2024年02月01日
    浏览(46)
  • vue-echarts踩坑,本地开发可以渲染echarts图表,线上环境图表渲染不出来

    main.js 全局注册v-chart组件 在页面中使用 如上图,我开始写的静态数据,在data中定义了chartOption1:{…配置项…}, 在接口数据返回之后,更新了配置项,在本地开发环境可以正常渲染。但是线上环境出不来,也不报错,接口数据一切正常。 解决办法: 无奈最后没有使用‘vue-e

    2024年01月18日
    浏览(49)
  • 【ECharts系列】ECharts 图表渲染问题&解决方案

    echats 渲染,第一次的时候只出现Y轴数值,不出现X轴数值,切换下页面,X轴数值就能出现。  如果在使用ECharts渲染时,X轴数值只在切换页面后才出现,可能是因为ECharts在初始化时没有正确计算X轴的尺寸。 以下是可能的原因和解决方法: 数据格式不正确 没有设置X轴的类型

    2024年02月12日
    浏览(45)
  • 图表库-Echarts

    一. Echarts 1. 概述 常见的数据可视化库: D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等

    2023年04月18日
    浏览(42)
  • Echarts实现3d图表

    注意:在使用一些3d类的echart的时候会发现报下面的错误  这个是因为echarts引用3d图形需要引入echarts和echarts-gl (这里我们可能会遗漏掉引入echarts-gl) 要注意不同版本echarts对应不同版本echarts-gl 【如果版本不匹配就重新安装对应版版本】

    2024年02月16日
    浏览(36)
  • Vue+Echarts图表动态适配

    目录 前言 一、问题背景 二、解决方案 1.在Vue组件中引入Echarts 2.初始化图表 3.监听resize事件 4.销毁图表 三、优化方案 1.防抖 2.节流 四、总结 在实际的前端开发过程中,动态适配是一个非常重要的问题。在数据可视化的场景下,图表的动态适配尤为重要。在本篇博客中,我们

    2024年02月05日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包