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

ECharts极简入门

news 2026/4/28 21:08:47

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

Windows 11打开方式图标消失、选项重复？别慌，手把手教你用注册表精准修复（附详细路径）

Windows 11打开方式异常全攻略&#xff1a;从问题诊断到注册表精修 最近不少升级到Windows 11的用户反馈&#xff0c;右键菜单中的"打开方式"选项出现了各种奇怪现象——图标消失、选项重复甚至点击无响应。作为一名长期与Windows系统"斗智斗勇"的技术顾问…...

编程新知 2026/4/28 21:07:08

如何用Open Images数据集快速构建你的第一个计算机视觉模型：完整免费教程

如何用Open Images数据集快速构建你的第一个计算机视觉模型&#xff1a;完整免费教程 【免费下载链接】dataset The Open Images dataset 项目地址: https://gitcode.com/gh_mirrors/dat/dataset 还在为寻找高质量标注数据而发愁吗&#xff1f;Open Images数据集就是你的…...

编程新知 2026/4/28 20:35:26

分钟搞懂深度学习AI：实操篇：池化层

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

编程新知 2026/4/28 20:12:37

CheatEngine-DMA插件完整教程：硬件级内存访问的终极解决方案

CheatEngine-DMA插件完整教程&#xff1a;硬件级内存访问的终极解决方案 【免费下载链接】CheatEngine-DMA Cheat Engine Plugin for DMA users 项目地址: https://gitcode.com/gh_mirrors/ch/CheatEngine-DMA 在游戏修改和内存分析领域&#xff0c;DMA技术正成为突破传…...

编程新知 2026/4/28 19:29:22

别再买现成模块了！手把手教你用FT232RL-REEL芯片，从零设计一个USB转串口调试器（附完整原理图）

从芯片到产品&#xff1a;基于FT232RL-REEL的工业级USB-UART转换器全流程开发指南 当市面上充斥着各种廉价USB转串口模块时&#xff0c;为什么我们还要从零开始设计&#xff1f;答案很简单——可靠性、定制化和真正的技术掌控。作为电子工程师&#xff0c;我曾在量产项目中遇到…...

编程新知 2026/4/28 19:28:54

量化系统MMTP简介-R7

量化交易工具 MMTP R7版本&#xff0c;欢迎大家免费试用。 一、系统介绍 1、支持多账户、多市场同时交易。 2、全C开发&#xff0c;支持跨平台。 3、灵活的对接方式&#xff0c;支持自定义协议转换为本系统定义格式&#xff08;需额外开发&#xff09; 4、扩展简单&#xff0c…...

编程新知 2026/4/28 18:39:54

2026届最火的十大AI辅助写作神器实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在学术领域里&#xff0c;人工智能辅助论文写作已然变成了重要的议题&#xff0c;AI工具可以…...

编程新知 2026/4/28 17:38:09

3步掌握Charticulator：从数据到专业图表的免费完整指南

3步掌握Charticulator&#xff1a;从数据到专业图表的免费完整指南 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 数据可视化不再是程序员的专利&#xff0c;现…...

编程新知 2026/4/28 13:35:54

别再死记硬背了！用VSCode+iverilog快速验证你的第一个Verilog模块（附代码模板）

用VSCode与iverilog打造高效Verilog开发环境&#xff1a;从零实现LED控制器 在数字电路设计领域&#xff0c;Verilog作为硬件描述语言的代表&#xff0c;其学习曲线常常让初学者望而生畏。传统教学中要求学生记忆大量语法规则后再进行实践&#xff0c;这种"先理论后实践&…...

编程新知 2026/4/28 13:18:13

网络原理笔记

目录 1 网络中的五元组 2 协议分层 OSI七层模型 TCP / IP五层&#xff08;或四层&#xff09;模型 封装和分用 3 网络编程套接字 Socket套接字 网络编程 TCP/UDP协议的区别 4 TCP/IP协议 应用层 JSON 进程的两个问题 UDP协议 TCP协议 TCP 可靠传输&#xff08;…...

编程新知 2026/4/28 13:16:04