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

Apache ECharts | 一个数据可视化图表库

news 2025/11/1 19:57:22

文章目录

  • 1、简介
    • 1.1、主要特点
    • 1.2、使用场景
  • 2、安装
    • 方式一：从下载的源代码或编译产物安装
    • 方法二：从 npm 安装
    • 方法三：⭐定制安装echarts.js
  • 3、使用

官网：
  英语：https://echarts.apache.org/en/index.html
  中文：https://echarts.apache.org/zh/index.html
需要echarts.js文件，可以私信我发送🌹

1、简介

Apache ECharts 是一个由百度团队开源的，基于 JavaScript 的数据可视化图表库。它广泛用于生成交互式图表，如折线图、柱状图、饼图、雷达图、地图、热力图、散点图等。ECharts 提供了丰富的选项，可以轻松实现复杂的数据可视化需求。

1.1、主要特点

  1. 丰富的图表类型：ECharts 支持包括但不限于条形图、折线图、面积图、饼图、散点图、热力图、地图、树图、桑基图和箱型图等多种图表类型。
  2. 高度可定制：用户可以自定义图表的几乎所有元素，包括颜色、字体、样式、布局等，以适应不同的界面风格。
  3. 强大的交互性：ECharts 支持图表元素的点击、拖拽、缩放等交互操作，使得数据展示更为生动和易于理解。
  4. 动态数据：可以轻松地向图表添加、删除或修改数据，图表会动态更新。
  5. 跨平台和兼容性：ECharts 基于 HTML5 Canvas，兼容所有现代浏览器和移动设备。
  6. 国际化：支持多语言，方便国际化应用。
  7. 扩展性：ECharts 提供了丰富的 API 和自定义选项，用户可以根据需要扩展图表库。

1.2、使用场景

  • 数据报告和仪表板
  • 数据分析和科学研究
  • 金融、经济数据展示
  • 社交网络数据可视化
  • 地理信息系统
  • 实时数据监控

2、安装

方式一：从下载的源代码或编译产物安装

image.png
链接：https://archive.apache.org/dist/echarts/
image.png

方法二：从 npm 安装

命令：npm install echarts

方法三：⭐定制安装echarts.js

image.png

3、使用

先引入：
image.png
编写代码：

<!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>

浏览器打开：
image.png
总结： 使用Echarts，重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据，然后响应给前端来展示图表。

相关文章：

Apache ECharts | 一个数据可视化图表库

文章目录 1、简介1.1、主要特点1.2、使用场景 2、安装方式一&#xff1a;从下载的源代码或编译产物安装方法二&#xff1a;从 npm 安装方法三&#xff1a;⭐定制安装echarts.js 3、使用 官网&#xff1a; 英语&#xff1a;https://echarts.apache.org/en/index.html 中文&a…...

编程日记 2024/1/14 3:31:14

m1 + swoole(hyperf) + yasd + phpstorm 安装和debug

参考文档 Mac M1安装报错 checking for boost... configure: error: lib boost not found. Try: install boost library Issue #89 swoole/yasd GitHub 1.安装boost库 brew install boostbrew link boost 2.下载yasd git clone https://github.com/swoole/yasd.git 3.编…...

编程日记 2024/1/14 3:30:12

group by 查询慢的话,如何优化？

1、说明 根据一定的规则&#xff0c;进行分组。 group by可能会慢在哪里&#xff1f;因为它既用到临时表&#xff0c;又默认用到排序。有时候还可能用到磁盘临时表。 如果执行过程中&#xff0c;会发现内存临时表大小到达了上限&#xff08;控制这个上限的参数就是tmp_table…...

编程日记 2024/1/14 3:29:11

【重学C语言】一、C语言简介

【重学C语言】一、C语言简介 什么是编程语言&#xff1f;编程语言 C语言发展史C语言标准变迁开发软件CLion安装步骤 VIsual Studio安装步骤 Clion 和 VS2022 绑定 电脑常识 什么是编程语言&#xff1f; 人类语言&#xff1a;语言就是人类进行沟通交流的表达方式&#xff0c;应…...

编程日记 2024/1/14 3:27:07

【MATLAB源码-第109期】基于matlab的哈里斯鹰优化算发(HHO)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 哈里斯鹰优化算法&#xff08;Harris Hawk Optimization, HHO&#xff09;是一种受自然界捕食行为启发的优化算法。它基于哈里斯鹰的捕猎策略和行为模式&#xff0c;主要用于解决各种复杂的优化问题。这个算法的核心特征在于…...

编程日记 2024/1/14 3:26:06

NestJS 如何自定义中间件以及实际项目基于中间件提升项目开发效率

前言 NestJS 作为一个强大的 Node.js 框架&#xff0c;允许你通过中间件对请求和响应进行处理。中间件的概念在其他许多框架中也存在&#xff0c;它们在请求处理流程的早期执行&#xff0c;因此非常适合执行如日志记录、请求验证、设置响应头等任务。 在这篇教程中&#xff0…...

编程日记 2024/1/14 3:23:04

CMake入门教程【核心篇】设置和使用缓存变量

😈「CSDN主页」：传送门 😈「Bilibil首页」：传送门 😈「动动你的小手」：点赞👍收藏⭐️评论📝 文章目录 概述设置缓存变量使用缓存变量更改缓存变量完整代码示例实战使用技巧注意事项总结与分析...

编程日记 2024/1/14 3:21:01

MinIO （五） .net core实现分片上传

开发环境 Win11 vs2022 appsettings.json添加配置项 //minIO配置"MinIO": {//服务器IP"Endpoint": "192.168.xx.xx:9090",//账号"AccessKey": "3xR7i4zs1vLnxxxxxxxx",//密码"SecretKey": "P6bAnyzJm47Ub…...

编程日记 2024/1/14 3:18:59

如何有效提高矢量网络分析仪的动态范围

动态范围是网络分析仪&#xff08;VNA&#xff09;接收机的最大输入功率与最小可测量功率&#xff08;本底噪声&#xff09;之间的差值&#xff0c;如图所示&#xff0c;要使测量有效&#xff0c;输入信号必须在这些边界内。 如果需要测量信号幅度非常大的变化&#xff0c;例如…...

编程日记 2024/1/14 3:13:55

Python 安卓开发：Kivy、BeeWare、Flet、Flutter

kivy&#xff1a;https://github.com/kivy python-for-android &#xff1a;https://python-for-android.readthedocs.io/en/latest/ BeeWare&#xff1a;https://docs.beeware.org/en/latest/ Flet&#xff1a;https://github.com/flet-dev/flet 把 PySide6 移植到安卓上去&a…...

编程日记 2024/1/14 3:12:54

50天精通Golang（第16天）

beego框架介绍和流程分析 beego官方文档&#xff1a;https://beego.me/ 一、beego框架介绍 1.1 beego框架介绍–beego简介 1.1.1 什么是beego beego是一个使用Go语言来开发WEB引用的GoWeb框架&#xff0c;该框架起始于2012年&#xff0c;由一位中国的程序员编写并进行公开…...

编程日记 2024/1/14 3:11:52

imx6ull基于yocto工程的l汇编点亮ed

通过汇编点亮led 在裸机状态下通过汇编点亮led&#xff0c;即没有操作系统&#xff0c;(uboot kernel rootfs 都不需要实现&#xff09;。 led点亮原理 1.GPIO复用 根据原理图&#xff0c;找到led对应的引脚&#xff08;pin)&#xff0c;复用为GPIO&#xff08;只有GPIO才能…...

编程日记 2024/1/14 3:10:51

vue 前端等比例压缩图片(再转换成文件后上传后端)

前端压缩图片总的来说还是转base64 然后等比例放小宽和高 这个是上次压缩图片的一个扩展 压缩完之后 再将base64 转成blob再转成文件然后再上传 一生要强的前端崽子&#xff08;后端不支持base64上传&#xff09; 自己改吧改吧 // 图片上传async changePic(e) {this.isshang…...

编程日记 2024/1/14 3:06:49

解决在eclipse2021中，用mysql-connector-java-8.0.18.jar不兼容，导致无法访问数据库问题

1.环境场景 组件版本mysql5.7.44mysql-connector-java80.18 2. 问题描述 报mysql-connector-java 驱动连不上mysql数据库。 3. 可能的原因分析 查看数据库连接句柄是否对 如果数据库连接句柄中没有 useSSLfalse 的话可能会导致这样的问题。 就像下面这样&#xff1a; jdb…...

编程日记 2024/1/14 3:04:47

5 微信小程序

功能开发 5 功能开发概要今日详细1.发布1.1 发布流程的问题1.2 组件&#xff1a;进度条1.3 修改data中的局部数据1.4 发布示例效果前端后端 1.5 闭包 2.获取前10条新闻&#xff08;动态/心情&#xff0c;无需分页&#xff09;3.复杂版4.文章详细页面 各位小伙伴想要博客相关资料…...

编程日记 2024/1/14 3:03:46

百度面经整理（2024最新）

百度 面经1 shiro的组件分布式一致性算法zookeeper那些能参与投票&#xff0c;leader能投票吗&#xff1f;netty零拷贝实现volatile&#xff0c;如何感知到变量变化的redis高可用http如何跨域&#xff1f;tcp如何长链接。http如何操作浏览器缓存。用过消息队列吗&#xff1f;…...

编程日记 2024/1/14 2:59:43

c++的构造函数

目录 构造函数 1.构造函数&#xff1a; 2.构造函数的特点&#xff1a; 默认构造函数 -- 没有参数的构造函数 1. 合成(自动)的默认构造函数(一般不常用) 1&#xff09; 介绍&#xff0c;以及为什么不使用 2&#xff09;可以使用合成默认构造函数的情况 2. 自定义的默认…...

编程日记 2024/1/14 2:58:42

基于ZU19EG的100G-UDP解决方案

概述 本文档介绍ZU19EG与Mellanox CX6 100G网卡通信解决方案。 环境配置 FPGA硬件&#xff1a;519-ZU19EG的4路100G光纤PCIe加上计算卡 电脑&#xff1a;国产国鑫主板&#xff08;双PCU&#xff09;&#xff1a;Gooxi G2DA-B CPU:Intel Xeon Silver 2.2GHz 内存&#xff1…...

编程日记 2024/1/14 2:57:41

行为型设计模式——备忘录模式

备忘录模式 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤&#xff0c;当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原&#xff0c;很多软件都提供了撤销&#xff08;Undo&#xff09;操作…...

编程日记 2024/1/14 2:56:40

自定义HBase负载均衡器MyCustomBalancer实现步骤与代码解析

目录 1.HBase默认负载均衡策略 1.1 负载均衡总体流程 1.2 不能触发负载均衡的情况 1.3 负载均衡算法 2.自定义的 HBase 负载均衡器的步骤 3.MyCustomBalancer的代码细节 3.1 balanceCluster 方法的作用 3.2balanceCluster 对数据的影响 3.3监控HBase的性能指标 3.3.…...

编程日记 2024/1/14 2:55:39

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/10/18 13:49:11

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/10/29 17:53:07

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/1 2:53:34

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/10/26 14:56:49

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/10/27 0:07:53

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/10/21 19:54:04

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/10/11 22:46:21

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/10/29 6:13:18

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/10/30 23:46:10