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

ECharts极简入门

news 2026/2/9 22:14:01

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

编程新知 2026/2/7 20:23:55

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26

基于单片机的宠物屋智能系统设计与实现（论文+源码）

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...

编程新知 2026/1/26 12:38:34

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...

编程新知 2026/1/26 17:05:57

基于Python的气象数据分析及可视化研究

目录 一.&#x1f981;前言二.&#x1f981;开源代码与组件使用情况说明三.&#x1f981;核心功能1. ✅算法设计2. ✅PyEcharts库3. ✅Flask框架4. ✅爬虫5. ✅部署项目 四.&#x1f981;演示效果1. 管理员模块1.1 用户管理 2. 用户模块2.1 登录系统2.2 查看实时数据2.3 查看天…...

编程新知 2026/2/6 1:10:23