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

蓝桥杯——web(ECharts)

news 2026/2/10 12:04:29

 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…...

编程日记 2024/3/11 17:23:58

MySQL数据库在Windows和Linux中由于大小写默认规则不同，出现大小写问题如何解决？

Windows和Linux差异&#xff1a;在Windows上&#xff0c;lower_case_table_names默认为1&#xff0c;而在Linux上&#xff0c;默认值通常为0。因此&#xff0c;在Linux上更改这个设置更常见&#xff0c;以确保与Windows环境的兼容性或实现特定的大小写敏感性需求。 操作系统的大…...

编程日记 2024/3/11 17:22:57

新雀优化算法NOA求解机器人栅格地图最短路径规划，可以自定义地图（提供MATLAB代码）

一、星雀优化算法 星雀优化算法(Nutcracker optimizer algorithm,NOA)由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模拟星雀的两种行为&#xff0c;即&#xff1a;在夏秋季节收集并储存食物&#xff0c;在春冬季节搜索食物的存储位置。CEC2005:星雀优化算法(Nut…...

编程日记 2024/3/11 17:21:55

重塑语言智能未来：掌握Transformer，驱动AI与NLP创新实战

Transformer模型 Transformer是自然语言理解(Natural Language Understanding&#xff0c;NLU)的游戏规则改变者&#xff0c;NLU 是自然语言处理(Natural Language Processing&#xff0c;NLP)的一个子集。NLU已成为全球数字经济中AI 的支柱之一。 Transformer 模型标志着AI 新…...

编程日记 2024/3/11 17:18:52

【Windows】Windows 11无法连接共享打印机

Windows 11无法连接共享打印机 1.在电脑点击winr 键然后输入gpedit.msc进行回车进入本地本地组策略编辑器2.打开本地组策略-管理模板>打印机->找到配置RPC连接设置&#xff0c;打开3.选择“已启用”&#xff0c;将下面连接协议改成“命名管道上的RPC”&#xff0c;搞定。…...

编程日记 2024/3/11 17:15:49

Window10数据库崩溃启动失败，MySQL8.0.30通过data文件夹恢复数据库到Docker

背景&#xff1a; 昨天关机前还在使用mysql&#xff0c;一切正常&#xff0c;但今天打开电脑&#xff0c;发现mysql启动不起来了&#xff0c;老是提示端口占用&#xff0c;但是系统也没有新安装什么软件&#xff0c;而且通过查询nat命令也没发现3306端口占用。而且修改成3307等…...

编程日记 2024/3/11 17:14:48

【树】-Lc101-对称二叉树（一棵树是否是另一棵树的子树的变形）

写在前面 最近想复习一下数据结构与算法相关的内容&#xff0c;找一些题来做一做。如有更好思路&#xff0c;欢迎指正。 目录 写在前面一、场景描述二、具体步骤1.环境说明2.代码 写在后面 一、场景描述 对称二叉树。给给定一个二叉树&#xff0c;检查它是否是镜像对称的。 例…...

编程日记 2024/3/11 17:12:46

在Jupyter Notebook中安装第三方库

pip vs. conda pip 可以在所有环境下安装python包。conda 可以在conda环境下安装所有包。 如果你已经安装了python&#xff0c;那么这个选择对你来说是非常容易的&#xff1a; 如果你是用Anaconda或者Miniconda安装的python&#xff0c;那么请使用conda命令来安装python包。如…...

编程日记 2024/3/11 17:11:44

「AI工程师」数据处理与分析-工作指导

工作指导书 一、工作职责 负责数据的收集、清洗、整合和处理，确保数据质量和准确性。进行数据分析和挖掘，提取有价值的信息，为业务决策提供支持。构建和维护数据处理和分析的流程和工具，提高数据处理效率。与其他团队成员合作，共同解决数据处理和分析过程中遇到的问题。二…...

编程日记 2024/3/11 17:09:41

Rust：Mutex 的示例代码

在Rust中&#xff0c;你可以使用std::sync::Mutex来创建一个互斥锁&#xff0c;从而保护共享资源。下面是一个使用Mutex的简单示例&#xff1a; use std::sync::Mutex; use std::thread; use std::time::Duration; fn main() { // 创建一个包含整数的Mutex let counter…...

编程日记 2024/3/11 17:08:40

在 Docker 环境下安装 OpenWrt

在 Docker 环境下安装 OpenWrt 是一种方便且易于管理的方式&#xff0c;它允许您在不需要物理设备的情况下运行 OpenWrt。以下是在 Docker 中安装 OpenWrt 的步骤&#xff1a; 首先&#xff0c;您需要安装 Docker。具体安装方法可以参考 Docker 官方文档。在安装完成后&#xf…...

编程日记 2024/3/11 17:07:39

stl的基本知识学习

1.vector&#xff1a; 2.set&#xff1a; 3.map&#xff1a; 4.栈&#xff1a; 5.队列&#xff1a; 6. unordered_map与unordered_set: 7. 位运算&#xff1a; 8.cctype&#xff1a; 导图&#xff1a;...

编程日记 2024/3/11 17:06:37

Python从0到100（三）：Python中的变量介绍

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…...

编程日记 2024/3/11 17:03:33

污水处理厂重金属废水深度处理CH-90树脂处理系统

项目名称 广东某工业污水处理厂重金属废水深度处理工程项目 工艺选择 科海思重金属深度处理工艺 工艺原理 离子交换吸附 项目背景 随着环保要求不断提高&#xff0c;工业废水处理已成为众多企业的必修课。然而在工业生产中&#xff0c;如何有效处理含有重金属的废水成为…...

编程日记 2024/3/11 17:02:32

WordPress供求插件API文档:用户登录

该文档为WordPress供求插件文档&#xff0c;详情请查看 WordPress供求插件&#xff1a;一款专注于同城生活信息发布的插件-CSDN博客文章浏览阅读67次。WordPress供求插件&#xff1a;sliver-urban-life 是一款专注于提供同城生活信息发布与查看的插件&#xff0c;该插件可以实…...

编程日记 2024/3/11 16:58:27

微信小程序（五十二）开屏页面效果

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.使用控件模拟开屏界面 2.倒计时逻辑 3.布局方法 4.TabBar隐藏复现 源码&#xff1a; components/openPage/openPage.wxml <view class"openPage-box"><image src"{{imagePath}}"…...

编程日记 2024/3/11 16:56:24

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 命名空间资源限…...

编程日记 2024/3/11 16:55:23

IDEA管理Git + Gitee 常用操作

文章目录 IDEA管理Git Gitee 常用操作1.Gitee创建代码仓库1.创建仓库1.点击新建仓库2.完成仓库信息填写3.创建成功4.管理菜单可以修改这个项目的设置 2.设置SSH公钥免密登录基本介绍1.找到.ssh目录2.执行指令 ssh-keygen3.将公钥信息添加到码云账户1.点击设置2.ssh公钥3.复制.…...

编程日记 2024/3/11 16:54:21

HBase安装，配置，启动，检查

目录: 一、HBase安装&#xff0c;配置 1、下载HBase安装包 2、解压&#xff0c;配置环境变量并激活 3、hbase 配置 4、将hadoop和zookeeper的配置文件创建软连接放在hbase配置目录 5、配置 regionserver 二、HBase启动与关闭&#xff0c;安装检验 1、启动关闭hbase的命令 2、 检…...

编程日记 2024/3/11 16:53:20

当金蝶遇上BI，马上就能看到数据可视化效果

最近整理咨询内容时发现&#xff0c;很多企业用户在咨询时都会问是否有行业案例&#xff0c;究其原因时他们没用过BI数据分析&#xff0c;不知道BI可以做什么&#xff0c;能做到什么地步。其实&#xff0c;要知道这些东西还不简单&#xff0c;只需要注册奥威BI软件&#xff0c;…...

编程日记 2024/3/11 16:50:18

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/2/9 21:57:29

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

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

编程新知 2025/9/2 3:37:40

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/11/25 19:50:27

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2026/2/6 16:59:24

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35