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 = 6000

export 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

win10环境下nodejs安装过程

打开 https://nodejs.org/en/官网下载node.js 2.下载完成后的安装文件为node-v16.16.0-x64.msi&#xff0c;双击进行安装即可。 3.一直默认安装&#xff0c;记得可以更改安装路径 4.其他不用打勾&#xff0c;一直next&#xff0c;安装完成即可。 5.安装完成后&#xff0c;wi…

AI在线UI代码生成,不需要敲一行代码,聊聊天,上传图片,就能生成前端页面的开发神器

ioDraw的在线UI代码生成器是一款开发神器&#xff0c;它可以让您在无需编写一行代码的情况下创建前端页面。 主要优势&#xff1a; 1、极简操作&#xff1a;只需聊天或上传图片&#xff0c;即可生成响应式的Tailwind CSS代码。 2、节省时间&#xff1a;自动生成代码可以节省大…

【论文复现|智能算法改进】融合黑寡妇思想的蜣螂优化算法

目录 1.算法原理2.改进点3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】蜣螂优化算法&#xff08;DBO&#xff09;原理及实现 2.改进点 ICMIC混沌映射 z n 1 sin ⁡ ( α z n ) , α ∈ ( 0 , ∞ ) (1) z_{n1}\sin(\frac{\alpha}{z_n}),\alpha\in(0,\infty)\ta…

3D目标检测入门:探索OpenPCDet框架

前言 在自动驾驶和机器人视觉这两个飞速发展的领域中&#xff0c;3D目标检测技术扮演着核心角色。随着深度学习技术的突破性进展&#xff0c;3D目标检测算法的研究和应用正日益深入。OpenPCDet&#xff0c;这个由香港中文大学OpenMMLab实验室精心打造的开源工具箱&#xff0c;…

【六一儿童节】的科技奇幻旅程:解锁【机器学习】与【人工智能】的无限创意

目录 一、机器学习与人工智能简介 二、六一儿童节的特殊意义 三、项目概述&#xff1a;智能绘画助手 四、技术栈和工具 五、数据准备 六、模型训练 1. 数据预处理 2. 构建和训练模型 七、智能绘画助手的实现 1. 搭建Flask应用 2. 客户端界面 八、扩展功能与优化 1…

SQL面试题001--图文并茂解答连续登录问题

连续登录问题是经典问题&#xff0c;今天做下总结。首先对原数据进行处理成客户和日期是不重复的&#xff0c;且日期是 yyyy-MM-dd 格式&#xff0c;这样好使用日期相关的函数。 本文参考在文末&#xff0c;增加了图表&#xff0c;更加容易理解。 表&#xff1a;temp01_cust_…

从0开始制作微信小程序

目录 前言 正文 需要事先准备的 需要事先掌握的 什么是uniapp 平台应用的分类方式 什么是TypeScript 创建项目 项目文件作用 源码地址 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1…

[数据集][目标检测]旋风检测数据集VOC+YOLO格式157张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;159 标注数量(xml文件个数)&#xff1a;159 标注数量(txt文件个数)&#xff1a;159 标注类别…

代码随想录算法训练营第十一天| 20. 有效的括号、1047. 删除字符串中的所有相邻重复项、150. 逆波兰表达式求值

20. 有效的括号 题目链接&#xff1a;20. 有效的括号 文档讲解&#xff1a;代码随想录 状态&#xff1a;so easy 思路&#xff1a; 使用栈&#xff0c;如果是左括号就入栈&#xff0c;如果是右括号则判断是否和栈顶括号匹配&#xff0c;如果匹配就出栈&#xff0c;否则判断遍历…

ubuntu--Linux运行时格式

Linux运行时格式 \r 错误 用vim打开那个执行错误的 sh脚本文件 进入最后一行模式下 :set ff显示 fileformatdos 解决方法 : :set ffunix查看是否更改 : :set ff结果 : 保存退出即可 :x运行, 没有出错 * Author: cpu_code * Date: 2020-07-29 19:07:52 * LastEditTime: 2020…

MMPose-RTMO推理详解及部署实现(上)

目录 前言1. 概述1.1 MMPopse1.2 MMDeploy1.3 RTMO 2. 环境配置3. Demo测试4. ONNX导出初探5. ONNX导出代码浅析6. 剔除NMS7. 输出合并8. LayerNormalization算子导出9. 动态batch的实现10. 导出修改总结11. 拓展-MMPose中导出ONNX结语下载链接参考 前言 最近在 MMPose 上看到了…

Android加固多渠道打包和签名工具

简介 基于腾讯VasDolly最新版本3.0.6的图形界面衍生版本&#xff0c;同时增加了签名功能&#xff0c;旨在更好的帮助开发者构建多渠道包 使用说明 下载并解压最新工具包&#xff0c;找到Startup脚本并双击启动图形界面&#xff08;注意&#xff1a;需本地安装java环境&#…

json文件操作和异常处理

目录 按行读取文件readline() 读取大文件: json文件: json文件介绍: json的语法&#xff1a; 读取json文件: json文件写入: 异常&#xff1a; 捕获异常: 捕获指定类型的异常: 捕获未知类型的异常(使用最多): 异常捕获的完整结构: 异常传递: ​编辑抛出异常: 按行…

算法人生(18):从神经网络的“剪枝策略”看“怎么找回时间”

IT人的工作和生活难平衡这事&#xff0c;到底要怎么解决呢&#xff0c;让我们从神经网络的“剪枝策略”中找点灵感吧&#xff01; 剪枝策略是指训练和优化深度神经网络时采取的一种技术&#xff0c;从名字就知道&#xff0c;它就像修剪树木一样&#xff0c;去除不必要的枝叶&a…

云原生架构模式

本文主要介绍了云原生架构的主要设计模式&#xff0c;讨论了这些模式的优缺点及其适用场景&#xff0c;并探讨了在云计算环境中的应用和挑战。原文: Cloud-Native Architecture Patterns (Part 1)&#xff0c;Cloud-Native Architecture Patterns (Part 2) Bernard Hermant Uns…

微软如何打造数字零售力航母系列科普12 - 使用Microsoft Fabric将客户数据带入人工智能时代

【世界上充斥着数据&#xff0c;在过去的2年里&#xff0c;我们都看到了人工智能如何有潜力彻底改变我们的日常业务。人们对利用生成性人工智能体验的力量的需求越来越大&#xff0c;但这样做需要一个干净的数据庄园&#xff0c;而且可能会因为各种技术堆栈、分散的团队和无处不…

常见仪表盘指示灯的含义,这次够全了!

汽车是当前主要的交通工具之一&#xff0c;给人们的工作、生活提供了便利。大家在学会开车的同时&#xff0c;也得了解一些基本的汽车常识&#xff0c;可以及时的发现车辆的问题&#xff0c;并作出正确的判断&#xff0c;以此降低车辆的损耗和维修成本。其中最基本的&#xff0…

Redis-重定向

实验环境&#xff08;3主3从的Redis-Cluster&#xff09; 一、Redis重定向基础篇 1、MOVED重定向 Redis Custer 中&#xff0c;客户端可以向集群中任意节点发送请求。此时当前节点先对 Key 进行 CRC 16 计算&#xff0c;然后按 16384 取模确定 Slot 槽。确定该 Slot 槽所对应的…

C语言(字符、字符串函数)2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#xff0c;在这里撰写成文一…

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示与TM1638芯片连接的按键的按键值应用

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示与TM1638芯片连接的按键的按键值应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍TM1638键盘…