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

ECharts极简入门

news 2026/2/10 10:44:15

ECharts 是一个基于 JavaScript的开源可视化图表库，广泛应用于数据可视化的场景中，支持多种图表类型，如柱状图、折线图、饼图、散点图、雷达图等，且具有强大的自定义功能。

1. ECharts 基本使用

首先需要引入 ECharts 库，通常通过 CDN 或本地引入。以下是通过 CDN 引入的方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ECharts 入门教程</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>// 初始化 ECharts 实例var chart = echarts.init(document.getElementById('chart'));// 配置项var option = {title: {text: 'ECharts 入门示例',subtext: '子标题',left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['A', 'B', 'C', 'D']},series: [{name: '类别',type: 'pie',radius: '50%',data: [{ value: 40, name: 'A' },{ value: 30, name: 'B' },{ value: 20, name: 'C' },{ value: 10, name: 'D' }]}]};// 使用刚定义的配置项和数据显示图表chart.setOption(option);</script>
</body>
</html>

2. 解析配置项

  1. title：图表的标题配置。

    • text: 主标题内容。
    • subtext: 副标题内容。
    • left: 控制标题的位置，center表示居中，left表示左对齐，right表示右对齐。

  2. tooltip：提示框配置，鼠标悬浮在图形元素上时显示的内容。

    • trigger: 触发方式，item表示触发项（如饼图的每一项），axis表示坐标轴触发。
    • formatter: 自定义提示框的显示内容，{a}是系列名称，{b}是数据项名称，{c}是数据项的值，{d}是百分比。

  3. legend：图例配置，展示各系列对应的标识符。

    • orient: 图例的排列方式，vertical表示竖直排列，horizontal表示水平排列。
    • left: 控制图例的位置，left表示左对齐，center居中，right右对齐。
    • data: 图例项的名称数组，对应到 series 数据项中的 name。

  4. series：系列数据配置，ECharts 中的图表类型（如柱状图、折线图、饼图等）都会通过 series 来定义。

    • name: 系列名称，用于 tooltip 提示框展示。
    • type: 图表类型，这里是 pie，表示饼图，其他常见类型有 bar（柱状图）、line（折线图）等。
    • radius: 饼图的半径大小，50% 表示占据容器宽度的50%。
    • data: 图表数据，包含各数据项的 value（数值）和 name（名称）。

3. 场景分析：使用 ECharts 展示数据统计

假设我们需要展示一个饼图，反映某公司不同部门的员工分布情况。我们可以通过 ECharts 来快速实现该需求，以下是代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>员工分布情况</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script><style>#chart {width: 100%;height: 400px;}</style>
</head>
<body><div id="chart"></div><script>var chart = echarts.init(document.getElementById('chart'));var option = {title: {text: '公司部门员工分布',subtext: '2025年数据',left: 'center'},tooltip: {trigger: 'item',formatter: '{b}: {c}人 ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['研发', '市场', '销售', '人力资源', '财务']},series: [{name: '员工分布',type: 'pie',radius: '50%',data: [{ value: 400, name: '研发' },{ value: 150, name: '市场' },{ value: 300, name: '销售' },{ value: 100, name: '人力资源' },{ value: 50, name: '财务' }]}]};chart.setOption(option);</script>
</body>
</html>

4. 详细解释

  1. title：此图表的主标题为“公司部门员工分布”，副标题为“2025年数据”，这些都位于页面中央显示。

  2. tooltip：每次鼠标悬停在图表的不同部门上时，都会弹出该部门员工数量以及该部门占总员工数的百分比。

  3. legend：显示不同部门的图例，并放置在页面的左侧。

  4. series：这里的 type 为 pie，表示我们使用饼图来展示员工分布，radius: '50%' 让饼图的大小为容器宽度的50%。

5. 进阶功能：自定义样式和交互

ECharts 提供了许多自定义图表样式和交互功能，可以进一步优化用户体验。例如，可以为每个部门设置不同的颜色，或者启用动画效果。

option = {...option,color: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'], // 自定义颜色animationType: 'expansion', // 动画效果series: [{name: '员工分布',type: 'pie',radius: '50%',label: {show: true,position: 'outside',formatter: '{b}: {c}人'},data: [{ value: 400, name: '研发' },{ value: 150, name: '市场' },{ value: 300, name: '销售' },{ value: 100, name: '人力资源' },{ value: 50, name: '财务' }]}]
};
  • color: 自定义每个部分的颜色。
  • label: 配置标签的显示方式，包括位置和格式。

6. 总结

ECharts 是一个功能丰富且灵活的数据可视化库，支持多种类型的图表。通过简单的配置，你可以实现复杂的交互效果和动态样式调整。了解了 ECharts 的基本配置项后，你可以根据实际需求进行定制化的开发和设计，帮助你更好地呈现数据分析结果。

相关文章：

ECharts极简入门

ECharts 是一个基于 JavaScript的开源可视化图表库&#xff0c;广泛应用于数据可视化的场景中&#xff0c;支持多种图表类型&#xff0c;如柱状图、折线图、饼图、散点图、雷达图等&#xff0c;且具有强大的自定义功能。 1. ECharts 基本使用 首先需要引入 ECharts 库&#xf…...

编程日记 2025/2/20 13:27:17

PHP培训机构教务管理系统小程序源码

&#x1f511; 培训机构教务管理系统——智慧教育&#xff0c;高效管理新典范 &#x1f680; 这款教务管理系统&#xff0c;是基于前沿的ThinkPHP框架与Uniapp技术深度融合&#xff0c;匠心打造的培训机构管理神器。它犹如一把开启高效运营与精细管理的金钥匙&#xff0c;专为…...

编程日记 2025/2/20 13:25:15

JAVA学习第五天

接口的变量定义固定为静态变量 接口里面只能有抽象方法&#xff0c;且不能有构造方法 如果不重写tostring方法&#xff0c;会打印没有价值的信息...

编程日记 2025/2/20 13:19:09

pnpm和npm安装TailwindCss

npm下载及初始化来自Tailwind官方文档 npm下载&#xff1a; npm install -D tailwindcss npm初始化Tailwind&#xff1a; npx tailwindcss init pnpm下载&#xff1a; pnpm add -D tailwindcss3.4.1 postcss autoprefixer pnpm初始化Tailwind&#xff1a; pnpm exec tailwindc…...

编程日记 2025/2/20 13:16:05

【云安全】云原生-K8S（四）安全问题分析

Kubernetes&#xff08;K8S&#xff09;因其强大的容器编排能力成为了云计算和微服务架构的首选&#xff0c;但同时也带来了复杂的安全挑战。本文将概述K8S的主要安全问题&#xff0c;帮助安全工程师理解潜在威胁&#xff0c;并采取相应的防护措施。 K8S 攻击面概览 下面两张…...

编程日记 2025/2/20 13:15:03

Cloud之快照存储（Cloud Snapshot Storage）

Cloud之快照存储 一、什么是快照 1. 快照的定义 快照&#xff08;Snapshot&#xff09;是一种记录某一时刻数据状态的技术。在计算机存储和虚拟化环境中&#xff0c;快照能够将文件系统或虚拟机的状态保存下来&#xff0c;以便以后能够回溯到某一特定时间点。快照通常用于备…...

编程日记 2025/2/20 13:14:02

cs106x-lecture11(Autumn 2017)-SPL实现

打卡cs106x(Autumn 2017)-lecture11 (以下皆使用SPL实现&#xff0c;非STL库&#xff0c;后续课程结束会使用STL实现) 1、diceRolls Write a recursive function named diceRolls accepts an integer representing a number of 6-sided dice to roll, and output all possibl…...

编程日记 2025/2/20 13:13:00

负载均衡集群( LVS 相关原理与集群构建 )

目录 1、LVS 相关原理 1.1、LVS集群的体系结构以及特点 1.1.1 LVS简介 1.1.2 LVS体系结构 1.1.3 LVS相关术语 1.1.4 LVS工作模式 1.1.5 LVS调度算法 1.2 LVS-DR集群介绍 1.2.1 LVS-DR模式工作原理 1.2.2 LVS-DR模式应用特点 1.2.3 LVS-DR模式ARP抑制 1.3 LVS – NA…...

编程日记 2025/2/20 13:10:58

【分布式】Hadoop完全分布式的搭建（零基础）

Hadoop完全分布式的搭建 环境准备&#xff1a; &#xff08;1&#xff09;VMware Workstation Pro17&#xff08;其他也可&#xff09; &#xff08;2&#xff09;Centos7 &#xff08;3&#xff09;FinalShell &#xff08;一&#xff09;模型机配置 0****&#xff09;安…...

编程日记 2025/2/20 13:09:56

基于Java+Swing+Mysql实现人事管理信息系统

基于JavaSwingMysql实现人事管理信息系统 一、系统介绍二、功能展示1.用户登陆2.用户注册3.员工信息添加、删除4.员工信息查询、修改5.部门管理6、员工考核 三、数据库四、其它1.其他系统实现五.获取源码 一、系统介绍 系统功能&#xff1a;用户登陆、用户注册、员工信息添加、…...

编程日记 2025/2/20 13:06:52

DeepSeek与ChatGPT：会取代搜索引擎和人工客服的人工智能革命

云边有个稻草人-CSDN博客 在众多创新技术中&#xff0c;DeepSeek和ChatGPT无疑是最为引人注目的。它们通过强大的搜索和对话生成能力&#xff0c;能够改变我们与计算机交互的方式&#xff0c;帮助我们高效地获取信息&#xff0c;增强智能服务。本文将深入探讨这两项技术如何结合…...

编程日记 2025/2/20 13:04:49

企业级RAG开源项目分享：Quivr、MaxKB、Dify、FastGPT、RagFlow

企业级 RAG GitHub 开源项目深度分享&#xff1a;Quivr、MaxKB、Dify、FastGPT、RagFlow 及私有化 LLM 部署建议 随着生成式 AI 技术的成熟&#xff0c;检索增强生成&#xff08;RAG&#xff09;已成为企业构建智能应用的关键技术。RAG 技术能够有效地将大型语言模型&#xff…...

编程日记 2025/2/20 13:03:48

js基础知识总结

1、js数据类型有哪些&#xff1f;存储区别 js基础类型及引用类型存储区别代码示例如下&#xff1a; // 基本数据类型 let a 10; let b a; // b 是 a 的一个副本 b 20; // 修改 b 不会影响 …...

编程日记 2025/2/20 13:02:46

LearnOpenGL——高级OpenGL（下）

教程地址&#xff1a;简介 - LearnOpenGL CN 高级数据 原文链接&#xff1a;高级数据 - LearnOpenGL CN 在OpenGL中&#xff0c;我们长期以来一直依赖缓冲来存储数据。本节将深入探讨一些操作缓冲的高级方法。 OpenGL中的缓冲本质上是一个管理特定内存块的对象&#xff0c;它…...

编程日记 2025/2/20 12:59:43

vue脚手架开发打地鼠游戏

游戏设计&#xff1a; 规划游戏的核心功能&#xff0c;如场景、随机出现的地鼠、计分系统、游戏时间限制等。简单设计游戏流程&#xff0c;包括开始界面、游戏进行中、关卡设置&#xff08;如不同关卡地鼠出现数量、游戏时间等&#xff09;、关卡闯关成功|失败、游戏结束闯关成…...

编程日记 2025/2/20 12:58:40

uniapp 连接mqtt

1&#xff1a;下载插件 npm install mqtt 2&#xff1a;创建 mqtt.js /* main.js 项目主入口注入实例 */ // import mqttTool from ./lib/mqttTool.js // Vue.prototype.$mqttTool mqttTool/* 使用范例见 /pages/index/index.vue */ // mqtt协议&#xff1a;H5使用ws/wss APP-…...

编程日记 2025/2/20 12:53:32

EX_25/2/19

1. 封装一个 File 类&#xff0c;用有私有成员 File* fp 实现以下功能 File f "文件名" 要求打开该文件 f.write(string str) 要求将str数据写入文件中 string str f.read(int size) 从文件中读取最多size个字节&#xff0c;并将读取到的数据返回 析构函数 …...

编程日记 2025/2/20 12:52:31

Breakout Tool

思科 CML 使用起来还是很麻烦的&#xff0c;很多操作对于习惯了 secure crt 或者 putty 等工具的网络工程师都不友好。 Breakout Tool 提供对远程实验室中虚拟机控制台与图形界面的本地化接入能力&#xff0c;其核心特性如下&#xff1a; Console 访问&#xff1a;基于 Telnet…...

编程日记 2025/2/20 12:49:28

【大模型】DeepSeek：AI浪潮中的破局者

【大模型】DeepSeek&#xff1a;AI浪潮中的破局者 引言&#xff1a;AI 新时代的弄潮儿DeepSeek&#xff1a;横空出世展锋芒&#xff08;一&#xff09;诞生背景与发展历程&#xff08;二&#xff09;全球影响力初显 探秘 DeepSeek 的技术内核&#xff08;一&#xff09;独特的模…...

编程日记 2025/2/20 12:42:20

Kafka 简介

Kafka 简介 Apache Kafka 是一个开源的分布式流处理平台&#xff0c;广泛应用于实时数据流处理、日志管理、消息传递等场景。Kafka 最初由 LinkedIn 开发&#xff0c;并于 2011 年捐献给 Apache 软件基金会。 Kafka 的设计目标是高吞吐量、低延迟和高可用性&#xff0c;它能够…...

编程日记 2025/2/20 12:41:18

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/24 7:39:50

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21

《Offer来了：Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了：Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了：Java面试核心知识点精讲（原理篇）》技术文章大纲核心主题：Java基础原理与面试高频考点Java虚拟机（JVM）原理Java并发编程原理Jav…...

编程新知 2025/9/14 13:51:48

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

编程新知 2026/2/10 2:09:10