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

Apache ECharts简介和相关操作

news 2026/2/10 23:28:09

文章目录

  • 一、Apache ECharts介绍
  • 二、快速入门
    • 1.下载echarts.js文件
    • 2.新建index.html文件
    • 3.准备一个DOM容器用于显示图表
    • 4.完整代码展示
    • 5.相关配置
  • 三、演示效果
  • 四、总结

一、Apache ECharts介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
在这里插入图片描述
常见效果展示：
1.柱形图：
在这里插入图片描述
2.饼形图：
在这里插入图片描述
3.折线图
在这里插入图片描述
不管是那种图形，其本质就是数据

二、快速入门

Apache Echarts官方提供的快速入门：https://echarts.apache.org/handbook/zh/get-started/

1.下载echarts.js文件

echarts.js文件下载链接：https://www.jsdelivr.com/package/npm/echarts
在这里插入图片描述

2.新建index.html文件

代码如下（示例）：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head>
</html>

在这里插入图片描述

3.准备一个DOM容器用于显示图表

<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

在这里插入图片描述

4.完整代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

5.相关配置

  • xAxis
    直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis
    直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series
    系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

三、演示效果

在这里插入图片描述

四、总结

使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

相关文章：

Apache ECharts简介和相关操作

文章目录 一、Apache ECharts介绍二、快速入门1.下载echarts.js文件2.新建index.html文件3.准备一个DOM容器用于显示图表4.完整代码展示5.相关配置 三、演示效果四、总结 一、Apache ECharts介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库&#xff0c;提供直观…...

编程日记 2023/11/4 12:44:10

怎么看待工信部牵头推动人形机器人发展

1&#xff0c;工信部牵头&#xff0c;而不是科技部牵头&#xff0c;有些蹊跷&#xff0c;科技部应该比工信部更了解科技发展趋势&#xff0c;工信部比科技部更了解工业发展趋势&#xff0c;这是用工业倒逼科技进步。 2&#xff0c;人的优势不是身体&#xff0c;而是精神&#…...

编程日记 2023/11/4 12:43:10

Hikari源码分析

总结 连接池关系 1、HikariDataSource构建函数->生成HikariPool对象->调用HikariPool的getConection得到连接 2、HikariPool包含ConcurrentBag 3、ConcurrentBag保存连接&#xff1a;三个集合threadList、sharedList、handoffQueue 4、ConcurrentBag管理连接&#xff1…...

编程日记 2023/11/4 12:42:09

修改YOLOv5的模型结构

YOLOv5 模型结构 C3模块结构图 修改目标 修改目标是移除C3模块concat后的卷积操作 YOLOv5的模型存储在项目目录下的models目录中。 一些以yaml为后缀的文件保存了一些模型的超参数&#xff0c;通过不同的参数&#xff0c;形成了yolov5s,yolov5n,yolov5l等不同参数等级&#…...

编程日记 2023/11/4 12:41:07

React 与 React Native 区别

React 与 React Native 区别 同样的实现一个点击按钮&#xff0c;更换姓名和年龄的值的功能。两部分代码不同 React代码 import React, { useState } from react import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useState(何遇)const [a…...

编程日记 2023/11/4 12:39:05

Android 12.0 系统system模块开启禁用adb push和adb pull传输文件功能

1.使用场景 在进行12.0的系统定制化开发中，在一些产品中由于一些开发的功能比较重要，防止技术点外泄在出货产品中，禁用 adb pull 和adb push等命令 来获取系统system下的jar 和apk 等文件，所以需要禁用这些命令，接下来实现这些功能 2.系统system模块开启禁用adb push和ad…...

编程日记 2023/11/4 12:38:02

基于单片机的衣物消毒清洗机系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、系统总体设计2.2 功能分析2.3 系统框架设计 二、硬件电路设计3.1 电源模块的设计 三、 软件设计4.1 系统整体流程4.4 软件整体流程实物图 四、 结论五、 文章目录 概要 基于单片机的衣物消毒清洗机可以应用在…...

编程日记 2023/11/4 12:36:00

将 UniLinks 与 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）

让我们使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。 一步一步的指导&#xff01; 我是 Pedro Dionsio&#xff0c;是葡萄牙 InspireIT 公司的 Flutter 开发人员&#xff0c;我写这个 UniLinks 教程的座右铭是&#xff1a; Firebase DynamicLinks 已被弃用&#xff0…...

编程日记 2023/11/4 12:34:59

Spring-Spring 之底层架构核心概念解析

BeanDefinition BeanDefinition表示Bean定义&#xff0c;BeanDefinition中存在很多属性用来描述一个Bean的特点。比如&#xff1a; class&#xff0c;表示Bean类型scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等lazyInit&#xff1a;表示Bean是否是懒加载initMeth…...

编程日记 2023/11/4 12:33:58

电脑版WPS怎么将更新目录加到快速访问栏

效果 步骤 开启首页的“标签”、快速访问、在最近置顶展示然后选择好目录点击右边的设置 》 添加标签选中“快速访问”&#xff0c;确定并关闭完成 相关 WPS怎样设置快速访问工具栏 WPS怎样设置快速访问工具栏-百度经验WPS怎样设置快速访问工具栏,WPS怎样设置快速访问工具栏…...

编程日记 2023/11/4 12:31:54

保障效率与可用，分析Kafka的消费者组与Rebalance机制

系列文章目录 上手第一关&#xff0c;手把手教你安装kafka与可视化工具kafka-eagle Kafka是什么&#xff0c;以及如何使用SpringBoot对接Kafka 架构必备能力——kafka的选型对比及应用场景 Kafka存取原理与实现分析&#xff0c;打破面试难关 防止消息丢失与消息重复——Kafka可…...

编程日记 2023/11/4 12:30:53

“1-5-15”原则：中国联通数字化监控平台可观测稳定性保障实践

一分钟精华速览 “只知道系统有问题&#xff0c;但是找不到问题到底出在哪里”&#xff0c;这几乎是大家都面临过、或正在面临的问题。用户在投诉&#xff0c;但是我的指标都是正常的&#xff0c;到底是哪一环出问题了&#xff1f; 本文详细介绍了中国联通在智能运维领域的应用…...

编程日记 2023/11/4 12:29:53

LinkedList详解-Deque接口链表实现方案

简介 LinkedList实现了List和Deque接口。List是一个有序的集合&#xff0c;可以包含重复元素&#xff0c;它提供了在列表的头部、尾部或指定位置进行插入、删除和查找等操作的方法。Deque是双端队列&#xff0c;提供了在列表的头部和尾部进行插入和删除操作的方法。通过实现这…...

编程日记 2023/11/4 12:28:52

【考研数据结构代码题1】二叉搜索树的插入与查找

题目&#xff1a;请用C语言写出二叉树的二叉链表结构&#xff0c;并编写一个函数在二叉搜索树中可以搜索给定的关键字 难度&#xff1a;★ 二叉树的二叉链表结构 #include<stdio.h> #include<stdlib.h> //二叉树的结点结构 typedef struct Node{int data;//存放结…...

编程日记 2023/11/4 12:27:51

世微 平均电流型降压恒流驱动器 电动摩托车LED灯小钢炮驱动IC AP5218

1&#xff0c;来源&#xff1a;深圳市世微半导体有限公司 2&#xff0c;产品描述 AP5218 是一款 PWM工作模式, 高效率、外 围简单、内置功率管&#xff0c;适用于5V&#xff5e;100V输入的高 精度降压 LED 恒流驱动芯片。输出最大功率可达 15W&#xff0c;最大电流 1.5A。AP5…...

编程日记 2023/11/4 12:26:50

docker 下安装mysql8.0

在docker中查询mysql镜像 PS C:\Users\admin> docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL is a widely used, open-source relation……...

编程日记 2023/11/4 12:25:49

Android MVI架构的深入解析与对比

什么是MVI&#xff1f; M&#xff1a;model&#xff0c;此处的model并不是传统的数据模块&#xff0c;它是指用来存储视图状态UI State的一个模块 。比如请求数据时的loading、请求失败的提示页面等UI层面的变化状态。 V&#xff1a;view&#xff0c;视图模块 I&#xff1a;…...

编程日记 2023/11/4 12:23:45

达梦数据库表空间管理常用SQL

达梦数据库表空间管理常用SQL 表空间容量分析表空间创建与扩容 查看数据库状态&#xff1a; select name,instance_name,status$,mode$ from v$instance; --mode$显示Primary为主库select name,status$,role$ from v$database; --status$&#xff1a;1 启动&#xff0c;2 启动…...

编程日记 2023/11/4 12:22:44

Flutter 组件集录 | InheritedNotifier 内置状态管理组件

theme: cyanosis 1. 前言 在上一篇 《Flutter 知识集锦 | 监听与通知 ChangeNotifier》 中&#xff0c;我们介绍了 ChangeNotifier 对象通知监听者的能力。并通过一个简单的模拟下载进度案例&#xff0c;介绍了它的使用方式&#xff1a; | 案例演示 | 监听-通知关系 | | --- | …...

编程日记 2023/11/4 12:21:43

NOIP2023模拟10联测31 涂鸦

题目大意 有一面由 n m n\times m nm个格子组成的墙&#xff0c;每个格子要么是黑色&#xff0c;要么是白色。你每次将会进行这样的操作&#xff1a;等概率随机选择一个位置 ( x , y ) (x,y) (x,y)和一个颜色 c c c&#xff08;黑色或白色&#xff09;&#xff0c;&#xff0…...

编程日记 2023/11/4 12:19:40

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/2/8 10:56:57

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2026/1/30 22:07:56

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/24 13:04:10

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/9 20:01:01

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2026/2/10 2:11:49