蓝桥杯——web(ECharts)

ECharts 初体验
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="echarts.js"></script><title>ECharts 快速上手</title></head><style>* {margin: 0;padding: 0;}#main {margin: 20px;background-color: rgb(228, 255, 192);}</style><body><!-- 为 ECharts 准备一个宽为 600px,高为 400px 的 DOM --><div id="main" style="width:600px;height:400px;"></div></body><script>var chartDom = document.getElementById("main");// 初始化实例对象 echarts.init(dom) 容器;var myChart = echarts.init(chartDom);// 指定配置项和数据var option = {xAxis: {type: "category",data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: "line",},],};// 将配置项设置给 echarts 实例对象。myChart.setOption(option);</script>
</html>
ECharts 基础配置

option
用 option 来描述其对图表的各种配置,包括:有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。通过 option 可以快速配置图表所需的数据,指定将数据以何种方式映射成图形,以及图表具备的交互行为。
option 相当于是存放组件的容器,而在 option 中的 series、xAxis、yAxis 都被称为组件
title

我们将这个值修改为 折线图堆叠 2。

此时图表的标题也跟着改变了,也就是说 title.text 配置是设置图表的标题。
你可以在配置项 title 中找到 title.text 甚至关于 title 配置项更多的内容
tooltip
当我们将鼠标放在折线的拐点处时会出现如下所示的提示框组件:
legend.data
是图例的数据数组,也就是红框框起来的值。

series
series是很常见的名词。在 ECharts 里,系列(series)是指:一组数值以及这些数值映射成的图。“系列”这个词可能来源于“一系列的数据”,而在 ECharts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个系列包含的要素至少有:一组数值、图表类型(series.type)、以及(关于这些数据如何映射成图的)参数
在 ECharts 里系列数据(series.data)就是图表的数据内容数组,系列类型(series.type)就是图表类型,其中,系列类型(series.type)至少有:line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)等等。在本课程中重点给大家介绍常用的四种(折线图、柱状图、饼形图、散点图)。
比如,我们把基础折线图示例代码中的 type:"line" 修改为 type:"pie",可以看到代码运行后,折线图变成了饼形图。

series 除了 data 和 type 外,常用的还有如下几个:
series.name是系列的名字。series.stack是数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。
什么意思呢?🤔 我们看看官网上折线图堆叠 的示例。
我们把官网上示例代码中的数据修改为如下图所示。

基本图表绘制
相关文章:
蓝桥杯——web(ECharts)
ECharts 初体验 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><script src"echarts.js">&l…...
MySQL数据库在Windows和Linux中由于大小写默认规则不同,出现大小写问题如何解决?
Windows和Linux差异:在Windows上,lower_case_table_names默认为1,而在Linux上,默认值通常为0。因此,在Linux上更改这个设置更常见,以确保与Windows环境的兼容性或实现特定的大小写敏感性需求。 操作系统的大…...
新雀优化算法NOA求解机器人栅格地图最短路径规划,可以自定义地图(提供MATLAB代码)
一、星雀优化算法 星雀优化算法(Nutcracker optimizer algorithm,NOA)由Mohamed Abdel-Basset等人于2023年提出,该算法模拟星雀的两种行为,即:在夏秋季节收集并储存食物,在春冬季节搜索食物的存储位置。CEC2005:星雀优化算法(Nut…...
重塑语言智能未来:掌握Transformer,驱动AI与NLP创新实战
Transformer模型 Transformer是自然语言理解(Natural Language Understanding,NLU)的游戏规则改变者,NLU 是自然语言处理(Natural Language Processing,NLP)的一个子集。NLU已成为全球数字经济中AI 的支柱之一。 Transformer 模型标志着AI 新…...
【Windows】Windows 11无法连接共享打印机
Windows 11无法连接共享打印机 1.在电脑点击winr 键然后输入gpedit.msc进行回车进入本地本地组策略编辑器2.打开本地组策略-管理模板>打印机->找到配置RPC连接设置,打开3.选择“已启用”,将下面连接协议改成“命名管道上的RPC”,搞定。…...
Window10数据库崩溃启动失败,MySQL8.0.30通过data文件夹恢复数据库到Docker
背景: 昨天关机前还在使用mysql,一切正常,但今天打开电脑,发现mysql启动不起来了,老是提示端口占用,但是系统也没有新安装什么软件,而且通过查询nat命令也没发现3306端口占用。而且修改成3307等…...
【树】-Lc101-对称二叉树(一棵树是否是另一棵树的子树的变形)
写在前面 最近想复习一下数据结构与算法相关的内容,找一些题来做一做。如有更好思路,欢迎指正。 目录 写在前面一、场景描述二、具体步骤1.环境说明2.代码 写在后面 一、场景描述 对称二叉树。给给定一个二叉树,检查它是否是镜像对称的。 例…...
在Jupyter Notebook中安装第三方库
pip vs. conda pip 可以在所有环境下安装python包。conda 可以在conda环境下安装所有包。 如果你已经安装了python,那么这个选择对你来说是非常容易的: 如果你是用Anaconda或者Miniconda安装的python,那么请使用conda命令来安装python包。如…...
「AI工程师」数据处理与分析-工作指导
工作指导书 一、工作职责 负责数据的收集、清洗、整合和处理,确保数据质量和准确性。进行数据分析和挖掘,提取有价值的信息,为业务决策提供支持。构建和维护数据处理和分析的流程和工具,提高数据处理效率。与其他团队成员合作,共同解决数据处理和分析过程中遇到的问题。二…...
Rust:Mutex 的示例代码
在Rust中,你可以使用std::sync::Mutex来创建一个互斥锁,从而保护共享资源。下面是一个使用Mutex的简单示例: use std::sync::Mutex; use std::thread; use std::time::Duration; fn main() { // 创建一个包含整数的Mutex let counter…...
在 Docker 环境下安装 OpenWrt
在 Docker 环境下安装 OpenWrt 是一种方便且易于管理的方式,它允许您在不需要物理设备的情况下运行 OpenWrt。以下是在 Docker 中安装 OpenWrt 的步骤: 首先,您需要安装 Docker。具体安装方法可以参考 Docker 官方文档。在安装完成后…...
stl的基本知识学习
1.vector: 2.set: 3.map: 4.栈: 5.队列: 6. unordered_map与unordered_set: 7. 位运算: 8.cctype: 导图:...
Python从0到100(三):Python中的变量介绍
前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…...
污水处理厂重金属废水深度处理CH-90树脂处理系统
项目名称 广东某工业污水处理厂重金属废水深度处理工程项目 工艺选择 科海思重金属深度处理工艺 工艺原理 离子交换吸附 项目背景 随着环保要求不断提高,工业废水处理已成为众多企业的必修课。然而在工业生产中,如何有效处理含有重金属的废水成为…...
WordPress供求插件API文档:用户登录
该文档为WordPress供求插件文档,详情请查看 WordPress供求插件:一款专注于同城生活信息发布的插件-CSDN博客文章浏览阅读67次。WordPress供求插件:sliver-urban-life 是一款专注于提供同城生活信息发布与查看的插件,该插件可以实…...
微信小程序(五十二)开屏页面效果
注释很详细,直接上代码 上一篇 新增内容: 1.使用控件模拟开屏界面 2.倒计时逻辑 3.布局方法 4.TabBar隐藏复现 源码: components/openPage/openPage.wxml <view class"openPage-box"><image src"{{imagePath}}"…...
2024年k8s最新版本使用教程
2024年k8s最新版本使用教程 3. YAML语言入门3.1 基本语法规则3.2 支持的数据结构3.3 其他语法 4 资源管理4.1 k8s资源查询4.2 资源操作命令4.3 资源操作方式4.3.1 命令行方式4.3.2 YAML文件方式 5 Namespace5.1 查看命名空间5.2 创建命名空间5.3 删除命名空间5.4 命名空间资源限…...
IDEA管理Git + Gitee 常用操作
文章目录 IDEA管理Git Gitee 常用操作1.Gitee创建代码仓库1.创建仓库1.点击新建仓库2.完成仓库信息填写3.创建成功4.管理菜单可以修改这个项目的设置 2.设置SSH公钥免密登录基本介绍1.找到.ssh目录2.执行指令 ssh-keygen3.将公钥信息添加到码云账户1.点击设置2.ssh公钥3.复制.…...
HBase安装,配置,启动,检查
目录: 一、HBase安装,配置 1、下载HBase安装包 2、解压,配置环境变量并激活 3、hbase 配置 4、将hadoop和zookeeper的配置文件创建软连接放在hbase配置目录 5、配置 regionserver 二、HBase启动与关闭,安装检验 1、启动关闭hbase的命令 2、 检…...
当金蝶遇上BI,马上就能看到数据可视化效果
最近整理咨询内容时发现,很多企业用户在咨询时都会问是否有行业案例,究其原因时他们没用过BI数据分析,不知道BI可以做什么,能做到什么地步。其实,要知道这些东西还不简单,只需要注册奥威BI软件,…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术,通过密码学、共识机制和智能合约等核心组件,实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点:数据存储在网络中的多个节点(计算机),而非…...
Java后端检查空条件查询
通过抛出运行异常:throw new RuntimeException("请输入查询条件!");BranchWarehouseServiceImpl.java // 查询试剂交易(入库/出库)记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...
