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

ECharts可视化库--常用组件

news 2026/4/4 4:27:53

目录

一.series系列

二.常见组件 

1.标题title

2.图例legend 

3.工具栏toolbox

4.提示框tooltip 

5.坐标轴 xAxis yAsix

6.series系列

        上一篇已经介绍了ECharts库的导入工作和绘制基本的图标，今天我们来了解一下常用的组件，如果对数据可视化感兴趣的麻烦点个关注，内容会持续更新。

        如果不清楚ECharts库的导入过程的可以参考：ECharts导入

在介绍常用组件之前，先了解一下series系列

一.series系列

        我们知道数据的可视化包含了我们可以直接看见的图表，还包含了数据，而这些都包含series系列里，一个series系列必须包含两个要素：图表数值data和图表类型type，有了这两个要素数据才可以表现出来

常见的图表类型：

  • 折线图line
  • 柱状图bar
  • 饼图pie
  • 散点图scatter
  • 关系图graph
  • 树图tree

        例如：一个折线图表,type为line，给定数据data

<script type="text/javascript">// 因为该demo会经常更该，所以要销毁前一个图表echarts.init(document.getElementById('div')).dispose();//定义var myChart = echarts.init(document.getElementById('div'));var option={xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{type:'line',data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}myChart.setOption(option);
</script>

二.常见组件 

1.标题title

  • 主标题 title
  • 副标题 subtext
  • 位置 left
  • 主标题样式 textStyle
  • 副标题样式 subtextStyle
  • 可见性 show

例如：在上面的例子中加入标题

2.图例legend 

        图例legend方便对数据的分辨，它的data参数和series系列搭配使用

 var option={legend:{data:['人数'],  //要和series的name对于},xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{name:'人数',type:'line',data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}

在数据上会多出legend图例 

3.工具栏toolbox

  • 保存图片 saveAslmage
  • 配置项还原 restore
  • 数据视图工具 dataView
  • 数据区域缩放 dataZoom
  • 动态类型切换 magicType

例如：加上toolbox后

toolbox:{feature:{saveAsImage:{type:'jpg'},dataView:{},restore:{},dataZoom:{},magicType:{type:['line','bar','stack','titled']}}},

图表上会多出一些工具 

4.提示框tooltip 

提示触发方式trigger

item 图形触发，主要在散点图，饼图等无类目轴的图表中使用

axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表

none什么都不触发

例如：在上面的例子中加入提示框

 tooltip:{trigger:'axis'},

当鼠标触碰到图表坐标时，会有提示信息

5.坐标轴 xAxis yAsix

  •  坐标名称 name
  • 类名数据 data 

y轴的分割设置：

  • splitNUmber 分割段数
  • interval 坐标分割间隔
  • minlnterval 坐标轴最小间隔
  • maxlnterval 坐标轴最大间隔

6.series系列

  •  类型 type
  • 类名名 name
  • 数据data
  • 标记点 markPoint

markPoint：{

        data：[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}

  • 标记线 markLine

markLine：{

        data：[

{type:'min'},{type:'max'},{value:'value',coord:[x,y]}        //coord 坐标

]

}

全例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<script src="echart.js"></script><style></style>
</head>
<body>
<div style="height: 500px;width: 600px" id="div"></div>
<script type="text/javascript">// 因为该demo会经常更该，所以要销毁前一个图表echarts.init(document.getElementById('div')).dispose();//定义var myChart = echarts.init(document.getElementById('div'));var option={legend:{data:['人数'],  //要和series的name对于},title:{text:'主标题',subtext:'副标题',textStyle:{color:'blue',fontSize:20},subtextStyle:{color: 'red',fontSize: 10}},toolbox:{feature:{saveAsImage:{type:'jpg'},dataView:{},restore:{},dataZoom:{},magicType:{type:['line','bar','stack','titled']}}},tooltip:{trigger:'axis'},xAxis:{data:['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec']},yAxis:{},series:[{name:'人数',type:'bar',data:[43,62,56,91,23,5,12,31,38,97,86,57],markPoint:{data:[{type:'min'},{type: 'max'},{coord:[0,70],value:70},]},// markLine:{//     date:[//         {name:'平均线',type:'min'},//     ]// },}]}myChart.setOption(option);</script>
</body>
</html>

相关文章：

ECharts可视化库--常用组件

目录 一.series系列 二.常见组件 1.标题title 2.图例legend 3.工具栏toolbox 4.提示框tooltip 5.坐标轴 xAxis yAsix 6.series系列 上一篇已经介绍了ECharts库的导入工作和绘制基本的图标&#xff0c;今天我们来了解一下常用的组件&#xff0c;如果对数据可视化感兴…...

编程日记 2023/5/14 18:03:49

openpnp - 设备开机后, 吸嘴校验失败的解决方法

文章目录openpnp - 设备开机后, 吸嘴校验失败的解决方法概述重新校验吸嘴ENDopenpnp - 设备开机后, 吸嘴校验失败的解决方法 概述 设备开机后, 默认会校验吸嘴座上已经安装的2个吸嘴. 如果开机校验吸嘴失败, 就需要用向导重新校验失败的吸嘴. 具体是哪个吸嘴校验失败, 可以看…...

编程日记 2023/5/14 16:02:13

【Linux学习】基础IO——软硬链接 | 制作动静态库

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《Linux学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 基础IO&#x1f353;软硬链接&#x1f332;软链接&#x1f332;硬链接&#x1f353;动静态库&…...

编程日记 2023/5/15 9:05:59

如何分辨on-policy和off-policy

on-policy的定义&#xff1a;behavior policy和target-policy相同的是on-policy&#xff0c;不同的是off-policy。 behavior policy&#xff1a;采样数据的策略&#xff0c;影响的是采样出来s,a的分布。 target policy&#xff1a;就是被不断迭代修改的策略。 如果是基于深度…...

编程日记 2023/5/15 9:05:38

第三讲：ambari编译后的安装包制作流程说明

一、概述 前两讲，我们已经将 Ambari 源码编译成功。现在我们想将 Ambari 编译后的 rpm 包，都放到 yum 本地仓库中，这样 Ambari 与 HDP 在安装部署时，就直接使用的我们自己编译的安装包了。 Ambari 的 rpm 包，有这么几类： ambari-server rpmambari-agent rpmambari metr…...

编程日记 2023/5/15 9:05:16

Python进阶-----面对对象6.0（绑定方法[类方法、静态方法]与内置方法）

目录 前言&#xff1a; 1.绑定方法 &#xff08;1&#xff09;实例方法 &#xff08;2&#xff09;类方法 &#xff08;3&#xff09;静态方法 2.类型检测 &#xff08;1&#xff09;issubclass() 函数 &#xff08;2&#xff09;isinstance() 函数 3.内置方法&#xf…...

编程日记 2023/5/15 9:05:03

java8四大基本函数式接口

1.什么是函数式接口? 只包含一个抽象方法的接口&#xff0c;称为函数式接口你可以通过Lambda表达式来创建该接口的对象。&#xff08;若Lambda表达式抛出一个受检异常&#xff0c;那么该异常需要在目标接口的抽象方法上进行声明&#xff09;我们可以在任意函数式接口上使用Fu…...

编程日记 2023/5/15 9:04:47

Junit测试框架

一、简介 Junit框架是一个开源的Java语言单元测试框架&#xff0c;Java方向使用最广泛的单元测试框架&#xff0c;使用Java开发者都应该学习Junit并能掌握单元测试的编写。 对于Junit和Selenium的关系&#xff1a;通俗点来说Selenium如果比喻为灯泡&#xff0c;那么Junit就是电…...

编程日记 2023/5/15 9:04:16

操作系统复习题

什么是线程&#xff1f; 线程&#xff08;Thread&#xff09;&#xff1a;轻量级进程&#xff0c;是操作系统进行调度的最小单位。一个线程是一个任务&#xff08;一个程序段&#xff09;的一次执行过程。线程不占有内存空间&#xff0c;它包括在进程的内存空间中。在同一个进程…...

编程日记 2023/5/15 9:03:52

web项目的初始化

Tomcat 安装配置 Tomcat 官方站点&#xff1a;Apache Tomcat - Welcome! 。 安装 得到下载的安装包&#xff08;一般是 zip 文件&#xff09;&#xff0c;并解压到你指定的目录&#xff08;建议不要解压在 c 盘&#xff09;&#xff1b;&#xff08;这里以 windows10 系统为例…...

编程日记 2023/5/15 9:03:29

29- 迁移学习 (TensorFlow系列) (深度学习)

知识要点 迁移学习: 使用别人预训练模型参数时&#xff0c;要注意别人的预处理方式。 常见的迁移学习方式&#xff1a; 载入权重后训练所有参数.载入权重后只训练最后几层参数.载入权重后在原网络基础上再添加一层全连接层&#xff0c;仅训练最后一个全连接层.训练数据是 10_m…...

编程日记 2023/5/19 23:02:11

工具篇（五）炫酷排版，尽在LaTeX：让你的文档飞升吧！

作者的话 作为一个文本排版工具&#xff0c;latex一直以来都备受科研工作者、学生和出版社的青睐。但是对于初学者来说&#xff0c;latex的学习曲线可能会有些陡峭。因此&#xff0c;我写这篇博客旨在为初学者提供一个简单易懂的latex教程&#xff0c;让大家能够快速入门并掌握…...

编程日记 2023/5/19 23:02:08

【蓝桥杯PythonB组备赛】【Acwing周赛】第93场 4867. 整除数 4868. 数字替换 python解

目录 A AcWing 4867. 整除数 1.题目描述 2.思路分析 3.代码实现 B AcWing 4868. 数字替换 1.题目描述 2.思路分析 3.代码实现 A AcWing 4867. 整除数 1.题目描述 2.思路分析 为什么不能直接暴力&#xff1f; 数据&#xff1a;1 ≤ n, k ≤ 10 ** 9 1s内最多…...

编程日记 2023/5/19 23:02:02

KNN学习报告

原理 KNN算法就是在其表征空间中&#xff0c;求K个最邻近的点。根据已知的这几个点对其进行分类。如果其特征参数只有一个&#xff0c;那么就是一维空间。如果其特征参数只有两个&#xff0c;那么就是二维空间。如果其特征参数只有三个&#xff0c;那么就是三维空间。如果其特征…...

编程日记 2023/5/17 11:51:10

Java奠基】方法的讲解与使用

目录 方法概述 方法的定义与调用 方法的重载 方法的值传递 方法概述 方法是程序中最小的执行单元&#xff0c;在实际开发中会将重复的具有独立功能的代码抽取到方法中&#xff0c;这样可以提高代码的复用性和可维护性。 方法的定义与调用 在Java中定义方法的格式都是相同…...

编程日记 2023/5/19 23:02:00

字符串hash

K - 子串翻转回文串2020ccpc河南省赛字符串哈希&#xff1a;将字符串变成x进制数对公式的理解&#xff1a;举个十进制数的例子&#xff1a;123456h[1]1&#xff1b;h[2]1*10212;h[3]12*103123;h[4]123*1041234;.........h[i]h[i-1]*xa[i];h[i]代表的恰巧是整个数的前缀用p[i]表…...

编程日记 2023/5/15 9:02:56

试题 算法训练 转圈游戏

问题描述 n个小伙伴&#xff08;编号从0到n-1&#xff09;围坐一圈玩游戏。按照顺时针方向给n个位置编号&#xff0c;从0到n-1。 　　最初&#xff0c;第0号小伙伴在第0号位置&#xff0c;第1号小伙伴在第 1 号位置&#xff0c;……&#xff0c;依此类推。 　　游戏规则如下&am…...

编程日记 2023/5/19 23:01:57

【uni-app教程】九、运行环境判断与跨端兼容

&#xff08;1&#xff09;开发环境和生产环境 uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境&#xff0c;一般用于连接测试服务器或生产服务器的动态切换。 在HBuilderX 中&#xff0c;点击「运行」编译出来的代码是开发环境&#xff0c;点击「发行…...

编程日记 2023/5/19 23:01:55

扩展WSL2虚拟硬盘的大小

扩展WSL2虚拟硬盘的大小 1、在 Windows PowerShell 中终止所有 WSL 实例 wsl --shutdown2、查看 WSL 实例运行状态&#xff0c;确认关闭&#xff0c;并记住发行版的名称 wsl -l -v如果没有更改移动过发行版安装包位置&#xff0c;那么可以通过以下方法查找到发行版的安装包位…...

编程日记 2023/5/19 23:01:53

Win系统蓝牙设备频繁卡顿/断连 - 解决方案

Win系统蓝牙设备频繁卡顿/断连 - 解决方案前言常见网卡Intel无线网卡&#xff08;推荐&#xff09;Realtek无线网卡总结查看本机网卡解决方案更新驱动更换网卡&#xff08;推荐&#xff09;前言 无线网卡有2个模块&#xff0c;一个是WiFi&#xff0c;一个是蓝牙&#xff0c;因…...

编程日记 2023/5/19 23:01:51

手撕 Transformer (2)：嵌入层和位置编码的实现上篇文章讲过，Transformer 可分为四个部分：输入、输出、编码器、解

嵌入层的作用&#xff1a;为了将文本中词汇的数字表示转换为向量表示&#xff08;语义向量&#xff09;&#xff0c;这样后续神经网络就可以对其进行计算了。 1.1 代码实现 import torchimport torch.nn as nnimport mathfrom torch.autograd import Variableclass Embeddings…...

编程新知 2026/4/4 3:51:53

OpenClaw资源优化：Phi-3-mini-128k-instruct模型量化与推理加速实践

OpenClaw资源优化&#xff1a;Phi-3-mini-128k-instruct模型量化与推理加速实践 1. 为什么需要优化Phi-3-mini-128k-instruct的性能 当我第一次在OpenClaw中接入Phi-3-mini-128k-instruct模型时&#xff0c;就遇到了一个典型问题&#xff1a;虽然这个128k超长上下文模型在处理…...

编程新知 2026/4/4 3:03:26

HarmonyOS6 半年磨一剑 - RcRadio 组件核心架构与类型系统设计

文章目录前言一、双组件架构设计1.1 两个组件的职责划分1.2 双文件架构二、ComponentV2 装饰器体系2.1 Param 与 Require 的配合2.2 Local 的内部状态隔离三、类型系统设计3.1 基础类型别名3.2 RcRadioValue 的宽松类型3.3 RcRadioOption 接口四、modelValue 双向绑定模型4.1 受…...

编程新知 2026/4/4 2:59:25

ArcGIS Pro 3.0 中文版安装与破解全流程指南

1. ArcGIS Pro 3.0中文版安装前的准备工作 在开始安装ArcGIS Pro 3.0中文版之前&#xff0c;我们需要做好充分的准备工作。首先确保你的电脑满足最低系统要求&#xff1a;Windows 10或11操作系统&#xff08;64位&#xff09;、至少8GB内存&#xff08;16GB以上更佳&#xff09…...

编程新知 2026/4/4 2:53:24

SecGPT-14B批量处理：用OpenClaw自动化1000个网站安全检测

SecGPT-14B批量处理&#xff1a;用OpenClaw自动化1000个网站安全检测 1. 为什么需要自动化安全检测 作为一名长期关注网络安全的技术从业者&#xff0c;我经常需要对大量网站进行安全检测。传统的手动检测方式不仅效率低下&#xff0c;而且容易遗漏关键漏洞。最近在测试SecGP…...

编程新知 2026/4/4 2:19:15

Arduino轻量级CRC-32校验库：零依赖、低内存、确定性执行

1. 项目概述Arduino_CRC32 是一个面向嵌入式场景轻量级 CRC-32 校验库&#xff0c;专为 Arduino 及兼容平台&#xff08;如 STM32 Core for Arduino、ESP32 Arduino Core&#xff09;设计。其核心目标并非追求极致吞吐性能&#xff0c;而是以零依赖、低内存占用、确定性执行时间…...

编程新知 2026/4/4 0:15:41

Edge/Chrome用户必看：3种免费工具批量清理失效书签（2023实测）

Edge/Chrome用户必备&#xff1a;2023年高效清理失效书签的3种解决方案 每次打开浏览器&#xff0c;看到密密麻麻的书签栏却找不到真正可用的链接&#xff1f;这可能是大多数互联网用户的日常困扰。根据2023年用户调研数据显示&#xff0c;平均每位浏览器用户拥有超过200个书签…...

编程新知 2026/4/3 23:52:56

别只盯着huggingface！用Modelscope一键搞定PDFMathTranslate的DocLayout-YOLO模型依赖

国内开发者的福音&#xff1a;用ModelScope优雅解决PDFMathTranslate模型依赖问题 遇到LocalEntryNotFoundError报错时&#xff0c;大多数开发者第一反应是检查网络连接或寻找Hugging Face镜像源。但鲜为人知的是&#xff0c;PDFMathTranslate源码中其实隐藏着一个更优雅的解决…...

编程新知 2026/4/3 23:50:55

2026-04-03 全国各地响应最快的 BT Tracker 服务器(联通版)

数据来源&#xff1a;https://bt.me88.top 序号Tracker 服务器地域网络响应(毫秒)1http://211.75.210.221:6969/announce江苏镇江联通222http://60.249.37.20:80/announce广东肇庆联通273udp://132.226.6.145:6969/announce宁夏银川联通724http://93.158.213.92:1337/announce…...

编程新知 2026/4/3 23:40:54

【数据结构】二叉树小题

一、真题 1&#xff1a;前序 后序遍历反推中序&#xff08;2011 年&#xff09; 核心原理 二叉树的遍历规则&#xff1a; 前序遍历&#xff1a;根节点 → 左子树 → 右子树中序遍历&#xff1a;左子树 → 根节点 → 右子树后序遍历&#xff1a;左子树 → 右子树 → 根节点 …...

编程新知 2026/4/3 23:32:52