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

蓝桥杯——web(ECharts)

news 2026/2/10 12:13:33

 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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/9 16:57:53

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/11/19 10:53:07

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/11/20 18:21:59

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2026/2/5 18:18:58

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2026/2/5 3:03:00