水滴图 echarts lable失真显示很多9 水滴图 显示99999999

news2024/12/24 22:10:40

解决办法:  添加一个 seriesName  lable用seriesName

<template>
  <div ref="EchartLiquidfill" class="EchartLiquidfill" :style="{ width: width }" />
</template>

<script>
export default {
  name: "EchartLiquidfill",
  props: {
    num: {
      type: Number,
      default: 0
    },
    lableName: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },

    title: {
      type: String,
      default: "出租率"
    }
  },
  data() {
    return {
      description: "水球图",
      labelColor: "#FFFFFF",
      waterAllColor: null,
     
    };
  },
  created() {
    this.$nextTick(() => {
      if (this.title === "出租率") {
        this.waterAllColor = {
          waterColor: ["#19B860", "#43E48B"],
          bgColor: "#E4FFF0"
        };
      } else {
        this.waterAllColor = {
          waterColor: ["#D94854", "#e19393"],
          bgColor: "#fce7e7"
        };
      }

      if (this.num < 0.5) {
        this.labelColor = "#F12D25";
      } else {
        this.labelColor = "#FFFFFF";
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChartWater(this.num);
    });
  },
  methods: {
    /** echart 水球图 测试*/

    drawChartWater(num) {
      let self = this;
      // const chartDom = document.getElementsByClassName("EchartLiquidfill");
      const chartDom = this.$echarts.init(this.$refs.EchartLiquidfill);
      const option = {
        title: {
          text: this.title,
          x: "center", // 水平安放位置,默认为'left',可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
          y: "bottom", // 垂直安放位置,默认为top,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
          textStyle: {
            fontSize: 16,
            fontFamily: "PingFangSC-Regular, PingFang SC",
            fontWeight: 800,
            color: "#667382"
          }
        },

        series: [
          {
            name: this.lableName,
            type: "liquidFill",
            data: [num],
            color: this.waterAllColor.waterColor,
            center: ["50%", "50%"],
            radius: "65%",
            outline: {
              show: false
            },
            backgroundStyle: {
              color: this.waterAllColor.bgColor
            },
            itemStyle: {
              opacity: 0.95,
              shadowBlur: 50,
              shadowColor: "rgba(255, 255, 255, .1)"
            },
            label: {
              position: ["50%", num > 0.6 ? "60%" : "50%"],
              fontSize: 20,
              color: this.labelColor,

              formatter: function(params) {
                // console.log(params,"params")
                if (self.lableName) {
                  return params.seriesName;
                } else {
                  return params.value * 100 + "%";
                }
              }
            }
          }
        ]
      };
      // chartDom.forEach((item) => {
      //   const myChart = this.$echarts.init(item);
      // myChart.setOption(option);
      chartDom.setOption(option);
      // });
    }
  }
};
</script>
<style scoped>
.EchartLiquidfill {
  height: calc(28vh - 10vh);
}
</style>

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

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

相关文章

第8章 驱动模块编译进内核实验(iTOP-RK3568开发板驱动开发指南 )

通过上一章的学习&#xff0c;我们学会了使用menuconfig图形化配置工具&#xff0c;以及了解了menuconfig相关的文件&#xff1a;Kconfig .config XXXdefconfig。本章节学习将helloworld驱动编译进内核。 输入“cd drivers/char”进入到 drivers/char 目录下&#xff0c;然后输…

2023工博会,正运动超高速PCIe实时运动控制卡应用预览(一)

展会倒计时&#xff1a;11天 本次的中国国际工业博览会正运动技术将携超高速PCIe实时运动控制卡亮相。 •为智能装备提供高速高精运动控制解决方案&#xff1b; •内部搭载运动控制实时内核MotionRT7; •提供多路高速IO输入输出&#xff0c;具备多种实时运动控制功能&#x…

Maven安装(超详解)

下载地址:Maven – Download Apache Maven 在提供的资料中,已经提供了下载好的安装包。如下 1、解压 apache-maven-3.9.4-bin.zip(解压即安装) bin目录 : 存放的是可执行命令。(mvn 命令重点关注) conf目录 :存放Maven的配置文件。(settings.xml配置文件后期需要修改)…

Unity中的场景加载

1、同步场景 2、异步加载 3、保留物体到下个场景中

vue 前端 问题整理

列表显示字典数据 template里面的vue代码 <el-table-column label"性别" align"center" prop"sex"><template #default"scope"> <!-- <dict-tag :optionssysUserSex :value"scope.row.sex&quo…

HTTP代理与代理IP的区别

HTTP代理和代理IP是网络安全和隐私保护中常用的两种工具。HTTP代理是一种代理服务器&#xff0c;它使用HTTP协议来转发客户端请求和响应目标服务器的响应。代理IP是一种匿名代理服务器&#xff0c;它隐藏了用户的真实IP地址&#xff0c;以保护用户的隐私和安全。本文将介绍HTTP…

从“13天”到“0天”延时,揭秘幸福里离线SLA保障最佳实践

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 “幸福里”是抖音集团旗下集内容、社区、工具于一体的房产媒体综合信息平台&#xff0c;致力于提供多样化房产资讯、定制找房需求。随着幸福里业务发展&#xff0c;…

注塑机数据采集的数据类型 物理量种类

1.状态数据&#xff1a;运行、停机、故障、待机等机台状态数据&#xff1b; 2.产量数据&#xff1a;模次、产量数据&#xff1b; 3.效率数据&#xff1a;稼动率、节拍、运行时间、停机时间、故障时间、待机时间等数据&#xff1b; 4.工艺数据&#xff1a;工艺数据保存、调机…

驱动开发--day2(内核不同模块的相互访问、字符设备驱动、led控制实验代码及现象)

实现三盏灯的控制&#xff0c;编写应用程序测试 head.h #ifndef __HEAD_H__ #define __HEAD_H__#define LED1_MODER 0X50006000 #define LED1_ODR 0X50006014 #define LED1_RCC 0X50000A28#define LED2_MODER 0X50007000 #define LED2_ODR 0X50007014#endif mychrdev.c #inc…

关于andriod App开发---查看与导出logcat日志内容

adb rootadb remountadb logcat&#xff08;开始打印指令&#xff09;按住 CtrlC&#xff08;终止打印指令&#xff09;保存日志指令&#xff1a;adb logcat -v time >D:\log\logcat.txt日志导出完成&#xff08;如下图&#xff09; 抓包工具&#xff1a; Charles(IOS 基础…

长春泛域名证书和通配符证书有什么区别

通配符SSL证书是一种数字证书&#xff0c;只是因为数字证书保护的域名数量或者类型不一样&#xff0c;将数字证书分为了单域名SSL证书、多域名SSL证书和通配符SSL证书三种。今天就随SSL盾小编了解通配符SSL证书和泛域名SSL证书的关系。 1.根据保护的域名类型&#xff0c;通配符…

传感器融合带来多重好处

传感器融合是一个热门话题&#xff0c;正好与物联网的增长趋势相吻合&#xff0c;尤其是与自动驾驶汽车和先进的驾驶员辅助系统&#xff08;ADAS&#xff09;相连。这个概念本身并不是什么新鲜事物。在Google Scholar上进行的搜索确定了可追溯到1960年代或更早的概念。但是如今…

云服务器下如何部署Flask项目详细操作步骤

参考网上各种方案&#xff0c;再结合之前学过的Django部署方案&#xff0c;最后确定Flask总体部署是基于&#xff1a;centos7nginxuwsgipython3Flask之上做的。 本地windows开发测试好了我的OCR项目&#xff0c;现在要部署我的OCR项目到云服务器上验证下。 第一步&#xff1a…

调用API接口的一些注意技巧

在实践中我们经常发现&#xff0c;很多同学都是直接请求调用和读取接口数据&#xff0c;而没有做状态码的判断&#xff0c;这在设计角度是非常不合理的。 另外&#xff0c;对于一些实时性要求不高的接口&#xff0c;更合理的做法应该是先把数据拉到本地缓存&#xff0c;再从缓存…

sql server 设置字段自增

1.将字段设置为主键&#xff1b; 2.将“标识规范”设置为是&#xff0c;这里注意切勿将默认值设置为0&#xff0c;否则无法选择“标识规范”

mybatis初体验(细节满满)

1.创建数据表&#xff08;库名为&#xff1a;mayikt&#xff09; CREATE TABLE mayikt_user (id int NOT NULL AUTO_INCREMENT,username varchar(20) DEFAULT NULL,userpwd varchar(20) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT9 DEFAULT CHARSETutf8mb3…

QT for andriod

QT for andriod 开发 apk软件&#xff0c;因为一些特殊的原因&#xff0c;在这里简单的记录一哈自己开发apk的流程和心得。 首先说明我采用的环境有哪些&#xff1f; 1、QT的版本&#xff0c;个人建议5.15.2的版本及以上&#xff0c;我是用的5.15.2。 2、andriod studio 可以…

日期--data与String的相互转换

首先我们要明确 yyyy-MM-dd HH:mm:ss 其中y:年份 MM:月份 dd:天 HH:小时 mm&#xff1a;分 ss&#xff1a;秒 date转String // 获取当前时间LocalDateTime dateLocalDateTime.now(); // 设置日期格式DateTimeFormatter formatterDateTimeFormatter.ofPattern("yyyy-MM-dd…

步进电机选型-根据应用场景

步进电机选型-根据应用场景 在线计算传动机构与步进电机选型问题&#xff0c;这个网站挺好用的 https://www.orientalmotor.com.cn/guide/motorsizingtool/[电机选型]

【C++】C++11新特性 function

包装器function 一、包装器的引入二、包装器的介绍三、bind函数的介绍 一、包装器的引入 在C中我们的可调用对象是很多的&#xff0c;例如函数指针&#xff0c;仿函数&#xff0c;lambda表达式&#xff0c;这多的可调用对象极大的丰富了C的功能&#xff0c;但是也给我们带来了…