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

ECharts图表图例知识点小结

               ECharts 图表图例简述

 

一、知识点

 

1. 作用:

- 用于标识图表中的不同系列,帮助用户理解图表所展示的数据内容。

2. 位置:

- 可以通过配置项设置图例的位置,如 top 、 bottom 、 left 、 right 等。

3. 显示状态控制:

- 可以通过点击图例项来控制对应系列的显示与隐藏。

4. 样式设置:

- 可以设置图例的字体、颜色、大小等样式。

- 可以设置图例项的间距、对齐方式等。

 

二、实例

 

1. 简单柱状图图例:

 

 

option = {

    xAxis: {

        type: 'category',

        data: ['苹果', '香蕉', '橙子']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

            name: '销量',

            type: 'bar',

            data: [120, 80, 90]

        }

    ],

    legend: {

        bottom: '5%',

        left: 'center',

        data: ['销量']

    }

};

 

 

在这个例子中,柱状图的图例显示在底部居中位置,标识了图表中的系列名称为“销量”。

 

2. 多个系列折线图图例:

 

 

option = {

    xAxis: {

        type: 'category',

        data: ['周一', '周二', '周三', '周四', '周五']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

            name: '系列 1',

            type: 'line',

            data: [10, 20, 15, 25, 30]

        },

        {

            name: '系列 2',

            type: 'line',

            data: [15, 25, 20, 30, 35]

        }

    ],

    legend: {

        top: '5%',

        right: '5%',

        data: ['系列 1', '系列 2']

    }

};

 

 

此例中,折线图有两个系列,图例显示在右上角,分别标识了“系列 1”和“系列 2”。

 

通过以上知识点简述,可以更好地理解和使用 ECharts 图表的图例功能。               

             ECharts图表图例配置

在 ECharts 中,图例的样式可以通过多种方式进行设置。以下是一些主要的样式设置方法:

 

一、字体样式

 

可以设置图例的字体相关属性,如:

 

-  textStyle.color :设置图例文字的颜色。例如: textStyle: { color: '#333' } ,将图例文字颜色设置为灰色。

-  textStyle.fontSize :设置字体大小。例如: textStyle: { fontSize: 14 } ,设置字体大小为 14 像素。

-  textStyle.fontWeight :设置字体粗细。可以是 normal (正常)、 bold (粗体)等。例如: textStyle: { fontWeight: 'bold' } ,设置为粗体。

 

二、背景样式

 

-  legend.backgroundColor :设置图例的背景颜色。如: backgroundColor: 'rgba(255, 255, 255, 0.8)' ,设置为半透明白色背景。

-  legend.borderColor :设置图例边框颜色。例如: borderColor: '#999' ,设置边框为灰色。

-  legend.borderWidth :设置边框宽度。例如: borderWidth: 1 ,设置边框宽度为 1 像素。

 

三、间距和对齐方式

 

-  legend.itemGap :设置图例项之间的间距。例如: itemGap: 10 ,设置间距为 10 像素。

-  legend.align :设置图例的对齐方式,可以是 left 、 right 、 center 。例如: align: 'right' ,将图例对齐到右侧。

 

四、图标样式

 

-  legend.icon :可以设置图例项的图标类型,如 'circle' (圆形)、 'rect' (矩形)、 'roundRect' (圆角矩形)等。例如: icon: 'circle' ,设置图标为圆形。

 

五、交互样式

 

-  legend.inactiveColor :设置图例项在不活动状态下的颜色。例如:当对应的系列被隐藏时,该图例项的文字颜色会变为这个设置的值。

-  legend.selectedMode :设置图例的选择模式,可以是 single (单选)、 multiple (多选)等,影响用户点击图例项时的交互行为。

 

通过以上各种设置方法,可以根据具体需求对 ECharts 图表的图例样式进行灵活调整,以达到更好的可视化效果。

相关文章:

ECharts图表图例知识点小结

ECharts 图表图例简述 一、知识点 1. 作用: - 用于标识图表中的不同系列,帮助用户理解图表所展示的数据内容。 2. 位置: - 可以通过配置项设置图例的位置,如 top 、 bottom 、 left 、 right 等。 3. 显示状态控制&#xff1a…...

LabVIEW非接触式模态参数识别系统开发

基于LabVIEW的模态参数识别系统采用非接触式声学方法,结合LabVIEW软件和高精度硬件,实现机械结构模态参数的快速准确识别。降低了模态分析技术门槛,提高测试效率和准确性。 项目背景与意义: 传统的模态分析方法,如锤击法&#x…...

厨艺爱好者的在线家园:基于Spring Boot的实现

1 绪论 1.1 研究背景 现在大家正处于互联网加的时代,这个时代它就是一个信息内容无比丰富,信息处理与管理变得越加高效的网络化的时代,这个时代让大家的生活不仅变得更加地便利化,也让时间变得更加地宝贵化,因为每天的…...

PostgreSQL使用clickhouse_fdw访问ClickHouse

Postgres postgres版本:16(测试可用)docker 安装 插件安装 clickhouse_fdw: https://github.com/ildus/clickhouse_fdw 安装命令 git clone gitgithub.com:ildus/clickhouse_fdw.git cd clickhouse_fdw mkdir build && cd build…...

docker 单节点arm架构服务器安装zookeeper、kafka并测试通信

kafka、zookeeper常用镜像介绍 kafka和zookeeper常见的镜像有以下三个:wurstmeister/zookeeper、kafka、confluentinc/cp-zookeeper、cp-kafka 和 bitnami/zookeeper、kafka。 wurstmeister/xxx: 由wurstmeister团队维护,提供的镜像适用于开发和测试环…...

AnaTraf | 全面掌握网络健康状态:全流量的分布式网络性能监测系统

AnaTraf 网络性能监控系统NPM | 全流量回溯分析 | 网络故障排除工具AnaTraf网络流量分析仪是一款基于全流量,能够实时监控网络流量和历史流量回溯分析的网络性能监控与诊断系统(NPMD)。通过对网络各个关键节点的监测,收集网络性能…...

单片机入门教程

单片机入门教程 单片机是一种将中央处理器(CPU)、存储器、输入输出接口等集成在一个芯片上的微型计算机系统。本教程将带你从零开始学习如何使用一款常见的单片机——ATmega328P,并编写简单的控制程序。 1. 单片机简介 1.1 什么是单片机&a…...

三维管线管网建模工具MagicPipe3D V3.5.3

经纬管网建模系统MagicPipe3D,本地离线参数化构建地下管网三维模型(包括管道、接头、附属设施等),输出标准3DTiles、Obj模型等格式,支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析&…...

(二十三)、k8s(minikube) 部署mysql

文章目录 1、安装1.1、环境1.2、workbench 崩溃问题1.1、deployment.yaml 文件1.2、运行1.3、启动隧道,从宿主机直接访问 k8s 中的mysql 2、完整卸载 mysql(pod/deployment/service/pvc) 1、安装 1.1、环境 docker 部署 minikube,minikube …...

FFMPEG+Qt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频

FFMPEGQt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频 文章目录 FFMPEGQt 实时显示本机USB摄像头1080p画面以及同步录制mp4视频1、前言1.1 目标1.2 一些说明 2、效果3、代码3.1 思路3.2 工程目录3.3 核心代码 4、全部代码获取 1、前言 本文通过FFMPEG(7.0.2)与Qt(5.13.…...

微信小程序中关闭默认的 `navigationBar`,并使用自定义的 `nav-bar` 组件

要在微信小程序中关闭默认的 navigationBar,并使用自定义的 nav-bar 组件,你可以按照以下步骤操作: 1. 关闭默认的 navigationBar 在你的页面的配置文件 *.json 中设置 navigationBar 为 false。你需要在页面的 JSON 配置文件中添加以下代码…...

FPGA 小鸟避障游戏

FPGA实现效果: FPGA 小鸟避障游戏 FPGA(Field Programmable Gate Array)即现场可编程门阵列,是一种可以编程的数字逻辑器件。基于FPGA的小鸟避障游戏是一种结合了硬件加速和算法优化来运行的实时交互游戏。这种游戏一般利用FPGA的…...

Claude Financial Data Analyst:基于Claude的金融数据分析工具!免费开源!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,专注于分享AI全维度知识,包括但不限于AI科普,AI工…...

django5入门【03】新建一个hello界面

文章目录 1、前提条件⭐2、操作步骤总结3、实际操作示例 1、前提条件⭐ 将上一节创建的 Django 项目导入到 PyCharm 中。 2、操作步骤总结 (1)在 HelloDjango/HelloDjango 目录下,新建一个 views.py 文件。 (2)在 H…...

【Unity】Unity中调用手机的震动功能 包括安卓和IOS

直接上代码 #if UNITY_IOS[DllImport("__Internal")]private static extern void EX_C_CallVibrateE(int eID); #endif public static void CallVibrate(int eID){ #if UNITY_EDITOR#elif UNITY_ANDROIDlong miSec 30;if(eID 1520){miSec 60;}//通过报名获取ja…...

【软件工程】软件工程入门

🌈 个人主页:十二月的猫-CSDN博客 🔥 系列专栏: 🏀软件开发必练内功_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步,十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前…...

命名空间std, using namespace std

命名空间std&#xff0c;using namespace std 在标准C以前&#xff0c;都是用#include<iostream.h>这样的写法的&#xff0c;因为要包含进来的头文件名就是iostream.h。标准C引入了名字空间的概念&#xff0c;并把iostream等标准库中的东东封装到了std名字空间中&#x…...

人工智能:未来生活与工作的变革者

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;越来越多的领域开始受益于AI的强大功能。从医疗、企业管理到日常生活&#xff0c;人工智能正在改变我们的世界。本文将深入探讨人工智能技术的应用前景&#xff0c;并分析它如何从根本上改变我们的生活和工作…...

SEO基础:什么是LSI关键词?【百度SEO优化专家】

SEO基础&#xff1a;什么是LSI关键词&#xff1f; 大家好&#xff0c;我是林汉文&#xff08;百度SEO优化专家&#xff09;&#xff0c;在SEO&#xff08;搜索引擎优化&#xff09;中&#xff0c;LSI关键词是一个重要的概念&#xff0c;有助于提升网页的相关性和内容质量。那么…...

将理论付诸实践:如何通过实际项目有效学习和应用新技术

文章目录 摘要引言选择合适实践对象理论知识的转化遇到的挑战及解决方法挑战1&#xff1a;组件状态管理的复杂性挑战2&#xff1a;Node.js异步编程的复杂性 实践过程中的经验和心得将理论知识转化为操作能力QA环节总结未来展望参考资料 摘要 在技术的不断进步和变化的环境中&a…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...