vue前端Echars

<template><div :class="className" :style="{height:height,width:width}" />
</template><script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme  柱状图
import resize from './mixins/resize'
import { insertUserList } from "@/api/system/user";const animationDuration = 6000export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '300px'}},data() {return {chart: null,sevenDays: [],newUsers:[],date:[]}},mounted() {this.$nextTick(() => {this.initChart()})this.getSevenDays();//this.getList();},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {//近七天getSevenDays() {const today = new Date();const sevenDays = [];for (let i = 0; i < 7; i++) {const date = new Date(today);date.setDate(today.getDate() - i);sevenDays.push(date.toISOString().split('T')[0]);}this.sevenDays = sevenDays;},//获取新增用户值//getList() {// },initChart() {this.chart = echarts.init(this.$el, 'macarons')insertUserList().then(response => {let insertUserList = response.data;for (let i = 0; i < insertUserList.length; i++) {this.newUsers.push(insertUserList[i].newUsers);this.date.push(insertUserList[i].date);}console.log("insertUserList:"+this.newUsers);this.chart.setOption({tooltip: {trigger: 'axis',axisPointer: { // 坐标轴指示器,坐标轴触发有效type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'}},grid: {top: 10,left: '2%',right: '2%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: this.date,axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value',axisTick: {show: false,}}],series: [{color: "#c23616",name: '新增用户',type: 'bar',stack: 'vistors',barWidth: '60%',data: this.newUsers,animationDuration}, // {//   color: "#c23616",//   name: '活跃用户',//   type: 'bar',//   stack: 'vistors',//   barWidth: '60%',//   data: [80, 52, 200, 334, 390, 330, 220],//   animationDuration// }]})});}}
}
</script><template><div :class="className" :style="{ height: height, width: width }" />
</template><script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme  折线图
import resize from './mixins/resize'
import { pagingUserExam, isPassed, listUserExam, getUserExam, delUserExam, addUserExam, updateUserExam } from "@/api/exam/userExam";
export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '350px'},autoResize: {type: Boolean,default: true},chartData: {type: Object,required: true}},data() {return {chart: null,sevenDays: [],passedCount: [],failedCount: [],updateTime: [],// 查询参数queryParams: {pageNum: 1,pageSize: 100,deptId: undefined},}},watch: {chartData: {deep: true,handler(val) {this.setOptions(val)}}},mounted() {this.$nextTick(() => {this.initChart()})this.getSevenDays();//this.getList(); },beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {//近七天getSevenDays() {const today = new Date();const sevenDays = [];for (let i = 0; i < 7; i++) {const date = new Date(today);date.setDate(today.getDate() - i);sevenDays.push(date.toISOString().split('T')[0]);}this.sevenDays = sevenDays;},initChart() {this.chart = echarts.init(this.$el, 'macarons')this.setOptions(this.chartData)},setOptions({ } = {}) {isPassed().then(response => {let projectList = response.data;for (let i = 0; i < projectList.length; i++) {this.passedCount.push(projectList[i].passedCount);this.failedCount.push(projectList[i].failedCount);this.updateTime.push(projectList[i].date);}console.log("updateTime");console.log(this.updateTime);this.chart.setOption({xAxis: {data: this.updateTime,boundaryGap: false,axisTick: {show: false}},grid: {left: 10,right: 10,bottom: 20,top: 30,containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'},padding: [5, 10]},yAxis: {axisTick: {show: false}},legend: {data: ['通过人数', '不通过人数']},series: [{name: '通过人数', itemStyle: {normal: {color: '#FF005A',lineStyle: {color: '#FF005A',width: 2}}},smooth: false,type: 'line',data: this.passedCount,animationDuration: 2800,animationEasing: 'cubicInOut'},{name: '不通过人数',smooth: false,type: 'line',itemStyle: {normal: {color: '#3888fa',lineStyle: {color: '#3888fa',width: 2},areaStyle: {color: '#f3f8ff'}}},data: this.failedCount,animationDuration: 2800,animationEasing: 'quadraticOut'}]})});}}
}
</script>

在这里插入图片描述

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

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

相关文章

禁用USB端口的办法,哪一种禁用USB端口的方法好

禁用USB端口的办法&#xff0c;哪一种禁用USB端口的方法好 禁用USB端口是保护公司数据安全的一种常见做法&#xff0c;旨在防止未经授权的数据传输和潜在的恶意软件传播。以下是几种常见的禁用USB端口方法及其效果评价。 1、硬件方法&#xff1a; BIOS设置&#xff1a;通过BIO…

混合动力电动汽车介绍(一)

电动汽车发展的技术背景主要包含环境问题和能源问题两大方面。环境问题的表现形式为空气污染&#xff0c;而能源问题的表现形式为现有能源供应体系对化石燃料的过分依赖。《新能源汽车产业发展规划&#xff08;2021-2035&#xff09;》中明确我国新能源汽车技术研发的“三纵”、…

软件架构设计属性之5:可维护性属性分析与应用

文章目录 引言一、可维护性定义和重要性1.1 定义1.2 重要性 二、可维护性关键要素2.1 模块化2.2 单一职责2.3 低耦合2.4 高内聚2.5 抽象和封装2.6 实践建议 三、设计原则3.1 开闭原则3.2 依赖倒置原则3.3 评估方法3.4 挑战与解决方案 四、实战应用总结 引言 在当今数字化飞速发…

一文了解JVM面试篇(上)

Java内存区域 1、如何解释 Java 堆空间及 GC? 当通过 Java 命令启动 Java 进程的时候,会为它分配内存。内存的一部分用于创建 堆空间,当程序中创建对象的时候,就从对空间中分配内存。GC 是 JVM 内部的一 个进程,回收无效对象的内存用于将来的分配。 2、JVM 的主要组成…

NextJs 数据篇 - 数据获取 | 缓存 | Server Actions

NextJs 数据篇 - 数据获取 | 缓存 | Server Actions 前言一. 数据获取 fetch1.1 缓存 caching① 服务端组件使用fetch② 路由处理器 GET 请求使用fetch 1.2 重新验证 revalidating① 基于时间的重新验证② 按需重新验证revalidatePathrevalidateTag 1.3 缓存的退出方式 二. Ser…

windows操作系统提权之服务提权实战rottenpotato

RottenPotato&#xff1a; 将服务帐户本地提权至SYSTEM load incognito list_tokens –u upload /home/kali/Desktop rottenpotato.exe . execute -Hc -f rottenpotato.exe impersonate_token "NT AUTHORITY\SYSTEM" load incognito 这条命令用于加载 Metasploi…

【Linux】在Windows环境下配置两台Linux机器的文件互传

相信有很多云服务器小伙伴都有想把一台linux资源传到另一台机器&#xff0c;那么该怎样实现&#xff1f; 本篇文章的演示案例都是基于centous进行传输&#xff0c;ubuntu进行接收&#xff01; 别的方法也都是一样的&#xff01; 方法一&#xff08;基于xshell进行的压缩包win…

Java项目:92 基于SSM的办公管理系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 基于SSM的办公管理系统 1、项目介绍 基于SSM的办公管理系统主要是对于办公用品的申领进行管理&#xff0c;系统分为三种角色&#xff0c;超级管理员、企业 职…

利用WMI横向移动

一. WMI介绍和使用 1. WMI介绍 WMI是Windows在Powershell还未发布前&#xff0c;微软用来管理Windows系统的重要数据库工具&#xff0c;WMI本身的组织架构是一个数据库架构&#xff0c;WMI 服务使用 DCOM或 WinRM 协议, 在使用 wmiexec 进行横向移动时&#xff0c;windows 操…

vue中使用svg图像

一 、svg图像是什么 SVG&#xff08;可缩放矢量图形&#xff09;是一种图像格式&#xff0c;它以XML文档的形式存在&#xff0c;用以描述图像中的形状、线条、文本和颜色等元素。由于其基于矢量的特性&#xff0c;SVG图像在放大或改变尺寸时能够保持图形质量不受影响。这种格式…

Java 异步编编程——Java内置线程池(Executor 线程池)

文章目录 知道线程池是什么以及解决什么问题Java 内置线程池Java 内置线程池设计结构及执行机制ThreadPoolExecutor 中的概念生命周期核心参数阻塞队列4 种任务拒绝策略 线程池使用场景 知道线程池是什么以及解决什么问题 线程池&#xff08;Thread Pool&#xff09;是一种基于…

devicemotion 或者 deviceorientation在window.addEventListener 事件中不生效,没有输出内容

问题&#xff1a;devicemotion 或者 deviceorientation 在window.addEventListener 事件中不生效&#xff0c;没有输出内容 原因&#xff1a; 1、必须在Https协议下才可使用 2、必须用户手动点击click事件中调用 &#xff0c;进行权限申请 源码&#xff1a; <!DOCTYPE h…

JVM 虚拟机

JVM 是 Java Virtual Machine 的简称&#xff0c;意为 Java 虚拟机&#xff0c;虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机有&#xff1a;JVM、VMwave、Virtual Box等。JVM 是一台被定制过的现实当中不存在的计算…

行政工作如何提高效率?桌面备忘录便签软件哪个好

在行政管理工作中&#xff0c;效率的提高无疑是每个行政人员都追求的目标。而随着科技的发展&#xff0c;各种便捷的工具也应运而生&#xff0c;其中桌面备忘录便签软件便是其中的佼佼者。那么&#xff0c;这类软件又如何帮助我们提高工作效率呢&#xff1f; 首先&#xff0c;…

SqlServer还原系统库步骤及问题解决

还原master 需要切换到binn目录 Cd C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\Binn 关闭服务 用单用户模式启动 SQL Server 默认实例 sqlservr.exe -m 直接单用户登录 恢复master备份文件 RESTORE DATABASE master FROM DISK E:\dbbak\txic_ke…

react 表格实现拖拽功能

项目背景 : react ant 单纯实现拖拽确实不难 , 我的需求是根据后台接口返回 , 生成对应的父子表格 , 并只可以拖拽子的位置 , 如图 后台返回的数据结构 (pid为0说明是父 , 子的pid等于父的id , 说明是父的子) 1 , 我先转成了树形结构且自己加上了key (注意 : key一定得是唯一的…

Resilience4j结合微服务出现的异常

Resilience4j结合微服务出现的异常 1、retry未生效 由于支持aop&#xff0c;所以要引入aop的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>2、circ…

6. C++通过fork的方式实现高性能网络服务器

我们上一节课写的tcp我们发现只有第一个与之连接的人才能收发信息。他又很多的不足 高性能网络服务器 通过fork实现高性能网络服务器 我们通过fork进行改装之后就可以成百上千的用户进行连接访问&#xff0c;对于每一个用户来说我们都fork一个子进程。让后让每一个子进程都是…

人大金仓数据库大小写不敏感确认

1、图形化确认(管理—其他选项—预设选项) 2、命令行确认 # ksql -p 54321 -U system test # show enable_ci; 查看是否大小写敏感&#xff0c;on表示大小敏感&#xff0c;off表示大小写不敏感&#xff0c;使用某些项目的时候&#xff0c;需要设置数据库大小写不敏感&#…

全网唯一:触摸精灵iOS版纯离线本地文字识别插件

目的 触摸精灵iOS是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务&#xff0c;节省大量人工操作的时间。但触摸精灵的图色功能比较单一&#xff0c;无法识别屏幕上的图像&#xff0c;根据图像的变化自动执行相应的操作。本篇文章主要…