当前位置: 首页 > news >正文

【记录46】【案例】echarts 柱状图

在这里插入图片描述
echarts环境4.1.0

<template><div id="threefour"></div>
</template>
<script>
import * as echarts from "echarts"
export default {name:"",components:{},data(){return {}},methods:{getdata(){var myCharts = echarts.init(document.getElementById('threefour'))var districtList = ['一年级1班', '一年级2班', '一年级3班', '一年级4班', '一年级5班', '一年级6班', '一年级7班', '一年级8班', '一年级9班']var lN = [43, 40, 38, 41, 40, 42, 42, 43, 39, ]   //应到人数var bN = [40, 40, 37, 40, 40, 40, 39, 41, 38, ]    //实到人数var cN = [2, 0, 1, 1, 0, 2, 1, 1, 1, ]     //请假人数var dN = [5, 3, 6, 4, 2, 1, 4, 4, 0,]      //迟到人数var tN = [1, 0, 0, 0, 0, 0, 2, 1, 0,]     //其它let option = {tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: 'rgba(0, 255, 233,0)',},},},legend: {x: '85%', //用百分比 处理块与文字位置y: 'center',orient: 'vertical',textStyle: {fontSize: 12,lineHeight: 45,color: '#666',},//selectedMode: false,    //选中哪个图例 false后图例不可点击data: ['x数', 'y数']},xAxis: {type: 'category',data: districtList,axisLine: {lineStyle: {color: '#E6E6FA'}},axisLabel: {interval:0,rotate:22,}},yAxis: {type: 'value',// minInterval: 500,axisLine: {lineStyle: {color: '#F0F8FF'}},},grid: { //用于处理图标放入过多空白问题top: '3%', //距上边距left: '10%', //距离左边距right: '5%', //距离右边距bottom: '22%', //距离下边距},dataZoom: [{ // 缩放条type: 'inside',start: 30,end: 80}, {start: 30,end: 80}],series: [{name: '应到人数',data: lN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FB8C8C'}, {offset: 1,color: '#F70909'}]),showBackground: false,}, {name: '实到人数',data: bN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FAA46B'}, {offset: 1,color: '#F87219'}]),showBackground: false,},{name: '请假人数',data: cN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#FBFB7C'}, {offset: 1,color: '#F9F93A'}]),showBackground: false,},{name: '迟到人数',data: dN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#7792FF'}, {offset: 1,color: '#0033FF'}]),showBackground: false,},{name: '其它',data: tN,type: 'bar',color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#80F6F6'}, {offset: 1,color: '#21EFEF'}]),showBackground: false,},]};myCharts.setOption(option)}},mounted(){this.getdata()}
}
</script>
<style>#threefour { width: 100%; height: 27vh; }
</style>

相关文章:

【记录46】【案例】echarts 柱状图

echarts环境4.1.0 <template><div id"threefour"></div> </template> <script> import * as echarts from "echarts" export default {name:"",components:{},data(){return {}},methods:{getdata(){var myChart…...

Github2024-06-12 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目4JavaScript项目2Lua项目1PHP项目1Blade项目1非开发语言项目1TypeScript项目1Shell项目1从零开始构建你喜爱的技术 创建周期:2156 天…...

茶艺师服务师傅小程序APP源码(APP+小程序+公众号+H5)

&#x1f375;茶艺师服务小程序&#xff1a;品味生活的茶艺新体验&#x1f331; &#x1f33f;一、引言&#xff1a;茶艺师服务小程序&#xff0c;让生活更有味 在繁忙的生活中&#xff0c;品一杯香茗&#xff0c;感受茶文化的韵味&#xff0c;是许多人向往的休闲方式。然而&…...

【正则表达式】入门

参考视频&#xff1a;10分钟快速掌握正则表达式_哔哩哔哩_bilibili 这个网站用来测试写的正则表达式效果&#xff1a;regex101: build, test, and debug regex 示例&#xff1a; 限定符 ? 表示前一个字符可有可无 比如这里输入&#xff1a;de? 匹配结果可以得到d和de * 前…...

制造业为什么需要ERP企业管理软件?

如今&#xff0c;传统的制造业管理方式逐渐变得力不从心~库存积压、生产效率低下、供应链混乱…想象一下&#xff0c;如果你的企业仍然依赖于手工记录订单、库存和财务数据&#xff0c;那么每当市场发生变动时&#xff0c;你就需要花费大量的时间和精力去重新调整生产计划、更新…...

JavaScript Prototype

JavaScript Prototype JavaScript 是一种高级的、解释执行的编程语言&#xff0c;广泛应用于网页和服务器端开发。JavaScript 的核心特性之一是其原型继承机制&#xff0c;这是理解 JavaScript 对象模型的关键。 什么是 Prototype&#xff1f; 在 JavaScript 中&#xff0c;…...

Web Works API 和 Promise 的对比和区别

Web Workers 和 Promise 都是强大的工具&#xff0c;用于不同的异步处理场景。Web Workers 适用于需要并行处理的复杂任务&#xff0c;通过后台线程避免阻塞主线程。而 Promise 则简化了单线程中的异步操作管理&#xff0c;使代码更加清晰和结构化。根据具体需求选择合适的技术…...

jeecg快速启动(附带本地运行可用版本下载)

版本整理&#xff08;windows x64位&#xff09;&#xff1a; redis&#xff1a;3.0.504 MYSQL&#xff1a;5.7 Maven&#xff1a;3.9.4(setting文件可下载) Nodejs&#xff1a;v16.20.2&#xff08;建议不要安装默认路径下&#xff0c;如已安装在c盘&#xff0c;运行yarn报…...

【PPT教程】一键重置幻灯片背景的方法,新建幻灯片带默认背景

目的是替换18届的研电赛ppt背景为19届 这里写目录标题 1.设计->设置背景格式2.图片或纹理填充->插入3.选择需要替换为背景的照片4.点击下方的应用到全部 1.设计->设置背景格式 2.图片或纹理填充->插入 3.选择需要替换为背景的照片 4.点击下方的应用到全部 此时全部…...

NVIDIA新模型Nemotron-4:98%的训练数据是合成生成的,你敢信?

获取本文论文原文PDF&#xff0c;请公众号 AI论文解读 留言&#xff1a;论文解读 标题&#xff1a;Nemotron-4 340B Technical Report 模型概述&#xff1a;Nemotron-4 340B系列模型的基本构成 Nemotron-4 340B系列模型包括三个主要版本&#xff1a;Nemotron-4-340B-Base、…...

深度神经网络——什么是NLP(自然语言处理)?

自然语言处理&#xff08;NLP&#xff09; 是对使计算机能够处理、分析、解释和推理人类语言的技术和工具的研究和应用。 NLP 是一个跨学科领域&#xff0c;它结合了语言学和计算机科学等领域已建立的技术。 这些技术与人工智能结合使用来创建聊天机器人和数字助理&#xff0c;…...

05-5.5.1 哈夫曼树

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…...

夯实网络底座:智能云解析助推新基建发展再上新台阶

在数字化浪潮汹涌澎湃的今天&#xff0c;互联网已成为社会运转不可或缺的基础设施。而在这背后&#xff0c;DNS&#xff08;域名系统&#xff09;作为互联网的底座&#xff0c;其重要性不言而喻。随着云计算、大数据、人工智能、IPv6等新基建的迅猛发展&#xff0c;传统的DNS服…...

时间戳转时间格式小记——个位数月份 如何去掉补位0的情况

工作中遇到的问题小记一下 时间戳&#xff1a;1710172800 时间格式&#xff1a;2024-03-12 00:00:00 在无要求的情况下这种情况很OK 当我们需要时间格式为&#xff1a;2024-3-12 00:00:00 那常规情况就不适用 解决&#xff1a; import time sjc 1710172800 # Windows 环境…...

C++ 矩阵乘法

描述 如果A是个x行y列的矩阵&#xff0c;B是个y行z列的矩阵&#xff0c;把A和B相乘&#xff0c;其结果将是另一个x行z列的矩阵C。这个矩阵的每个元素是由下面的公式决定的 矩阵的大小不超过100*100 输入描述&#xff1a; 第一行包含一个正整数x&#xff0c;代表第一个矩阵的…...

热门开源项目推荐

文章目录 1. OpenAIs GPT-42. TensorFlow 3.03. Kubernetes 1.304. React 195. PyTorch 2.06. Deno 2.07. Home Assistant总结 开源社区的不断壮大&#xff0c;越来越多的开发者和企业开始重视和参与开源项目。开源不仅促进了技术的快速迭代和创新&#xff0c;还为广大开发者提…...

Study--Oracle-03-数据库常规操作

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。 一、oracle 版本及主要功能 二、数据安装完成后常用操作SQL 1、检查数据库监听状态 监听的常用命令 启动&#xff1a;[oracleoracle u01]$ lsnrctl stop 停止&am…...

OpenCloudOS 8.8 一键安装 Oracle 19C 单机

前言 Oracle 一键安装脚本&#xff0c;演示 OpenCloudOS 8.8 一键安装 Oracle 19C 单机&#xff08;231017&#xff09;过程&#xff08;全程无需人工干预&#xff09;。 ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库 安装准备 1、安装好操作系统&#xff0c;建议…...

【Android】【Java】【每日练手3】Android的四个主要组件使用示例

Android的四个主要组件是活动&#xff08;Activity&#xff09;、服务&#xff08;Service&#xff09;、广播接收器&#xff08;Broadcast Receiver&#xff09;和内容提供器&#xff08;Content Provider&#xff09;。下面通过一个简单的示例来介绍这四个组件及其用法。 示…...

代码随想三刷二叉树篇2

代码随想三刷二叉树篇2 101. 对称二叉树题目代码 104. 二叉树的最大深度题目代码 111. 二叉树的最小深度题目代码 222. 完全二叉树的节点个数题目代码 110. 平衡二叉树题目代码 257. 二叉树的所有路径题目代码 101. 对称二叉树 题目 链接 代码 /*** Definition for a binar…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...