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

ECharts

news 文章来源：https://blog.csdn.net/weixin_43956958/article/details/132868570 2024/10/30 9:28:47

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

IP代理与加速器：理解它们的区别与共同点

在网络使用过程中&#xff0c;我们经常会遇到需要提高访问速度或保护隐私的需求。IP代理和加速器都是常见的应对方案&#xff0c;但它们在工作原理和应用场景上存在一些区别。本文将为您深入探讨IP代理和加速器的异同&#xff0c;帮助您更好地理解它们的作用和适用情况&#xf…...

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

Java中List转字符串的方法

一、使用String.join方法 在Java 8之后&#xff0c;String类增加了一个静态方法join()&#xff0c;可以方便地将列表中的元素连接成字符串。 // 创建List List<String> list Arrays.asList("Google", "Baidu", "Taobao"); // 以逗号分隔…...

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

PyTorch实战：实现MNIST手写数字识别

前言 PyTorch可以说是三大主流框架中最适合初学者学习的了&#xff0c;相较于其他主流框架&#xff0c;PyTorch的简单易用性使其成为初学者们的首选。这样我想要强调的一点是&#xff0c;框架可以类比为编程语言&#xff0c;仅为我们实现项目效果的工具&#xff0c;也就是我们…...

编程日记 2023/9/21 20:58:41

【计算机网络】深入理解TCP协议二（连接管理机制、WAIT_TIME、滑动窗口、流量控制、拥塞控制）

TCP协议 1.连接管理机制2.再谈WAIT_TIME状态2.1理解WAIT_TIME状态2.2解决TIME_WAIT状态引起的bind失败的方法2.3监听套接字listen第二个参数介绍 3.滑动窗口3.1介绍3.2丢包情况分析 4.流量控制5.拥塞控制5.1介绍5.2慢启动 6.捎带应答、延时应答 1.连接管理机制 正常情况下&…...

编程日记 2023/9/21 20:57:40

springboot整合sentinel完成限流

1、直入正题&#xff0c;下载sentinel的jar包 1.1 直接到Sentinel官网里的releases下即可下载最新版本&#xff0c;Sentinel官方下载地址&#xff0c;直接下载jar包即可。不过慢&#xff0c;可能下载不下来 1.2 可以去gitee去下载jar包 1.3 下载完成后&#xff0c;进行打包…...

编程日记 2023/9/21 20:56:39

signal(SIGPIPE, SIG_IGN)

linux查看signal常见信号。 [rootplatform:]# kill -l1) HUP2) INT3) QUIT4) ILL5) TRAP6) ABRT7) BUS8) FPE9) KILL 10) USR1 11) SEGV 12) USR2 13) PIPE 14) ALRM 15) TERM 16) STKFLT 17) CHLD 18) CONT 19) STOP 20) TSTP 21) TTIN 22) TTOU 23) URG 24) XCPU 25) XFSZ 2…...

编程日记 2023/9/21 20:55:38

GAN学习笔记

1.原始的GAN 1.1原始的损失函数 1.1.1写法1参考1&#xff0c;参考2 1.1.2 写法2 where, G Generator D Discriminator Pdata(x) distribution of real data P(z) distribution of generator x sample from Pdata(x) z sample from P(z) D(x) Discriminator network G…...

编程日记 2023/9/21 20:53:35

layui框架学习（45： 工具集模块）

layui的工具集模块util支持固定条、倒计时等组件&#xff0c;同时提供辅助函数处理时间数据、字符转义、批量事件处理等操作。   util模块中的fixbar函数支持设置固定条&#xff08;2.7版本的帮助文档中叫固定块&#xff09;&#xff0c;是指固定在页面一侧的工具条元素&…...

编程日记 2023/9/21 20:51:33

车道检测：Decoupling the Curve Modeling and Pavement Regression for Lane Detection

论文作者&#xff1a;Wencheng Han,Jianbing Shen 作者单位&#xff1a;University of Macau 论文链接&#xff1a;http://arxiv.org/abs/2309.10533v1 内容简介&#xff1a; 1&#xff09;方向&#xff1a;车道检测 2&#xff09;应用&#xff1a;车道检测 3&#xff09…...

编程日记 2023/9/21 20:50:31

【扩散生成模型】Diffusion Generative Models

提出扩散模型思想的论文&#xff1a; 《Deep Unsupervised Learning using Nonequilibrium Thermodynamics》理解 扩散模型综述&#xff1a; “扩散模型”首篇综述论文分类汇总&#xff0c;谷歌&北大最新研究 理论推导、代码实现&#xff1a; What are Diffusion Models?…...

编程日记 2023/9/21 20:49:30

取消网站备案时间/营销型网站建设套餐

写在前面&#xff0c;Java基础系列文章都是作者基于b站尚硅谷的Java基础视频所做的笔记&#xff0c;没有时间的同学可以认真看看&#xff0c;如果有时间的同学&#xff0c;还是建议看看视频&#xff0c;毕竟笔记说到底还是自己的东西&#xff0c;每个人的习惯也是不一样的&…...

编程日记 2024/10/29 22:54:09

商城网站的模块设计/百度网盘登录

东阳的学习笔记 条款5&#xff1a;了解C默默编写并调用哪些函数 C默认合成一个空构造函数&#xff0c;copy构造和copy运算符&#xff08;有条件的&#xff09;若成员变量为引用类型&#xff0c;C的响应是拒绝编译若class包含引用/const类型&#xff0c;则需要自定义copy操作当…...

编程日记 2024/10/29 22:53:08

如何做网站刷题/网站排名软件推荐

简单来说&#xff1a;就是用量子比特代替原来的普通比特。从物理层面上来看&#xff0c;量子计算机不是基于普通的晶体管&#xff0c;而是使用自旋方向受控的粒子(比如质子核磁共振)或者偏振方向受控的光子(学校实验大多用这个)等等作为载体。当然从理论上来看任何一个多能级系…...

编程日记 2024/10/29 20:40:53

小程序做网站登录/网站怎么推广出去

题目大意$\newcommand{\SD}{\mathrm{SD}}$ 给定一个 $n1$ 个点的有向无环图&#xff0c;点从 $0$ 开始编号。无重边、自环&#xff0c;且从每个点 $u$ 都能到达 $0$ 号点。如果每条 $u\leadsto 0$ 路径&#xff08;$u\ne 0$&#xff09;都经过点 $v$ &#xff08;$v\ne 0$ 且 $…...

编程日记 2024/10/29 19:52:43

做钓鱼网站论坛/长沙网站外包公司

1.爬楼梯 假设你正在爬楼梯&#xff0c;需要n步你才能到达顶部。但每次你只能爬一步或者两步&#xff0c;你能有多少种不同的方法爬到楼顶部&#xff1f; 思考&#xff1a; 登上第1层&#xff1a;1种 登上第2层&#xff1a;2种 登上第3层&#xff1a;123种 登上第4层&…...

编程日记 2024/10/29 18:53:59

怎么用qq邮箱做网站/cps广告联盟网站

Oracle 1、Oracle的体系结构 2、Oracle的存储结构 分为物理存储结构和逻辑存储结构&#xff0c;如下图&#xff1a; 物理存储&#xff1a; 控制文件(.ctl)、日志文件(.log)、数据文件(.dbf/.ora) 数据文件&#xff1a; 数据文件时数据库的物理存储单位。 数据库的数据是存…...

编程日记 2024/10/29 12:42:58