echarts中的legend属性

news2025/1/27 10:03:32
  legend: {
          orient: "vertical",
          right: "0%",
          top: "15%",
          icon: "circle",  //小圆点
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 15, //间隔
          formatter: function (params) {
            let tip1 = "";
            let tip = "";
            let le = params.length; //图例文本的长度
            if (le > 19) {
              //几个字换行大于几就可以了
              let l = Math.ceil(le / 19); //有些不能整除,会有余数,向上取整
              for (let i = 1; i <= l; i++) {
                //循环
                if (i < l) {
                  //最后一段字符不能有\n
                  tip1 += params.slice(i * 19 - 19, i * 19) + "\n"; //字符串拼接
                } else if (i === l) {
                  //最后一段字符不一定够9个
                  tip = tip1 + params.slice((l - 1) * 19, le); //最后的拼接在最后
                }
              }
              return tip;
            } else {
              tip = params; //前面定义了tip为空,这里要重新赋值,不然会替换为空
              return tip;
            }
          },
        },

1.图例布局朝向(orient)
默认横向布局,纵向布局值为’vertical’

    orient:'horizontal'
	orient:'vertical'

2.图例组件的宽高(width,height)

3.left,right,top,bottom
图例组件离容器左(右,上,下)侧的距离。
left 的值可以是像 20 这样的具体像素值,可以是像 ‘20%’ 这样相对于容器高宽的百分比,也可以是 ‘left’,‘center’, ‘right’。
(如果 left 的值为’left’, ‘center’,‘right’,组件会根据相应的位置自动对齐.)

 4. icon定义图标形状

        {icon: 'circle', name: '搜索引擎'},
        {icon: 'rect', name: '直接访问'},
        {icon: 'roundRect', name: '邮件营销'},
        {icon: 'triangle', name: '联盟广告'},
        {icon: 'diamond', name: '视频广告'},
        {icon: 'pin', name: 'SEO'},
        {icon: 'arrow', name: '定点投放'}

5.图例标记的图形的宽度/高度(itemWidth/itemHeight)

 itemWidth: 8,
 itemHeight: 8,

6.图例每项之间的间隔(itemGap)
 图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔

7.legend字太多换行

 formatter: function (params) {
            let tip1 = "";
            let tip = "";
            let le = params.length; //图例文本的长度
            if (le > 19) {
              //几个字换行大于几就可以了
              let l = Math.ceil(le / 19); //有些不能整除,会有余数,向上取整
              for (let i = 1; i <= l; i++) {
                //循环
                if (i < l) {
                  //最后一段字符不能有\n
                  tip1 += params.slice(i * 19 - 19, i * 19) + "\n"; //字符串拼接
                } else if (i === l) {
                  //最后一段字符不一定够9个
                  tip = tip1 + params.slice((l - 1) * 19, le); //最后的拼接在最后
                }
              }
              return tip;
            } else {
              tip = params; //前面定义了tip为空,这里要重新赋值,不然会替换为空
              return tip;
            }
          },

改变前:

改变后:

 

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

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

相关文章

【uni-app】swiper的使用

最近在学习小程序的开发&#xff0c;其中有用到swiper&#xff0c;在这里记录一下我的学习历程 有一些人&#xff0c;他刚开始并不会开发小程序&#xff0c;但是在任务面前&#xff0c;没有什么是不可以学的… 刚开始接触到swiper的时候&#xff0c;是在uni-app的官方文档里&am…

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节

文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用&#x1f364;创建Pinia&#x1f364;创建StorePinia核心概念State&#x1f35f;state基本使用&#x1f35f;state其他操作Pinia核心Getters&#x1f355;getters基本使用&#x1f355;getters其他操作Pinia核心Actions&am…

React -- useState 的使用及注意事项

一、基本使用 useState是 react 提供的一个定义响应式变量的 hook 函数&#xff0c;基本语法如下&#xff1a; const [count, setCount] useState(initialCount)它返回一个状态和一个修改状态的方法&#xff0c;状态需要通过这个方法来进行修改&#xff1b;initialCount 是我…

Vue3+Vite实现动态路由

项目基本目录 1.首先定义初始默认的路由routes(router.js文件),vue文件使用import引入可以按需加载 import {createRouter,createWebHashHistory } from "vue-router";import store from ../store/index.jsconst routes [{path: "/login",component: () …

jsjiami.com V6版本,js解密的方法。

我们在爬内容&#xff0c;抓取页面的时候&#xff0c;总会遇到sojson v5&#xff0c;jsjiami.com的v6加密。 jsjiami v6 &#xff1a; JS加密,JS不可逆加密,JS混淆,JS混淆加密,JS压缩加密 - [JavaScript加密] 我看了下这个js完全有效。废话不多说。直接上代码。 (function (…

vue中深度选择器

scoped的作用 scoped 可以使当前的样式只在自己当前的组件内起作用。为了防止在一个组件内引入了子组件&#xff0c;而子组件没有加scoped。这个时候如果父子组件有相同的类名&#xff0c;就会产生样式的影响。 原理: 加了scoped就相当于给当前组件所有的标签添加一个【data-v-…

微信小程序实现轮播图

实现轮播图之前必须知道以下三点&#xff1a; 一、轮播图外层容器swiper 二、每一个轮播项swiper-item 三、swiper标签存在默认样式 1. width 100% 2. height 默认为 150px 3 .swiper高度无法实现由内容撑开 默认的150px高度的轮播图如下图: 原图是长这个样子的&#xf…

bootstrap-fileinput(二:编辑(修改)界面文件的上传,回显,删除(数据库同时删除)的操作 )

文章目录bootstrap-fileinput(二&#xff1a;编辑(修改)界面文件的上传&#xff0c;回显&#xff0c;删除(数据库同时删除)的操作 )一、编辑界面文件的上传二、编辑界面文件的回显1.文件的实体类&#xff1a;2.想要回显文件&#xff0c;首先要在工程类(你的编辑界面的主类)里面…

ES6面试问题汇总

面试官通过总问题&#xff0c;ES6方法开始提问 1.ES6有哪些新增方法&#xff1f;/你了解哪些ES6方法&#xff1f;&#xff08;总问题&#xff09; 块级作用域、 模板字符串、 解构赋值、 箭头函数、 函数默认参数、 剩余参数&运算符、 set和map、 import和exprot用…

Vue中实现过渡动画

文章目录Vue的transition动画Transition动画的使用Transition组件的原理Transition动画的classVue的animation动画Animation动画的使用同时设置两种动画(了解)过渡的模式mode列表过渡列表过渡的介绍列表过渡的使用Vue的transition动画 Transition动画的使用 在开发中&#xf…

vite配置cdn优化打包体积

文章目录前言一、版本确认二、使用步骤1.rollup-plugin-visualizer打包体积可视化面板2.配置cdn方法第一种方法&#xff1a; vite-plugin-cdn-import第二种方法&#xff1a; rollup-plugin-external-globals总结前言 大家都知道前端性能优化的方法&#xff0c;cdn外部引入的方…

【微信小程序】小程序知识补充篇

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新了呀。 还有就是中秋节就快来啦&#xff0c;程序员过中秋&#xff0c;当然是要好好放松一下啦&#xff0c;那么中秋前我们就不能偷懒了&#xff0c;赶紧学…

Controller层接收前端传参的几种方法。@RequestParam、@RequestBody、@PathVariable。及参数校验。

一、RequestParam 主要用于将请求参数区域的数据映射到控制层方法的参数上 // http://localhost:8080/wh/user/edit?Id9452659856325148452&name天天向上// RequestParam源码Target({ElementType.PARAMETER}) // 只能作用于参数上 Retention(RetentionPolicy.RUNTIME) D…

vue watch监听数据解决新旧值一样的问题(newValue, oldValue)

watch是监听 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值。 基础用法 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge…

异步函数async

什么是同步异步 在最新的ES7&#xff08;ES2017&#xff09;中提出的前端异步特性&#xff1a;async、await。 在了解async和await之前得先明白什么是同步函数&#xff0c;什么是异步函数。 同步函数&#xff1a;当一个函数是同步执行时&#xff0c;那么当该函数被调用时不会…

前端CryptoJS和Java后端数据互相加解密(AES)

目录一、序言二、关于前端CryptoJS1、CryptoJS简单介绍2、加密和填充模式选择3、前端AES加解密示例(1) cryptoutils工具类(2) 测试用例(3) 加解密后输出内容说明三、Java后端AES加解密1、Java中支持的加密模式和填充说明2、工具类CryptoUtils3、测试用例一、序言 最近刚好在做…

nodejs——解决跨域问题

目录 1什么是跨域 2解决 1 jsonp(缺点&#xff1a;不能请求post请求&#xff09; 1 index.html页 2 proxy.js页面 搭建一个服务器&#xff08;写好代码后&#xff0c;在cmd上启动&#xff09; 3效果 2服务端代理 &#xff08;由于后端请求不受浏览器同源策略影响&…

Bootstrap、栅格系统布局

一、Bootstrap Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架&#xff0c;具有简单、灵活的特性&#xff0c;拥有样式库、组件和插件。 Bootstrap常用来开发响应式布局和移动设备优先的Web项目&#xff0c;能够帮助开发者快速搭建前端页面。Bootstrap官方网站:Boot…

VUE3构建Cesium项目

目录 1.Cesium开发参考资料 2.VUE中使用Cesium 2.1 使用VUE创建项目 1.创建test项目 2.项目中引入Cesium 3.修改App.vue如下 4.将cesium静态文件复制至public下 5.运行效果 1.Cesium开发参考资料 Cesium官方网站&#xff1a;Cesium: The Platform for 3D Geospatial …

前端接收 type: “application/octet-stream“ 格式的数据并下载,解决后端返回不唯一

前端接收 type: “application/octet-stream“ 格式的数据并下载&#xff0c;还有后端既返回octet-stream还返回JSON数据时的处理方法 今天些项目的时候&#xff0c;后端改了一下文件下载的方式&#xff0c;打算用接口返回 type: “application/octet-stream“格式的数据&…