Vue.js ECharts使用

一、介绍

        ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。ECharts 提供了丰富的图表类型和交互能力,使用户能够通过简单的配置生成各种各样的图表,包括但不限于折线图、柱状图、散点图、饼图、雷达图、地图等。安装方式:

  • CDN: https://cdn.staticfile.net/echarts/4.3.0/echarts.min.js
  • NPM:npm install echarts --save

二、使用echarts展示每日网站访问量

        通过查询登录日志表展示为如下样式:

        前端vue代码,一共有两个分别是每日访问量的折线图和性别人数的柱状图。访问量请求后端数据,性别则使用了假数据。

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
import api from "@/axios";const loginLogChartDiv = ref();
const genderChartDiv = ref();onMounted(() => {initLoginLogECharDiv(); // 网站访问量initGenderChart(); // 员工性别对比图
})function initLoginLogECharDiv() {const myChart = echarts.init(loginLogChartDiv.value);// 图标初始化let dateList = [];let countList = [];api({url: '/selLoginLogChart'}).then(resp => {dateList = resp.data.dateList;countList = resp.data.countList.map(Number);// 需要在后端获取数据之后绘制图表myChart.setOption({title: {text: '网站访问量'},tooltip: {},xAxis: {data: dateList},yAxis: {},series: [{name: '访问量',type: 'line',data: countList}]});});
}function initGenderChart() {const myChart = echarts.init(genderChartDiv.value);// 图标初始化
// 绘制图表myChart.setOption({title: {text: '员工性别对比图'},tooltip: {},xAxis: {data: ['男', '女']},yAxis: {},series: [{name: '人数',type: 'bar',data: [5, 20]}]});
}</script><template><el-row><el-col :span="24"><div ref="loginLogChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div></el-col></el-row><el-row><el-col :span="12"><div ref="genderChartDiv" :style="{ float: 'left', width: '100%', height: '350px' }"></div></el-col><el-col :span="12"></el-col></el-row></template><style scoped></style>

        业务层逻辑处理

@Overridepublic Map<String, List<String>> selLoginLogChart(String s) {List<Map<String, Object>> list = logoMapper.selLoginLogChart(s);// 查询结果是Date类型,需要格式化SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");Map<String, List<String>> resultMap = new HashMap<>();List<String> dateList = new ArrayList<>();List<String> countList = new ArrayList<>();for (Map<String, Object> map : list) {dateList.add(dateFormat.format(map.get("date")));countList.add(map.get("count") + "");}resultMap.put("dateList", dateList);resultMap.put("countList", countList);return resultMap;}

        sql语句,因为日期是年月日时分秒,所以需要使用DATE()提取出年月日进行分组查询。

<select id="selLoginLogChart" resultType="java.util.Map">select DATE(logintime) as date, count(*) as countfrom loginlogwhere logintime >= #{s}group by date</select>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/24776.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

02Linux文件,目录,过滤,管道常用命令

Linux基础概述 Linux基础目录 Linux没有盘符这个概念, 只有一个顶级根目录 /, 所有文件都在它下面 在Windows系统中路径之间的层级关系使用/来表示在Linux系统中路径之间的层级关系使用/来表示,出现在开头的/表示根目录, /home/a.txt表示根目录下的home文件夹内有a.txt文件 …

微服务开发与实战Day03

一、导入黑马商城项目 资料文档&#xff1a;Docs 1. 安装MySQL ①删除root目录下的mysql rm -rf mysql/ ②把课前资料里的mysql目录上传到root目录下 ③创建一个通用网络 docker network create hm-net ④使用下面的命令安装MySQL docker run -d \--name mysql \-p 330…

C++ OpenCV 图像分类魔法:探索神奇的模型与代码

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

TensorFlow2.x基础与mnist手写数字识别示例

文章目录 Github官网文档Playground安装声明张量常量变量 张量计算张量数据类型转换张量数据维度转换ReLU 函数Softmax 函数卷积神经网络训练模型测试模型数据集保存目录显示每层网络的结果 TensorFlow 是一个开源的深度学习框架&#xff0c;由 Google Brain 团队开发和维护。它…

IP纯净度是什么,对用户有多么重要?

在网络应用和数据采集等领域&#xff0c;代理IP被广泛使用&#xff0c;而代理IP的纯净度则直接影响其性能和可用性。代理IP的纯净度主要涉及到代理IP在网络传输过程中的稳定性、匿名性和安全性。今天就带大家一起了解代理IP纯净度对用户的重要性。 第一&#xff0c;保护用户的隐…

Android Ble低功耗蓝牙开发

一、新建项目 在Android Studio中新建一个项目&#xff0c;如下图所示&#xff1a; 选择No Activity&#xff0c;然后点击Next 点击Finish&#xff0c;完成项目创建。 1、配置build.gradle 在android{}闭包中添加viewBinding&#xff0c;用于获取控件 buildFeatures {viewB…

Flutter基础 -- Flutter容器布局

目录 1. MaterialApp 1.1 组件定义 1.2 主要功能和属性 1.3 示例 2. 脚手架 Scaffold 2.1 定义 2.2 Scaffold 的属性 2.3 示例 PS: 对于 Scaffold 和 MaterialApp 3. 线性布局 Column Row 3.1 Row 3.2 Column 4. 盒模型 Box Model 4.1 定义 4.2 示例 5. 容器 C…

数据结构及研究

**数据结构是计算机存储、组织数据的方式&#xff0c;它是相互之间存在一种或多种特定关系的数据元素的集合**Θic-1ΘΘic-2ΘΘic-3ΘΘic-4ΘΘic-5Θ。 数据结构这一概念在计算机科学领域扮演着至关重要的角色&#xff0c;它不仅决定了数据在计算机内部的存储方式&#xf…

Block Transformer:通过全局到局部的语言建模加速LLM推理

在基于transformer的自回归语言模型&#xff08;LMs&#xff09;中&#xff0c;生成令牌的成本很高&#xff0c;这是因为自注意力机制需要关注所有之前的令牌&#xff0c;通常通过在自回归解码过程中缓存所有令牌的键值&#xff08;KV&#xff09;状态来解决这个问题。但是&…

计算机组成结构—IO方式

目录 一、程序查询方式 1. 程序查询基本流程 2. 接口电路 3. 接口工作过程 二、程序中断方式 1. 程序中断基本流程 2. 接口电路 3. I/O 中断处理过程 三、DMA 方式 1. DMA 的概念和特点 2. DMA 与 CPU 的访存冲突 3. DMA 接口的功能 4. DMA 接口的组成 5. DMA 的…

Elasticsearch 认证模拟题 - 15

一、题目 原索引 task1 的字段 title 字段包含单词 The&#xff0c;查询 the 可以查出 1200 篇文档。重建 task1 索引为 task1_new&#xff0c;重建后的索引&#xff0c; title 字段查询 the 单词&#xff0c;不能匹配到任何文档。 PUT task1 {"mappings": {"…

机器学习----奥卡姆剃刀定律

奥卡姆剃刀定律&#xff08;Occam’s Razor&#xff09;是一条哲学原则&#xff0c;通常表述为“如无必要&#xff0c;勿增实体”&#xff08;Entities should not be multiplied beyond necessity&#xff09;或“在其他条件相同的情况下&#xff0c;最简单的解释往往是最好的…

Qt基于SQLite数据库的增删查改demo

一、效果展示 在Qt创建如图UI界面&#xff0c;主要包括“查询”、“添加”、“删除”、“更新”&#xff0c;四个功能模块。 查询&#xff1a;从数据库中查找所有数据的所有内容&#xff0c;并显示在左边的QListWidget控件上。 添加&#xff1a;在右边的QLineEdit标签上输入需…

pc之间的相互通信详解

如图&#xff0c;实现两台pc之间的相互通信 1.pc1和pc2之间如何进行通讯。 2.pc有mac和ip&#xff0c;首先pc1需要向sw1发送广播&#xff0c;sw1查询mac地址表&#xff0c;向router发送广播&#xff0c;router不接受广播&#xff0c;router的每个接口都有ip和mac&#xff0c;…

使用 Scapy 库编写 TCP SYN 洪水攻击脚本

一、介绍 TCP SYN 洪水攻击是一种拒绝服务攻击&#xff08;Denial-of-Service, DoS&#xff09;类型&#xff0c;攻击者通过向目标服务器发送大量的伪造TCP连接请求&#xff08;SYN包&#xff09;&#xff0c;消耗目标服务器的资源&#xff0c;导致其无法处理合法用户的请求。…

13. ESP32-HTTPClient(Arduino)

使用ESP32 Arduino框架的HTTPClient库进行HTTP请求 在ESP32开发里&#xff0c;网络通信是挺重要的一部分&#xff0c;你可能需要从服务器拿数据啊&#xff0c;或者把传感器数据发到云端什么的。不过别担心&#xff0c;ESP32 Arduino框架给我们提供了HTTPClient库&#xff0c;让…

力扣 有效的括号 栈

Problem: 20. 有效的括号 文章目录 思路复杂度&#x1f49d; Code 思路 &#x1f468;‍&#x1f3eb; 参考地址 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( n ) O(n) O(n) &#x1f49d; Code class Solution {static Map<Character, Character> m…

【启明智显分享】基于工业级芯片Model3A的7寸彩色触摸屏应用于智慧电子桌牌方案

一场大型会议的布置&#xff0c;往往少不了制作安放参会人物的桌牌。制作、打印、裁剪&#xff0c;若有临时参与人员变更&#xff0c;会务方免不了手忙脚乱更新桌牌。由此&#xff0c;智能电子桌牌应运而生&#xff0c;工作人员通过系统操作更新桌牌信息&#xff0c;解决了传统…

电脑提示msvcp140.dll丢失的解决方法(附带详细msvcp140.dll文件分析)

msvcp140.dll是一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;属于Microsoft Visual C 2015 Redistributable的一部分。它全称为 "Microsoft C Runtime Library" 或 "Microsoft C Runtime Library"&#xff0c;表明该文件是微软C运行时库的一…

uniapp录音播放功能

ui效果如上。 播放就开始倒计时&#xff0c;并且改变播放icon&#xff0c;另外录音则停止上一次录音。 播放按钮&#xff08;三角形&#xff09;是播放功能&#xff0c;两竖是暂停播放功能。 const innerAudioContext wx.createInnerAudioContext();export default{data(){ret…