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

ECharts极简入门

news 2026/2/10 0:19:03

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

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2026/2/5 4:23:32

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

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

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

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

编程新知 2025/10/14 6:46:13

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

编程新知 2025/8/25 19:51:15

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

编程新知 2025/9/12 3:11:17

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

编程新知 2026/2/1 11:11:34

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

编程新知 2026/1/31 8:08:10