玫瑰图实现延长视觉引导线,并且value和name分别再视觉引导线的上方和下方显示,并解决半径过小的问题

首先半径过小的问题是通过我们给他加一个数值,然后图标展示的是showData,但是我们的label和tooltip都要再减去加上的这个值;

然后是再视觉引导线上方和下方展示的问题:

首先延长labelLine中length2的长度,然后通过distanceToLabelLine设置文字和视觉引导线的间距,因为这里的只使用一个/n的话有一点紧密,所以我这里使用两个/n

//初始化饼图
initPie() {
  let chartDom = this.$refs.pie;
  let myChart = echarts.init(chartDom);
  let option;
  let showData =[]
  let sum = 0, max = 0;

  this.pieData.forEach(item => {
    sum += item.value
    if(item.value >= max) max = item.value
  })
  // 放大规则
  let number = Math.round(max * 0.4)
  showData = this.pieData.map(item => {
    return {
      value: number + item.value,
      name: item.name
    }
  })
  option = {
    title: {
      text: '开度值(%)',
      left: 'left',
      textStyle: {
        color: '#ffffff',
        fontSize: 15
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (param){
        return param.name +': '+ (param.value - number) + '%'
      }
    },
    series: [
      {
        type: 'pie',
        minAngle: 10,  // 设置最小角度,确保数据小的扇区可见
        roseType: 'radius',
        radius: ['0%', '80%'],
        data: showData,
        label: {
          show: true,
          position:'outside',
          verticalAlign:'middle',
          color: '#f6f1f1',
          fontSize: 15,
          distanceToLabelLine:-70,//实现上方和下方显示
          formatter: function (params) {
            return ( params.value- number + '% ' + params.name + '').split(" ").join('\n\n');  // 在原来的值上添加 %
          },
        },
        labelLine:{
          minTurnAngle:90,
          maxSurfaceAngle:120,
          length:30,
          length2:80,
        },


        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX:
                0,
            shadowColor:
                'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  window.addEventListener('resize', function () {
    myChart.resize();
  });
  //  随外层div的大小变化自适应
  const _this = this
  let erd = elementResizeDetectorMaker();
  erd.listenTo(this.$refs.pieParent, () => {
    _this.$nextTick(() => {
      myChart.resize();
    })
  })

},

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

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

相关文章

java学习记录11

异常 在java中提供了处理异常的机制,能够帮助我们避免程序崩溃。 Throwable可以用来表示任何可以作为异常抛出的类,分为两种: Error和Exception。其中Error用来表示JVM无法处理的错误。程序被强制终止。 Exception又分为两种: 受…

IDEA如何导入项目,包括从git仓库(github)导入项目

前言 大家好,我是小徐啊。自从使用了IDEA开发Java应用后,我再也不想使用eclipse了。IDEA的好处真的太多了。今天小徐就来介绍下IDEA的入门知识,也就是如何导入一个项目。 IDEA如何导入项目 首先,打开IDEA,点击上方的…

GitLab|数据迁移

注意:新服务器GitLab版本需和旧版本一致 在旧服务器执行命令进行数据备份 gitlab-rake gitlab:backup:create 备份数据存储在 /var/opt/gitlab/backups/ 将备份数据传输到新服务器的/var/opt/gitlab/backups/下,并修改文件权限(下载前和上传…

SSRF漏洞利用

2.漏洞利用 2.1 SSRF中URL的伪协议 file:// 从⽂件系统中获取⽂件内容,如,file:///etc/passwd dict:// 字典服务器协议,访问字典资源,如dict://ip:6379/info sftp:// ssh⽂件传输协议或安全⽂件传输协议 ldap:// 轻量级⽬录访问…

flux代码解析

https://zhuanlan.zhihu.com/p/714150390https://zhuanlan.zhihu.com/p/714150390 flux.1[pro] 1.版本 flux.1 [pro] api收费版本 flux.1 [dev] flux.1 蒸馏版本 guidance-distilled模型 flux.1 [schell] 1-4步版本 2.通读代码框

Scala之Array数组

可修改的Array import scala.collection.mutable.ArrayBuffer //Array:数组 //可修改的:ArrayBuffer //不可修改的:Array object Test1 {//可修改的:ArrayBufferdef main(args: Array[String]): Unit {//1.新建val arr1 ArrayBuffer(1,2,3)…

PostgreSQL常用字符串函数与示例说明

文章目录 coalesce字符串位置(position strpos)字符串长度与大小写转换去掉空格(trim ltrim rtrim)字符串连接(concat)字符串替换简单替换(replace)替换指定位置长度(overlay)正则替换(regexp_replace) 字符串匹配字符串拆分split_part(拆分数组取指定位置的值)string_to_array…

Elasticsearch 中的热点以及如何使用 AutoOps 解决它们

作者:来自 Elastic Sachin Frayne 探索 Elasticsearch 中的热点以及如何使用 AutoOps 解决它。 Elasticsearch 集群中出现热点的方式有很多种。有些我们可以控制,比如吵闹的邻居,有些我们控制得较差,比如 Elasticsearch 中的分片分…

unity3d——基础篇小项目(开始界面)

示例代码&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;public class BeginPanel : BasePanel<BeginPanel> {public UIButton btnBegin;public UIButton btnRank;public UIButton btnSetting;public UIButton btnQuit; …

不用手绘不用PS!如何一键生成波谱风插画?两个方法

​ 以前我们制作一张波谱风插画既要手绘又要用ps处理&#xff0c;现在我们直接用AI一键生成。接下来我用两个方法带你快速生成波谱风插画&#xff0c;一个是通过Midjourney&#xff0c;另一个是利用ComfyUI的工作流。话不多说&#xff0c;直接上干货。 波谱风插画是什么&#x…

推荐一款专业电脑护眼工具:CareUEyes Pro

CareUEyes Pro是一款非常好用的专业电脑护眼工具&#xff0c;软件小巧&#xff0c;界面简单&#xff0c;它可以自动过滤电脑屏幕的蓝光&#xff0c;让屏幕显示更加的不伤眼&#xff0c;更加舒适&#xff0c;有效保护你的眼睛&#xff0c;可以自定义调节屏幕的色调&#xff0c;从…

Ubuntu ESP32开发环境搭建

文章目录 ESP32开发环境搭建安装ESP-IDF搭建一个最小工程现象 ESP32开发环境搭建 最近有个小项目需要用到能够联网的mcu驱动&#xff0c;准备玩玩esp的芯片&#xff0c;记录下ESP32开发环境搭建的过程。 ESP-IDF 是乐鑫科技为其 ESP32 系列芯片提供的官方开发框架。这个框架主…

更改ArduSub水平位置控制器为ADRC

水平位置控制器的函数为update_xy_controller(),位于libraries/AC_AttitudeControl/AC_PosControl.cpp,现在的控制器为p-pid,p控制器将位置信息转化为速度信息,pid控制器将速度信息转化为加速度信息,然后在送给姿态控制器。 现在将当前的P控制器转化为ADRC控制器,其他的更…

ubuntu中使用ffmpeg和nginx推流rtmp视频

最近在测试ffmpeg推流rtmp视频&#xff0c;单独安装ffmpeg是无法完成推流的&#xff0c;需要一个流媒体服务器&#xff0c;常用nginx&#xff0c;可以直接在ubuntu虚拟机里面测试一下。 测试过程不涉及编译ffmpeg和nginx&#xff0c;仅使用基本功能&#xff1a; 1 安装ffmpeg …

图像处理 之 凸包和最小外围轮廓生成

“ 最小包围轮廓之美” 一起来欣赏图形之美~ 1.原始图片 男人牵着机器狗 2.轮廓提取 轮廓提取 3.最小包围轮廓 最小包围轮廓 4.凸包 凸包 5.凸包和最小包围轮廓的合照 凸包和最小包围轮廓的合照 上述图片中凸包、最小外围轮廓效果为作者实现算法生成。 图形几何之美系列&#…

【Nginx从入门到精通】05-安装部署-虚拟机不能上网简单排错

文章目录 总结1、排查步骤 一、排查&#xff1a;Vmware网关二、排查&#xff1a;ipStage 1 &#xff1a;ping 127.0.0.1Stage 2 &#xff1a;ping 宿主机ipStage 3 &#xff1a;ping 网关 失败原因解决方案Stage 4 &#xff1a;ping qq.com 总结 1、排查步骤 Vmware中网关是否…

Python Turtle召唤童年:喜羊羊与灰太狼之懒羊羊绘画

Python Turtle召唤童年&#xff1a;喜羊羊与灰太狼之懒羊羊绘画 &#x1f438; 前言 &#x1f438;&#x1f41e;往期绘画&#x1f41e;&#x1f40b; 效果图 &#x1f40b;&#x1f409; 代码 &#x1f409; &#x1f438; 前言 &#x1f438; 小时候&#xff0c;每次打开电视…

机器学习问题之一:协变量偏移(Covariate Shift)

协变量偏移&#xff08;Covariate Shift&#xff09;是机器学习和深度学习中的一个重要概念&#xff0c;指的是在模型训练和应用时&#xff0c;输入数据&#xff08;特征&#xff09;的分布发生了变化&#xff0c;但输出标签的分布保持不变。这会导致模型在训练集上表现良好&am…

【UGUI】Unity 背包系统实现02:道具信息提示与显示

在游戏开发中&#xff0c;背包系统是一个常见的功能模块&#xff0c;用于管理玩家拾取的物品。本文将详细介绍如何在 Unity 中实现一个简单的背包系统&#xff0c;包括道具信息的提示和显示功能。我们将通过代码和场景搭建来逐步实现这一功能。 1. 功能需求清单 在实现背包系…

nodejs入门(1):nodejs的前后端分离

一、引言 我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的&#xff0c;当然&#xff0c;我肯定是很多年的计算机基础的&#xff0c;万变不离其宗。 现在web网站都流行所谓的前后端结构&#xff0c;不知不觉我也开始受到这个影响&#xff0c;以前都是前端直接操作…