echarts 定制legend内容,显示和位置

news2025/1/19 17:15:01

echarts 定制legend内容,显示和位置

  • 1.type(当图例很多的时候可以用到)
  • 2.orient(图例的排版方向)
  • 3.top,bottom,left,right(图例在容器中的位置)
  • 4.width,height(图例组件的大小);itemWidth,itemHeight(图例图标的大小)
  • 5. align(图例标记和文本的对齐)
  • 5. padding(图例内边距),itemGap(图例每项之间的间隔)
  • 6.icon(图例项的 icon)
  • 7.textStyle(图例的文本样式)
    • 7.1 rich(自定义富文本样式)
  • 8.formatter(用来格式化图例文本)

1.type(当图例很多的时候可以用到)

type,图例的类型,可选值为’plain’:普通图例。缺省(默认)就是普通图例。
‘scroll’:可滚动翻页的图例。当图例数量较多时可以使用。
scroll的效果是这样的:
在这里插入图片描述

2.orient(图例的排版方向)

orient可选值为’horizontal’(水平默认),‘vertical’(垂直)

3.top,bottom,left,right(图例在容器中的位置)

top,bottom,left,right的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’, ‘center’, ‘right’。

如果 left 的值为’left’, ‘center’, ‘right’,组件会根据相应的位置自动对齐。
如果 top 的值为’top’, ‘middle’, ‘bottom’,组件会根据相应的位置自动对齐。

4.width,height(图例组件的大小);itemWidth,itemHeight(图例图标的大小)

wdith和height都可以为String或则Number,默认为自适应
itemWidth和itemHeight为Number,只针对图标
在这里插入图片描述

5. align(图例标记和文本的对齐)

默认自动,根据组件的位置和 orient 决定,当组件的 left 值为 ‘right’ 以及纵向布局(orient 为 ‘vertical’)的时候为右对齐,即为 ‘right’。

可选:‘auto’,‘left’,‘right’

5. padding(图例内边距),itemGap(图例每项之间的间隔)

padding,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。

使用示例:

// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5,左右的内边距为 10 padding: [5, 10] //
分别设置四个方向的内边距 padding: [
5, // 上
10, // 右
5, // 下
10, // 左 ]

itemGap,横向布局时为水平间隔,纵向布局时为纵向间隔。

6.icon(图例项的 icon)

图例图标的显示样式,

ECharts 提供的标记类型包括
‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通过 ‘image://url’ 设置为图片,其中 URL 为图片的链接,或者 dataURI。

7.textStyle(图例的文本样式)

当你不满足于系统的文本样式就可以用这个啦,字体大小颜色样式都有对应的属性。挑个个重点的讲下

7.1 rich(自定义富文本样式)

这个有什么用处呢?假如你的文本样式不止一种呢,是这样的

那就很有用了,先在rich中定义
eg:

  rich: {
                  a: {
                    width: 200,
                    padding: [0, 40, 0, 0],
                    align: "left",
                  },}
 //然后在下面讲到的formatter中使用就可以了                 

// {styleName|text content text content} 标记样式名。进行运用

8.formatter(用来格式化图例文本)

个人感觉这个多用在项目开发中,后台返回的数据不是最终的结果的话就需要自己做点处理。建议直接写成回调函数

// 使用回调函数 formatter: function (name) {
//逻辑代码
// return ["{a|" +name +"}"]; //使用了rich定义的样式
return 'Legend ’ + name; //最后返回的就是每一项图例的文字描述}

一般开发这个就够了,看机会再更新吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408918.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

六、Echart图表 之 tooltip提示框组件配置项大全

🍓 作者主页:💖仙女不下凡💖 🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正! 🍓 欢迎点赞👍 收藏⭐ 留言&#x1f4…

【JavaScript 进阶教程】函数的定义 调用 及 this指向问题

这篇文章开始我们函数的进阶篇,和我们JavaScript基础学的函数有了很多拓展,这篇文章首先我们从函数的定义,调用,及其 this指向 来一个总结。 文章目录: 一:函数的定义 1.1 命名函数 1.2 匿名函数 1…

若依(ruoyi)框架:如何实现灵活自定义路由配置

如何灵活自定义路由配置业务背景如何实现方式一:直接在前端路由表(router/index.js)里面某个路由的meta属性里面配置。方式二:在后台返回动态路由的接口中组装meta信息如何改造效果展示使用方法总结业务背景 随着项目的深入开发&a…

使用 iframe出现了缓存,导致页面不会刷新的解决方案

事情是这样的,我在打代码的时候,需要在A页面里引入B页面我使用了iframe 这个标签 来引入页面B但是我发现 当我更改完页面B的内容 将它上传到服务器后,我访问这个A页面,这个我使用iframe 引入的页面B 的内容并没有更新,经过一番研究…

VsCode工具开发vue项目必装插件

VsCode工具开发vue项目必装插件 目录VsCode工具开发vue项目必装插件1.概述2.VsCode插件清单2.1.Vetur插件让vue文件代码高亮2.2.Vue VSCode Snippets自动生成vue模板内容插件1.安装插件2.使用插件生成vue模板代码2.3.LiveServer实时刷新网页1.安装LiveServer2.使用LiveServer打…

若依框架搭建和使用

一.搭建系统 若依官网:RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框…

Jasper Report详细使用教程(保姆级教程),整合Springboot使用

Jasper Report详细使用教程1、下载Jaspersoft Studio2、编写jrxml文件3、编译模板文件4、输出PDF报表(SpringBoot整合)5、解决中文乱码(不显示的问题)6、最后1、下载Jaspersoft Studio 官网下载地址:https://communit…

CSS网页布局

📜个人简介 ⭐️个人主页:微风洋洋🙋‍♂️ 🍑博客领域:编程基础💡,后端💡,大数据,信息安全 🍅写作风格:干货,干货,还是tmd的干货 🌸精选专栏:【J…

叮咚,您有一封告白信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接+步骤详解)

马上就要5月20号啦,准备好如何向心仪的她/他表白了嘛!特此出一篇告白小信件,效果图如下。纯htmlcss绘制,包含详细教程注释,干货满满哦。 链接置于文章结尾总结处。 文章目录一、叮咚!查收您的信件&#x…

js二十五道面试题(含答案)

目录 1.线程和进程是什么?举例说明 2. js中的基础数据类型有哪几种? 了解包装对象吗? 3.对内存泄漏的了解 4.js中数组合并的方法 5.合并对象的方法 6.什么是作用域,什么是作用域链? 7.JS如何实现异步编程(5种&…

1.vite初识、vite搭建项目

1.vite优势 1.1启动速度 解释一下冷启动:它是指输入启动指令后他编译到启动完成的过程; 当你使用vite和webpack后你就会得出这个结论,vite相对于webpack启动速度还是略胜一筹的,当你的项目是小型项目时,不是特别明显…

TypeScript 报错汇总

TypeScript 报错汇总 在这篇文章中将记录我遇到的ts错误,应该会持续更新。 有时候从错误点入手学习似乎是一个不错的选择,所以也欢迎你私信我一些ts的问题。 一、内置工具 1.1 Pick & Partial 先看看Pick和Partial工具的源码: type…

浅析什么是伪类和伪元素?伪类和伪元素的区别解析

一、理解什么是伪类?什么是伪元素? 1、伪类种类 伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222}div:first-child{color:#333} div:nth-child(3){color:#444} 尽管这些条件不是基于DOM的,但结果每一…

面试必问JavaScript基础面试题(附答案详解)

文章目录前言1、JavaScript的数据类型有哪些?2、null,undefined的区别?3、JS中变量的作用域是什么?4、说说var、let、const之间的区别?区别一:作用域区别二:定义变量区别三:let与const区别5、栈…

微信小程序云开发 | 插件的微信小程序云开发

1、插件开发简介 1●插件简介 插件是对一组JavaScript接口、自定义组件或页面的封装,可嵌入小程序中使用。插件不能独立运行,必须嵌入在其他小程序中才能被用户使用;而第三方小程序在使用插件时,也无法看到插件的代码。因此&…

英雄联盟轮播图手动轮播

感谢大朋友们小朋友们的催更,这个月都在努力复习功课,无异于对待期末考试。 通过前一个个小案例越做越熟悉,代码越来越简洁,整体架构越来越规范 一步一步循序渐进,今天写一个英雄联盟轮播图手动轮播练练手。 清除网页的…

js逆向点点数据:自动扣webpak-webpackJsonp思路

url链接:点点数据-App应用市场数据分析,AppStore排行榜,ASO,ASM优化平台 请求数据是k,网址是个标准的webpak,不过有有很多个js文件,文件加起来十几mb,就很恶心 扣的话还是扣知乎webpak的老办法,导出加载器&#xff0c…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)

🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 🖥️ 蓝桥杯专栏:蓝桥杯题解/感悟 🖥️ TS知识总结:十万字TS知识点总结 👉 你的一键三连是我更新的最大动力❤️! &…

Promise.allSettled()方法介绍

前言: 本篇文章介绍 Promise 对象的Promise.allSettled() 方法,另外的关于 Promise 文章 可以看我的 ES6专栏 promise 实现 Ajax 首先通过 promise 对象实现 Ajax (如下) ,后面 在代码中 会使用到 const getJSON f…

uniapp添加极光推送

1.从dcloud插件市场下载极光SDK插件 (可以云打包,也可以离线打包) 极光JCore官方SDK下载地址 https://ext.dcloud.net.cn/plugin?id4028https://ext.dcloud.net.cn/plugin?id4028 极光JPush官方SDK下载地址 极光JPush官方SDK - DCloud 插…