笔记:Echarts 饼图 图例legend 自定义 换行

news2024/9/20 22:50:34

配置后效果:👇

配置:

let option = {
    legend: [
          {
            data: ["融云", "融AI", "融安全", "融平台"],
            show: true,
            right: "3%",
            bottom: "20%",
            left: "center",
            icon: "rect",
            itemWidth: 5,
            itemHeight: 5,
            // 图例项之间的水平间距
            itemGap: 100,
            formatter: function (name) {
              let value = data.filter((v) => {
                return v.name == name;
              });
              if (name == "融云") {
                return `{label| ${name}: }\n {valueColor1|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融AI") {
                return `{label| ${name}: }\n {valueColor2|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融安全") {
                return `{label| ${name}: }\n {valueColor3|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融平台") {
                return `{label| ${name}: }\n {valueColor4|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              }
            },
            textStyle: {
              fontSize: 12,
              color: "#fff",
              rich: {
                label: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 12,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  color: "rgba(160, 206, 224, 1)",
                  padding: [-15, 0, 0, 0],
                },
                valueColor1: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#1630ff",
                  padding: [-40, 0, 0, 0],
                },
                valueColor2: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#b4c9ef",
                  padding: [-40, 0, 0, 0],
                },
                valueColor3: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#c700fc",
                  padding: [-40, 0, 0, 0],
                },
                valueColor4: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#df3e27",
                  padding: [-40, 0, 0, 0],
                },
              },
            },
          },
          {
            data: ["融网", "融大数据", "容量子"],
            show: true,
            right: "3%",
            bottom: "10%",
            left: "3%",
            icon: "rect",
            itemWidth: 5,
            itemHeight: 5,
            // 图例项之间的水平间距
            itemGap: 90,
            formatter: function (name) {
              let value = data.filter((v) => {
                return v.name == name;
              });
              if (name == "融网") {
                return `{label| ${name}: }\n {valueColor5|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "融大数据") {
                return `{label| ${name}: }\n {valueColor6|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              } else if (name == "容量子") {
                return `{label| ${name}: }\n {valueColor6|${
                  value.length > 0 ? value[0].value : 0
                }%}`;
              }
            },
            textStyle: {
              fontSize: 12,
              color: "#fff",
              rich: {
                label: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 12,
                  fontFamily: "Microsoft YaHei",
                  fontWeight: 400,
                  color: "rgba(160, 206, 224, 1)",
                  padding: [-15, 0, 0, 0],
                },
                valueColor5: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#7dffbb",
                  padding: [-40, 0, 0, 0],
                },
                valueColor6: {
                  overflow: "truncate",
                  ellipsis: "...",
                  fontSize: 18,
                  fontFamily: "ywptFont",
                  fontWeight: 400,
                  color: "#ff9900",
                  padding: [-40, 0, 0, 0],
                },
              },
            },
          },
        ],
}

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

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

相关文章

乾元通渠道商中标大理市自然灾害应急能力提升项目

近日,乾元通渠道商中标云南省大理市自然灾害应急能力提升项目,乾元通作为设备厂家,为项目提供通信指挥类装备(多链路聚合设备)QYT-X1。 青岛乾元通数码科技有限公司作为国家应急产业企业,深耕于数据调度算法…

医疗数字化转型数据中台架构方案(一)

为推进医疗数字化转型,我们提出构建数据中台架构方案:通过集成医院内外多个数据源,利用大数据、人工智能等技术对数据进行清洗、整合、标准化处理,形成高质量的数据资产;再基于云原生技术构建湖仓一体化大数据平台&…

【Python数据结构与算法】栈----合法出栈序列

题目:合法出栈序列 描述 给定一个由大小写字母和数字构成的,没有重复字符的长度不超过62的字符串x,现在要将该字符串的字符依次压入栈中,然后再全部弹出。 要求左边的字符一定比右边的字符先入栈,出栈顺序无要求。 …

守护夏日清凉:EasyCVR+AI视频智能管理方案为水上乐园安全保驾护航

随着夏季的来临,水上乐园成为了人们避暑消夏、亲子互动的理想去处。然而,随着游客量的激增,如何确保水上乐园的安全与秩序,提升游客体验,成为了管理者亟待解决的问题。为此,引入一套高效、智能的视频监控方…

Node.js原生开发脚手架工具(下)

前言 在现代软件开发中,脚手架工具成为提高开发效率和一致性的关键利器。使用Node.js原生开发自己的脚手架工具不仅能帮助自动化常见任务,还能根据具体需求进行高度定制。Node.js的异步非阻塞特性和丰富的模块系统使其成为构建这种工具的理想选择。本篇文…

使用 pnpm workspace 和 standalone 模式构建 Next.js 的 Docker 镜像

引言 本文将探讨如何利用 pnpm workspace 和 standalone 模式来构建 Next.js 应用程序的轻量级 Docker 镜像。这种方法通过仅在 node_modules 目录中包含必要的文件,显著减少了最终 Docker 镜像的大小。 Standalone 模式简介 通常情况下,所有在 depe…

MyPrint打印设计器(四)vue3 函数式调用组件

vue3 函数式调用组件 vue中,通常情况下调用一个组件需要以下步骤 导入组件在template引入组件,并且设置ref属性在js模块定义对应的ref属性通过ref对象调用对应的方法 如果这个组件在template是不必要的,那么可以通过函数式调用组件&#xff…

Windows 10/11 系统优化工具 Optimizer 16.7

Optimizer 功能特色 全语言支持(提供19种语言) 提高系统和网络性能 禁用不必要的窗口服务 禁用 Windows 遥测、小娜等 禁用 Office 遥测(仅适用于 Office 2016) 禁用 Windows 10 自动更新 一次快速下载有用的应用程序 卸载 UWP 应…

ARMxy工业控制器搭载 Mini PCIe加密安全芯片工业控制拓展之旅

在当今高度数字化和智能化的工业领域,数据采集的准确性、实时性和全面性对于优化生产流程、提高产品质量以及保障生产安全至关重要。ARM 工业控制器以其高效能、低功耗和出色的稳定性,成为了工业自动化领域的重要组成部分。而其中的 Mini PCIe 接口更是为…

JVM内存结构、内存参数、调优原理

文章目录 引言I JVM基础知识1.1 JVM内存区域1.2 JVM 堆内存布局1.3 JVM 内存参数II 调整JVM的默认堆内存配置2.1 java命令启动jar包时配置JVM 的内存参数2.2 基于Tomcat服务器部署的java应用,配置JVM 的内存参数III JVM调优基本概念: 应用程序的响应时间(RT)和吞吐量(QPS)…

基于springboot+vue+uniapp的使命召唤游戏助手小程序

开发语言:Java框架:springbootuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包&#…

Lenze伦茨E82ZAFSC / E82ZAFSC001变频器IO模块手测

Lenze伦茨E82ZAFSC / E82ZAFSC001变频器IO模块手测

easyExcel 单元格合并

需求 现在有一张员工表,需要将员工信息导出为excel,同一个部门放在一起,同一个工资段放在一起。 case 员工表 package com.tx.test.testeasyexcel.excel;import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.anno…

人工智能开发实战TensorFlow机器学习框架解析

内容导读 TensorFlow概述 TensorFlow环境搭建 TensorFlow计算机加速 一、TensorFlow概述 1、TensorFlow简介 ‌‌TensorFlow是由‌Google开发的用于‌机器学习和人工智能的开源软件库,特别适用于‌深度神经网络的训练和推理。‌ 它是一个基于‌数据流图的符号…

08 - debugfs

---- 整理自 王利涛老师 课程 实验环境:宅学部落 www.zhaixue.cc 文章目录 0. 什么是 debugfs1. debugfs 配置编译和注册运行2. 第一个 debugfs 编程示例3. 通过 debugfs 导出整型数据4. 通过 debugfs 导出 16 进制数据5. 通过 debugfs 到处数组6. 通过 debugfs 导出…

【SQL】换座位

目录 题目 分析 代码 题目 表: Seat ---------------------- | Column Name | Type | ---------------------- | id | int | | student | varchar | ---------------------- id 是该表的主键(唯一值)列。 该表的每一行都表示学…

ComfyUI SDXL Prompt Styler 简介

SDXL Prompt Styler 来自于 comfyui-art-venture 节点 style 已经更新 旧版本的 sai-line art 变更为 line art log_prompt 已经更新 旧版本的 false 变更为 Yes 或 No style_name 已经更新 旧版本的 true (不再适用)(可以尝试对应style中…

【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch12 随机森林(Random Forest)

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-…

dht11 + Sc32440驱动

一、DHT11概述 1、简介 DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器,它应用专用的数字模块采集技术和温湿度传感技术,确保产品具有极高的可靠性和卓越的长期稳定性。传感器包括一个电阻式感湿元件和一个NTC测温元件&#xff…

【专题】2024年中国AI人工智能基础数据服务研究报告合集PDF分享(附原数据表)

原文链接:https://tecdat.cn/?p37516 随着人工智能技术的迅猛发展,AI 基础数据服务行业迎来了前所未有的发展机遇。报告合集显示,2023 年中国 AI 基础数据服务市场规模达到 45 亿元,且未来五年复合增长率有望达到 30.4%。多模态大…