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

ECharts

news 2026/2/8 13:53:11

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts 遵循 Apache-2.0 开源协议，免费商用。

安装

下载地址：https://echarts.apache.org/zh/download.html

  • 完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
  • 常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
  • 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

使用

创建 HTML 页面，引入 echarts.min.js：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script>
</head>
</html>

为 ECharts 准备一个具备高宽的 DOM 容器：

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

设置配置信息

ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

标题：

title: {text: '第一个 ECharts 实例'
}

提示信息：

tooltip: {},

图例组件：展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {data: [{name: '系列1',// 强制设置图形为圆。icon: 'circle',// 设置文本为红色textStyle: {color: 'red'}}]
}

X 轴：配置要在 X 轴显示的项:

xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴：配置要在 Y 轴显示的项。

yAxis: {}

系列列表：每个系列通过 type 决定自己的图表类型:

series: [{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

type类型如下：

  • ‘bar’：柱状/条形图
  • ‘line’：折线/面积图
  • ‘pie’：饼图
  • ‘scatter’：散点（气泡）图
  • ‘effectScatter’：带有涟漪特效动画的散点（气泡）
  • ‘radar’：雷达图
  • ‘tree’：树型图
  • ‘treemap’：树型图
  • ‘sunburst’：旭日图
  • ‘boxplot’：箱形图
  • ‘candlestick’：K线图
  • ‘heatmap’：热力图
  • ‘map’：地图
  • ‘parallel’：平行坐标系的系列
  • ‘lines’：线图
  • ‘graph’：关系图
  • ‘sankey’：桑基图
  • ‘funnel’：漏斗图
  • ‘gauge’：仪表盘
  • ‘pictorialBar’：象形柱图
  • ‘themeRiver’：主题河流
  • ‘custom’：自定义系列

样式设置

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。

var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

或者在官方的主题编辑器选择自己喜欢的主题下载：
https://echarts.apache.org/zh/theme-builder.html
目前主题下载提供了 JS 版本和 JSON 版本。
在这里插入图片描述

常用配置项说明

https://echarts.apache.org/zh/option.html#title
示例：

option = {title: {text: "Main Title",		// 主标题文本，支持使用 \n 换行。subtext: "Sub Title",	// 副标题文本。left: "center",			// title 组件离容器左侧的距离。top: "center",			// title 组件离容器上侧的距离。textStyle: {			// 主标题文字的颜色。fontSize: 30},subtextStyle: {			// 副标题文字的颜色。fontSize: 20},backgroundColor: rgb(128, 128, 128)		// 标题背景色，默认透明。}
}

相关文章：

ECharts

ECharts是一款基于JavaScript的数据可视化图表库&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图&#xff0c;用于统计的盒形图&#xff0c;用于地理数据可视化的…...

编程日记 2023/9/21 21:34:16

jsoup框架技术文档--java爬虫--架构体系

阿丹&#xff1a; 在学习以及认知使用一个新技术之前一定要搞清楚有关框架的架构体系。了解一下该技术的底层会对后面编写代码以及寻找报错都是很有用处的&#xff0c;前期做的铺垫多一点&#xff0c;后期开发的时候就很方便。 jsoup框架的关键组件 JSoup框架的关键组件主要包…...

编程日记 2023/9/21 21:33:16

OpenStack创建云主机并连接CRT

文章目录 OpenStackT版创建云主机并连接CRT命令行操作&#xff08;1&#xff09;创建镜像&#xff08;2&#xff09;创建实例&#xff08;3&#xff09;创建网络创建内网创建外网 &#xff08;4&#xff09;创建安全组&#xff08;5&#xff09;创建路由&#xff08;6&#xff…...

编程日记 2023/9/21 21:32:15

linux-sed命令

目录 1.linux-shell sed获取某一段字符串 2.linux-shell shell脚本中 sed -n取出某一行赋给一个变量 3.linux-shell sed查询某一行 1.linux-shell sed获取某一段字符串 如果要获取的是某一段字符串&#xff0c;可以在 sed 命令中使用正则表达式来指定需要获取的字符串。例如…...

编程日记 2023/9/21 21:31:14

Elasticsearch：什么是向量和向量存储数据库，我们为什么关心？

Elasticsearch 从 7.3 版本开始支持向量搜索。从 8.0 开始支持带有 HNSW 的 ANN 向量搜索。目前 Elasticsearch 已经是全球下载量最多的向量数据库。它允许使用密集向量和向量比较来搜索文档。 矢量搜索在人工智能和机器学习领域有许多重要的应用。 有效存储和检索向量的数据库…...

编程日记 2023/9/21 21:30:12

JOSEF约瑟 剩余电流继电器PFR-5 PFE-W-20 国产化改造ZLR-G81 ZCT-45

系列型号&#xff1a; PFR-003剩余电流继电器 PFR-03剩余电流继电器 PFR-5剩余电流继电器 PFR-W-105互感器 PFR-W-140互感器 PFR-W-20互感器 PFR-W-210互感器 PFR-W-30互感器 PFR-W-35互感器 PFR-W-70互感器 一、用途 PFR剩余电流继电器&#xff08;以下简称继电器…...

编程日记 2023/9/21 21:27:09

分别用Python和Go实现对文件夹及其子文件夹里的文件进行批量重命名

文章目录 问题阐述上代码结果如何 问题阐述 最近在继续提高自己的go技术时&#xff0c;从网上一些平台获取到了一些学习资料&#xff0c;然后下载到本地后&#xff0c;文件的命名是真的像衣托答辩&#xff1a; 除了上述的文件&#xff0c;还有一mol多神奇的命名&#xff0c;害…...

编程日记 2023/9/21 21:25:06

redis深度历险 千帆竞发 —— 分布式锁

分布式应用进行逻辑处理时经常会遇到并发问题。 比如一个操作要修改用户的状态&#xff0c;修改状态需要先读出用户的状态&#xff0c;在内存里进行修改&#xff0c;改完了再存回去。如果这样的操作同时进行了&#xff0c;就会出现并发问题&#xff0c;因为读取和保存状态这两个…...

编程日记 2023/9/21 21:24:05

C#根据中文首字母排序

第一种方式&#xff1a; 这种方式会受制于服务器的区域和语言设置。 1.首先添加一个排序类ChineseNameComparer public class ChineseNameComparer : IComparer<string> {public int Compare(string x, string y){if (x null || y null)return 0;var xFirstChar x.Su…...

编程日记 2023/9/21 21:21:02

仪表基础知识培训

压力传感器：E+H PMX5x/FMX5x 一、安装：安装注意事项: 1、水平安装时仪表的呼吸孔(1)需要向下安装，并远离污染物。 2、请勿用坚硬的物体擦拭或接触膜片。 3、请勿安装在水泵的入口和搅拌叶附近 二、供电、接线、信号、：二线制，仪表输出4-20mA 三、量程：设置最大最小量程…...

编程日记 2023/9/21 21:20:01

无涯教程-JavaScript - PI函数

描述 PI函数返回数字3.14159265358979,数学常数pi,精确到15位数字。 语法 PI ()争论 PI函数语法没有参数。 适用性 Excel 2007,Excel 2010,Excel 2013,Excel 2016 Example JavaScript 中的 PI函数 - 无涯教程网无涯教程网提供描述PI函数返回数字3.14159265358979,数学常…...

编程日记 2023/9/21 21:19:01

前端防抖和节流

前端防抖和节流 概述 防抖&#xff1a; 防止抖动&#xff0c;个人字面理解此处防的不是页面的抖动&#xff0c;而是用户手抖。为了防止用户快速且频繁的触发事件而导致多次执行事件函数&#xff0c;这样的场景有很多&#xff0c;比如监听滚动、鼠标移动事件onmousemove、频繁…...

编程日记 2023/9/21 21:18:00

[pai-diffusion]pai的easynlp的clip模型训练

EasyNLP带你玩转CLIP图文检索 - 知乎作者&#xff1a;熊兮、章捷、岑鸣、临在导读随着自媒体的不断发展&#xff0c;多种模态数据例如图像、文本、语音、视频等不断增长&#xff0c;创造了互联网上丰富多彩的世界。为了准确建模用户的多模态内容&#xff0c;跨模态检索是跨模态…...

编程日记 2023/9/21 21:16:59

期权如何交易？期权如何做模拟交易？

买卖期权的第一步就是要有期权账户&#xff0c;国内的期权品种有商品期权和ETF期权以及股指期权&#xff0c;每种的开户方式和要求都不同&#xff0c;下文为大家介绍期权如何交易&#xff1f;期权如何做模拟交易&#xff1f; 一、期权交易需要开立一个期权账户&#xff0c;可以…...

编程日记 2023/9/21 21:15:57

【新书推荐】大模型赛道如何实现华丽的弯道超车 —— 《分布式统一大数据虚拟文件系统 Alluxio原理、技术与实践》

文章目录 大模型赛道如何实现华丽的弯道超车 —— AI/ML训练赋能解决方案01 具备对海量小文件的频繁数据访问的 I/O 效率02 提高 GPU 利用率&#xff0c;降低成本并提高投资回报率03 支持各种存储系统的原生接口04 支持单云、混合云和多云部署01 通过数据抽象化统一数据孤岛02 …...

编程日记 2023/9/21 21:11:53

Calendar对象获取当前周的bug

项目场景&#xff1a; 双周项目管理&#xff0c;需要获取当前周为一年之中的第几周&#xff0c;原先的代码是用Calendar对象&#xff0c;先用setTime&#xff08;&#xff09;把当前时间传入&#xff0c;再用get&#xff08;3&#xff09;获取一年中的第几周 问题描述 实际发…...

编程日记 2023/9/21 21:10:52

嵌入式环境buildroot的espeak配置与编译

1、在buildroot目录下输入make menuconfig 2、选择Target packages 3、选择Audio and video applications 4、选择espeak、选择alsa via portaudio &#xff08;新版嵌入式linux一般都是用alsa音频驱动&#xff09; 5、配置portaudio 选择Library 6、选择Audio/Sound 7、选择…...

编程日记 2023/9/21 21:09:51

物理机环境搭建-linux部署nginx

1、安装nginx部署所需依赖 yum install -y gcc-c pcre pcre-devel zlib zlib-devel openssl openssl-devel2、安装nginx包 wget http://nginx.org/download/nginx-1.8.0.tar.gz 如果没有wget可以安装一下 yum install -y wget下载完成后可以在/usr/local/下放置tar包&#xf…...

编程日记 2023/9/21 21:07:50

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac)

删除安装Google Chrome浏览器时捆绑安装的Google 文档、表格、幻灯片、Gmail、Google 云端硬盘、YouTube网址链接(Mac) Mac mini操作系统&#xff0c;安装完 Google Chrome 浏览器以后&#xff0c;单击 启动台 桌面左下角的“显示应用程序”&#xff0c;我们发现捆绑安装了 Goo…...

编程日记 2023/9/21 21:04:46

硬件故障诊断：快速定位问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

编程日记 2023/9/21 21:02:45

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2026/1/20 17:16:46

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2026/1/25 13:33:24

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29