【记录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>

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

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

相关文章

《平衡小车控制系统》电子设计大赛校赛感悟

我们学校举行了一次电子设计大赛选拔赛&#xff0c;虽然我们在测试的时候全部都可以完成&#xff0c;最后考核的时候因为方案选择问题以及各种设计逻辑等原因没能成功晋级&#xff0c;但我能从这次备赛中学到很多东西&#xff0c;遂分享一下&#xff0c;与广大网友交流经验。&a…

英伟达发布开源模型Nemotron-4 340B

&#x1f680; 英伟达发布开源模型Nemotron-4 340B 摘要&#xff1a;英伟达最新发布的开源模型Nemotron-4 340B&#xff0c;可能彻底改变大语言模型&#xff08;LLM&#xff09;训练方式。该模型支持多种自然语言和编程语言&#xff0c;使用9万亿个token训练&#xff0c;高达9…

Day 26:2288. 价格减免

Leetcode 2288. 价格减免 句子 是由若干个单词组成的字符串&#xff0c;单词之间用单个空格分隔&#xff0c;其中每个单词可以包含数字、小写字母、和美元符号 ‘$’ 。如果单词的形式为美元符号后跟着一个非负实数&#xff0c;那么这个单词就表示一个 价格 。 例如 “$100”、…

Windows系统部署本地SQL_Server指引

Windows系统部署本地SQL_Server指引 此指引文档环境为Windows10系统&#xff0c;部署SQL_Server 2019为例&#xff0c;同系列系统软件安装步骤类似。 一、部署前准备&#xff1b; 下载好相关镜像文件&#xff1b;设备系统启动后&#xff0c;将不必要的软件停用&#xff0c;避…

TTL 232难兄难弟对比

目录 一、TTL电平 二、RS-232电平 三、对比 TTL电平和RS-232电平是两种在电子通信中常用的电平标准&#xff0c;它们在电压范围、极性、接口标准以及应用场景等方面存在显著差异。以下是对这两种电平标准的对比、优缺点分析及图形对比的说明&#xff1a; 一、TTL电平 电压范…

【Linux】shell——条件判断test,各种运算符,expr

条件判断——test 真——0 假——1 test expression or [ expression ] 整数运算符 字符串运算符 -z 长度是否为0 -n 长度是否不为0 str1 str2 str1 ! str2 补 &&-->逻辑与&#xff0c;前面为真后面才会执行 || -->逻辑或&#xff0c;前面为假后面才…

VirtFuzz:一款基于VirtIO的Linux内核模糊测试工具

关于VirtFuzz VirtFuzz是一款功能强大的Linux内核模糊测试工具&#xff0c;该工具使用LibAFL构建&#xff0c;可以利用VirtIO向目标设备的内核子系统提供输入测试用例&#xff0c;广大研究人员可以使用该工具测试Linux内核的安全性。 工具要求 1、Rust&#xff1b; 2、修补的Q…

线代的学习(矩阵)

1.矩阵的乘法 矩阵实现满足&#xff1a;内标相等 矩阵相乘之后的结果&#xff1a;前行后列 需要注意&#xff1a;1.矩阵的乘法不具有交换律&#xff1a;AB!BA 2.矩阵的乘法满足分配律&#xff1a;A(BC) AB AC 抽象逆矩阵求逆矩阵 方法1.凑定义法、 方法2.长除法 数字型矩阵…

算法金 | 一个强大的算法模型:t-SNE !!

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 t-SNE&#xff08;t-Distributed Stochastic Neighbor Embedding&#xff09;是一种用于降维和数据可视化的非线性算法。它被广泛应用于…

LeetCode 算法:合并两个有序链表 c++

原题链接&#x1f517;&#xff1a;合并两个有序链表 难度&#xff1a;简单⭐️ 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;…

AI智能盒子助力中钢天源设备工厂升级安全防护

中钢集团安徽天源科技股份有限公司成立于2002年3月27日,是中央企业中国中钢股份有限公司控股的上市公司&#xff0c;主导产品为永磁铁氧体器件、钕铁硼器件、四氧化三锰、锶铁氧体预烧料及各类磁选机等。 在中钢天源智能化升级过程中&#xff0c;采用并定制开发一系列厂区安全…

QT day02

思维导图 UI界面设计 设置登录界面&#xff0c;输入账号、密码&#xff0c;登录/取消 按钮 使用手动连接&#xff0c;将登录框中的取消按钮使用第二中连接方式&#xff0c;右击转到槽&#xff0c;在该槽函数中&#xff0c;调用关闭函数 将登录按钮使用qt4版本的连接到自定义…

【随想】今日收获

【1】在写项目代码时&#xff0c;能用const的地方就用const。理由有两个&#xff1a;①可读性高&#xff1a;对于其他开发人员&#xff0c;看到const修饰形参就知道该函数内部不会修改该形参。②安全性高&#xff1a;const能够避免某些属性被更改。③延长声明周期&#xff1a;c…

实体类的注解

Data 是 lombok 的注解&#xff0c;自动生成Getter&#xff0c;Setter&#xff0c;toString&#xff0c;构造函数等 Entity&#xff1a;必须项&#xff0c; 注解这是个实体类&#xff0c;数据库中创建的表名默认和类名一致 Table&#xff08;name“”,catalog“”,schema“”…

Python期末复习题库(上)

1. (单选题) Python源程序的扩展名为&#xff08; A &#xff09; A. py B. c C. class D. ph 2. (单选题) 下列&#xff08; A &#xff09;符合可用于注释Python代码。 A. # B. */ C. // D. $ 3. (单选题)下列关于Python 语言的特点的说法中&#xff0c;错误的是&#xf…

【Linux基础IO】常见的对文件操作的函数、文件描述符fd、访问文件的本质分析

目录 fopen函数 chdir函数 fclose函数 fwrite和fread函数 open函数 umask函数 write函数 read函数 close函数 文件描述符fd 进程访问文件的本质分析 fopen函数 参数mode&#xff1a; w方式打开文件&#xff1a;1、如果被打开文件不存在&#xff0c;系统会在使用fopen函…

6、while循环 - 习题解析

目录 解析部分&#xff1a;分支练习1244. 请问一个正整数能够整除几次2问题描述解题思路代码实现代码解析 1062. 求落地次数问题描述解题思路代码实现代码解析 1254. 求车速问题描述解题思路代码实现代码解析 1261. 韩信点兵问题描述解题思路代码实现代码解析 解析部分&#xf…

数据结构习题

第一章 绪论 与数据元素本身的形式、内容、相对位置、个数无关的是数据的 逻辑结构。 第二章 线性表 在一个有127个元素的顺序表中插入一个新元素并保持原来顺序不变&#xff0c;平均要移动的元素个数为 63.5。 n/2 单链表的存储密度 小于1。 创建一个包括n个结点的有序单链…

汇编语言实验五、子程序和宏

1、编写子程序&#xff0c;传递一个字节无符号数组&#xff0c;返回最大值。要求用堆栈传递入口参数&#xff0c;返回值在al。 .MODEL SMALL,C .STACK 100H .DATA buf db 11h,33h,88h,55h,66h,44h,99h,22h,77h,01h buf_l equ lengthof buf buf_t equ type buf m db ? .CODE m…

零基础入门学用Arduino 第四部分(一)

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…