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

ECharts

news 2026/5/12 23:35:42

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

如何在Windows上快速安装安卓应用：APK Installer终极指南

如何在Windows上快速安装安卓应用&#xff1a;APK Installer终极指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想要在Windows电脑上运行安卓应用&…...

编程新知 2026/5/12 22:46:42

詹姆斯·韦伯望远镜：344个单点故障背后的航天工程极限挑战

1. 韦伯望远镜的“生死十日”&#xff1a;一场价值百亿美元的太空芭蕾作为一名在航天与深空探测领域摸爬滚打了十几年的工程师&#xff0c;我经历过无数次地面测试的紧张&#xff0c;也见证过发射倒计时的屏息瞬间。但像詹姆斯韦伯空间望远镜&#xff08;JWST&#xff09;这样&…...

编程新知 2026/5/12 22:31:26

FPGA单粒子翻转（SEU）原理、影响与防护策略全解析

1. 是什么在“骚扰”我的FPGA&#xff1f;——深入解析单粒子翻转作为一名在电子设计领域摸爬滚打了十几年的工程师&#xff0c;我经手过不少高可靠性的项目&#xff0c;从地面通信基站到近地轨道的载荷设备都有涉及。在这些项目中&#xff0c;有一个幽灵般的问题总是如影随形&…...

编程新知 2026/5/12 22:02:44

京东自动评价终极指南：如何用Python脚本轻松完成批量评价

京东自动评价终极指南&#xff1a;如何用Python脚本轻松完成批量评价 【免费下载链接】jd_AutoComment 自动评价,仅供交流学习之用 项目地址: https://gitcode.com/gh_mirrors/jd/jd_AutoComment 还在为京东购物后的繁琐评价工作烦恼吗&#xff1f;每次大促后面对几十个…...

编程新知 2026/5/12 21:31:08

深度学习在系外行星探测中的应用：ExoDNN框架解析与实践

1. 项目概述&#xff1a;当深度学习遇见星空系外行星探测&#xff0c;这个听起来就充满科幻感的领域&#xff0c;在过去二十年里彻底改变了我们对宇宙的认知。从最初通过“凌星法”和“径向速度法”发现几颗气态巨行星&#xff0c;到如今TESS、开普勒等太空望远镜的海量数据中&…...

编程新知 2026/5/12 19:41:07

回归分析：机器学习预测建模的基石与工业实践

1. 项目概述&#xff1a;为什么回归分析是机器学习的“定海神针” 如果你刚接触机器学习&#xff0c;可能会被各种炫酷的算法名字搞得眼花缭乱——神经网络、支持向量机、随机森林……但在所有这些“明星”算法背后&#xff0c;有一个基础得不能再基础&#xff0c;却又重要得不…...

编程新知 2026/5/12 19:37:04

从需求到开发的全流程

一、流程图二、各阶段拆解&#x1f50d;第一阶段&#xff1a;需求细化与设计&#xff08;会前关键&#xff09;此阶段的目标是产出一份清晰、可评审的PRD初稿。步骤核心动作与目的产出物与实战技巧1. 深度需求调研目的&#xff1a;消化方案&#xff0c;与原始需求方及关键用户深…...

编程新知 2026/5/12 18:07:34

BG3ModManager：博德之门3模组管理终极指南，告别模组冲突烦恼！[特殊字符]

BG3ModManager&#xff1a;博德之门3模组管理终极指南&#xff0c;告别模组冲突烦恼&#xff01;&#x1f680; 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModMa…...

编程新知 2026/5/12 17:27:53

怎么降维普AI率到30%以下？本科合格区间实战完整路径方案！

怎么降维普AI率到30%以下&#xff1f;本科合格区间实战完整路径方案&#xff01; 本科生维普 AI 率合格线 30%&#xff0c;比硕博严标准 15% 宽松一倍。但如果你的论文 AI 率 60% 重灾区&#xff0c;降到 30% 以下还是需要工具。你的真实情况是什么&#xff1f; 本科 4-5 万字论…...

编程新知 2026/5/12 17:19:00

解放双手：D3KeyHelper让暗黑3游戏操作变得前所未有的简单

解放双手&#xff1a;D3KeyHelper让暗黑3游戏操作变得前所未有的简单 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑3中繁琐的技能循环和…...

编程新知 2026/5/12 17:06:22