echarts的series中富文本渲染不生效

  1. echarts版本需要在3.7.1以上
  2. 渲染当时svg方式,series中富文本集rich不生效,将svg更改为canvas
let myChart = this.$echarts.init(document.getElementById(chartId), null, {renderer: 'canvas'})
myChart.setOption(option,true)
  1. 案例补充
 let option = {
        title: {
          text: '模式',
          left: 'center',
          top: '50%',
          // padding: [24, 0],
          textStyle: {
            color: '#fff',
            fontSize: 18,
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        // legend: {
          // selectedMode: false,
          // formatter: function(name) {
          //   var total = 0; //各科正确率总和
            // echartData.forEach(function(value, index, array) {
              //total += value.value;
              // total = array.length;
            // });
            // return '共计{total|' + total + '}家单位';
          // },
          // data: ['我我我'],
          // left: 'center',
          // top: 'center',
          // icon: 'none',
          // align: 'center',
          // textStyle: {
          //   color: "#fff",
          //   fontSize: 16,
            // rich: {
            //   total: {
            //     color: "#ffc72b",
            //     fontSize: 40,
            //     align: 'center'
            //   }
            // }
          // },
        // },
        series: [{
          name: '模式',
          type: 'pie',
          radius: ['40%', '55%'],//同心圆
          center: ['40%', '70%'],//位置
          hoverAnimation: false,//悬停放大动画关闭
          itemStyle: {
            normal: {
              label: {
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                // formatter: '{b|{b}:}{c}  {per|{d}%}  ',
                // formatter: function (params) {
                //   return `{c}`;
                // },
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                // formatter: '{a|{a}}\n {hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                formatter: '{per| {d}%}',
                // formatter: function (params) {
                //     return `<div class="zuo2-br-pie">{d}</div>`;
                //   },
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    // padding: [2, 4],
                    borderRadius: 2
                  }
                },
              },
              labelLine: {
                show: true,
                length:0,//第一段长度
                length2:0//第二段长度 设置0不显示第二段
              },
            },
          },

          data: [{
            name: '归属地',
            value: 30
          },{
            name: '上海',
            value: 20
          },{
            name: '号码',
            value: 30
          },{
            name: '身份',
            value: 40
          },{
            name: '关键词',
            value: 30
          },{
            name: '话题',
            value: 30
          }]
        }]
      };

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数字签密:信息安全的新防线

随着互联网的普及和数字技术的飞速发展&#xff0c;信息安全问题日益凸显。在这个背景下&#xff0c;数字签密技术应运而生&#xff0c;为保护信息安全提供了新的解决方案。本文将介绍数字签密的概念、原理及应用&#xff0c;探讨其在信息安全领域的重要性。 数字签密的概念 …

智慧矿山:EasyCVR助力矿井视频多业务融合及视频转发服务建设

一、方案背景 随着矿井安全生产要求的不断提高&#xff0c;视频监控、数据传输、通讯联络等业务的需求日益增长。为满足矿井生产管理的多元化需求&#xff0c;提高矿井作业的安全性和效率&#xff0c;TSINGSEE青犀EasyCVR视频汇聚/安防监控综合管理平台&#xff0c;旨在构建一…

Spring学习05-[AOP学习-AOP原理和事务]

AOP原理和事务 AOPAOP底层原理比如下面的代码案例手动模拟AOP 动态代理详解JDK动态代理具体实现 Cglib动态代理具体实现 jdk动态代理和cglib动态代理的区别 事务 AOP AOP底层原理 当实现了AOP,Spring会根据当前的bean创建动态代理(运行时生成一个代理类) 面试题&#xff1a;为…

JAVA之(static关键字、final关键字)

JAVA之&#xff08;static关键字、final关键字&#xff09; 一、 static关键字1、静态变量2、静态方法3、 静态代码块4、例子 二、final关键字1、final修饰类2、 final修饰方法3、修饰变量 一、 static关键字 1、静态变量 private static String str1“staticProperty”2、静…

适合中小企业的MES管理系统有哪些特点

在当今竞争激烈的商业环境中&#xff0c;中小企业对于高效、灵活的生产管理系统的需求日益凸显。面对这些企业的MES管理系统不仅成为监控生产过程的得力助手&#xff0c;还通过提供关键数据&#xff0c;构建起客户期望与制造车间实时订单状态之间的紧密桥梁&#xff0c;以下是对…

Vue3使用markdown编辑器之Bytemd

官网地址&#xff1a;https://bytemd.js.org/playground GitHub地址&#xff1a;https://github.com/bytedance/bytemd ByteMD 是字节跳动出品的富文本编辑器&#xff0c;功能强大&#xff0c;可以免费使用&#xff0c;而且支持很多掘金内置的主题&#xff0c;写作体验很棒。 …

【Unity2D 2022:Particle System】添加拾取粒子特效

一、创建粒子特效游戏物体 二、修改粒子系统属性 1. 基础属性 &#xff08;1&#xff09;修改发射粒子持续时间&#xff08;Duration&#xff09;为3s &#xff08;2&#xff09;取消勾选循环&#xff08;Looping&#xff09; &#xff08;2&#xff09;修改粒子存在时间&…

星网安全产品线成立 引领卫星互联网解决方案创新

2024年6月12日&#xff0c;盛邦安全&#xff08;688651&#xff09;成立星网安全产品线&#xff0c;这是公司宣布全面进入以场景化安全、网络空间地图和卫星互联网安全三大核心能力驱动的战略2.0时代业务落地的重要举措。 卫星互联网技术的快速发展&#xff0c;正将其塑造为全球…

leetcode:编程基础0到1

文章目录 交替合并字符串str.length();StringBuilder类型 ,toString()append() &#xff0c;chatAt()题目描述 交替合并字符串 str.length(); 输出字符串str的长度 StringBuilder类型 ,toString() append() &#xff0c;chatAt() 题目描述 class Solution {public String …

(译文)IRIG-B对时编码快速入门

原文 PDF&#xff1a;https://ww1.microchip.com/downloads/aemDocuments/documents/FTD/tekron/tekronwhitepapers/221223-A-guide-to-IRIG-B.pdf IRIG-B3 概论 Inter-Range Instrument Group 时间码&#xff08;简称IRIG&#xff09;是一系列标准时间码格式。用于将时间信…

俄罗斯VK Ads开户充值全流程!VK如何开户?VK如何注册?VK广告

在俄罗斯&#xff0c;VK&#xff08;VKontakte&#xff09;是一个广受欢迎的社交媒体平台&#xff0c;对于寻求进入该市场的企业来说&#xff0c;进行VK广告推广是一条有效途径。 首先&#xff0c;你需要明确自己要推广的产品或服务&#xff0c;并且确定目标市场和受众。 由于…

1.8.0-矩阵乘法的反向传播-简单推导

1相关资料 之前分享过一个博客里面写的&#xff0c;我们大致了解并记住结论的博客&#xff1a;【深度学习】7-矩阵乘法运算的反向传播求梯度_矩阵梯度公式-CSDN博客&#xff1b;这里再分享一下自然语言处理书上关于这部分的推导过程&#xff1a;3-矩阵相乘-梯度反向传播的计算…

如何下载jmeter旧版本

如何下载jmeter旧版本 推荐先用旧版本做好测试基本操作&#xff0c;因为高版本不适合做压力测试&#xff0c;需要证书&#xff0c;有点麻烦。 1.百度或直接打开jmeter官网&#xff1a;https://jmeter.apache.org/ 2.向下拖到Archives一栏&#xff0c;点击Apache Jmeter archi…

ICC2:ignore pin的设置

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 相关文章链接:

OS Copilot测评

1.按照第一步管理重置密码时报错了,搞不懂为啥?本来应该跳转到给的那个实例的,我的没跳过去 2.下一步重置密码的很丝滑没问题 3安全组新增入库22没问题 很方便清晰 4.AccessKey 还能进行预警提示 5.远程连接,网速还是很快,一点没卡,下载很棒 6.替换的时候我没有替换<>括…

六、快速启动框架:SpringBoot3实战-个人版

六、快速启动框架&#xff1a;SpringBoot3实战 文章目录 六、快速启动框架&#xff1a;SpringBoot3实战一、SpringBoot3介绍1.1 SpringBoot3简介1.2 系统要求1.3 快速入门1.4 入门总结回顾复习 二、SpringBoot3配置文件2.1 统一配置管理概述2.2 属性配置文件使用2.3 YAML配置文…

调制信号识别系列 (一):基准模型

调制信号识别系列 (一)&#xff1a;基准模型 说明&#xff1a;本文包含对CNN和CNNLSTM基准模型的复现&#xff0c;模型架构参考下述两篇文章 文章目录 调制信号识别系列 (一)&#xff1a;基准模型一、论文1、DL-PR: Generalized automatic modulation classification method b…

如何优化 PostgreSQL 中对于复杂数学计算的查询?

文章目录 一、理解复杂数学计算的特点二、优化原则&#xff08;一&#xff09;索引优化&#xff08;二&#xff09;查询重写&#xff08;三&#xff09;数据库配置调整&#xff08;四&#xff09;使用数据库内置函数的优势 三、具体的优化方案和示例&#xff08;一&#xff09;…

鸿蒙开发:Universal Keystore Kit(密钥管理服务)【加密导入密钥(C/C++)】

加密导入密钥(C/C) 以加密导入ECDH密钥对为例&#xff0c;涉及业务侧加密密钥的[密钥生成]、[协商]等操作不在本示例中体现。 具体的场景介绍及支持的算法规格。 在CMake脚本中链接相关动态库 target_link_libraries(entry PUBLIC libhuks_ndk.z.so)开发步骤 设备A&#xf…

【机器学习】——决策树模型

&#x1f4bb;博主现有专栏&#xff1a; C51单片机&#xff08;STC89C516&#xff09;&#xff0c;c语言&#xff0c;c&#xff0c;离散数学&#xff0c;算法设计与分析&#xff0c;数据结构&#xff0c;Python&#xff0c;Java基础&#xff0c;MySQL&#xff0c;linux&#xf…