Echats给柱状图及提示文字添加百分号(%)的解决办法

业务需求:给柱状图添加百分号。

目录

柱状图上添加%效果图

悬浮标签添加%效果图:


刚开始从后台取的数据带%,我这边取这个值的时候显示undifined, 后来就让这哥们把这类的数据从数据库把%去掉。这样我这边就取到了数据,但问题来了,展示的时候需要展示%。

所以,我就不麻烦后台哥们修改了,下面开始添加%。

柱状图上添加%效果图

示例,这个字段不用修改:

完整示例:在series的label标签的,添加

formatter:function(params){ //标签内容
                      return  params.value+'%'
                    },

series: [{name: '隐患数量',type: 'pictorialBar',yAxisIndex: 0,  //对应的y轴symbol: 'roundRect',barWidth: 8,  //柱子宽度symbolMargin: '1', //图形垂直间隔symbolRepeat: true, //图形是否重复symbolSize: [8, 3], //图形元素的尺寸symbolOffset: [-10, 0],  //图形偏移z: 1,data: this.value1,itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#ADD9FF"},{offset: 1,color: "#02A7FF"}])}},label: {  //图形上的文本标签show: true,position: 'top',distance: 2,offset: [-10, 0],color: "#fff",fontSize: 9,},},{name: '整改完成率',type: 'pictorialBar',yAxisIndex: 1,  //对应的y轴symbol: 'roundRect',barWidth: 8,//柱子宽度symbolMargin: '1', //图形垂直间隔symbolRepeat: true, //图形是否重复symbolSize: [8, 3], //图形元素的尺寸symbolOffset: [12, 0],  //图形偏移右边黄色Y轴z: 1,showBackground: true,backgroundStyle: {color: '#2D6296',opacity: 0.15},data: this.value2,itemStyle: {normal: {color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#FFF09F"},{offset: 1,color: "#FEC608"}])}},label: {  //图形上的文本标签show: true,formatter:function(params){ //标签内容return  params.value+'%'},position: 'top',distance: 2,offset: [12, 0],color: "#fff",fontSize: 9,},},],

悬浮标签添加%效果图:

示例:

 // 数据预览提示tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},textStyle: {fontSize: 12,},borderWidth: 1,padding: 6,// 提示文字formatter: function(val){var tipText="";tipText += val[0].name + ' : ' + '<br/>'+ val[0].seriesName + ' : ' + val[0].value + '<br/>'+ val[1].seriesName + ' : ' + val[1].value + '%<br/>'return tipText;},},

 

今天的内容就分享到这里,我们下期见!

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

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

相关文章

前端使用linux命令更新项目生产包与测试包命令

业务需求&#xff1a;把vue开发的项目打成dist.zip文件&#xff0c;丢到服务器去&#xff0c;通过域名进行访问。 首先登录云管平台的账号和密码&#xff0c;找到对应的服务器&#xff0c;然后连接到堡垒机。 在命令行进入到域名下的地址及目录。 切换到测试文件夹 点击左上角…

servle 3.0 新特性之一 对上传表单的支持

1. 上传 * 上传对表单的要求&#xff1a; > method"post" > enctype"multipart/form-data"&#xff0c;它的默认值是&#xff1a;application/x-www-form-urlencoded > <input type"file" name"必须给"/> * 上传Servle…

manifest.mf._MANIFEST.MF和feature.xml版本控制规则

manifest.mf.我永远都忘记了OSIF插件和功能的 MANIFEST.MF和feature.xml中的依赖项声明的规则是什么。 谷歌搜索经常导致沮丧而不是答案。 因此&#xff0c;因为今天我实际上找到了这些规则的简要列表&#xff0c;所以我想在这里重新发布它们&#xff0c;并进行一些较小的修改以…

CSDN学习神器——CSDN浏览器助手测评体验

导读&#xff1a;大家好&#xff0c;我叫孙叫兽&#xff0c;本期内容给大家分享一下CSDN浏览器助手这款插件&#xff0c;看看最新版的插件已经比较完善了&#xff0c;还有一些可以优化的地方。下面简单进行体验一把最新版&#xff01; 体验时间&#xff1a;2021年5月31日。 目录…

CVE-2016-0143 漏洞分析(2016.4)

CVE-2016-0143漏洞分析 0x00 背景 4月20日&#xff0c;Nils Sommer在exploitdb上爆出了一枚新的Windows内核漏洞PoC。该漏洞影响所有版本的Windows操作系统&#xff0c;攻击者利用成功后可获得权限提升&#xff0c;微软在4月补丁日修复了该漏洞。 0x01 漏洞分析 Nils Sommer并没…

HB-X打不开的解决办法

导读&#xff1a;今早点击HB-X这款编译器的时候&#xff0c;点击快捷键和图标按钮一点反应都没有。死活打不开。 点击的时候一点提示都没有&#xff0c;重启电脑打开也是如此。 解决办法&#xff1a; 关机重启&#xff0c;一定要关机再重启。 其它情况请参考这个帖子&#xff…

Spark 101:它是什么,它做什么以及为什么起作用

最近&#xff0c;许多大数据的讨论都使用了新名称。 有人将流行的新来者Apache Spark ™视为Hadoop的更易用&#xff0c;功能更强大的替代品&#xff0c; Hadoop是大数据的首选原始技术。 其他人认为Spark是Hadoop和其他技术的有力补充&#xff0c;它具有自己的优点&#xff0c…

【iCore3 双核心板_ uC/OS-III】例程五:软件定时器

实验指导书及代码包下载&#xff1a; http://pan.baidu.com/s/1eSHenjs iCore3 购买链接&#xff1a; https://item.taobao.com/item.htm?id524229438677 转载于:https://www.cnblogs.com/xiaomagee/p/5453762.html

前端 vue 在可视化大屏领域的工作实践

导读:最近入职了一家互联网公司,主要是做物联网及互联网解决方案方向,我上来就接手了这个项目,是一个可视化管理地图,主要用于某国企物业的安全预警的职能,说来也比较倒霉,刚来这公司,公司做这个项目的前端和后端都跑路了,然后让我一个月给他整改完,说是重构吧,还不…

JavaScript GetAbsoultURl

var img document.createElement(A);img.src "/img/weixin.jpg"; //设置相对路径给Image, 此时会发送出请求url img.src; //此时相对路径已经变成绝对路径img.src null; //取消请求console.log(url);转载于:https://www.cnblogs.com/shidengyun/p/5453901.html…

【Java从入门到天黑|05】JavaSE入门之面向对象(上)

面向过程&面向对象 语言的进化发展跟生物的进化发展其实是一回事,都是”物以类聚”。相近的感光细胞聚到一起变成了我 们的眼睛,相近的嗅觉细胞聚到一起变成了我们的鼻子。 语句多了,我们将完成同样功能的相近的语句,聚到了一块儿,便于我们使用。于是,方法出现了! …

java自建ocr完整示例_Java 7:完整的invokedynamic示例

java自建ocr完整示例我当前的Java 7系列中的另一个博客条目。 这次它处理的是invokedynamic&#xff0c;这是JVM上用于方法调用的新字节码指令。 invokedynamic指令允许呼叫站点与呼叫接收者之间的动态链接。 这意味着您可以将正在执行方法调用的类链接到在运行时正在接收调用的…

【Java从入门到天黑|05】JavaSE入门之面向对象(下)

修饰符 1、static修饰符 1、static变量 在类中,使用static修饰的成员变量,就是静态变量,反之为非静态变量。 静态变量和非静态变量的区别 静态变量属于类的,"可以"使用类名来访问,非静态变量是属于对象的,"必须"使用对象来访问. 1 public class Student{…

机电传动控制大作业 第一阶段

机电传动控制大作业 第一阶段 一&#xff0e;系统硬件接口定义1.电梯内操作界面: 标有1-7数字的按钮&#xff08;每个按钮有一个LED灯&#xff0c;按下按钮灯即亮&#xff09;,开门&#xff0c;关门以及紧急报警的按钮和楼层指示的LED数码管。电梯门的打开和关闭需要两个行程开…

对后台返回的数据进行评分排序、时间排序!

导读:对后台返回的数据进行评分排序,时间排序,可以倒序,可以正序。 按照评分排序 正序 qualityScoreSort(){this.tableData0.sort((a, b) => {return b.qualityScore - a

@Deprecated新外观可能是什么?

JDK增强建议 &#xff08;JEP&#xff09;277&#xff08;“ 增强的弃用 ”&#xff09;建议“重新定义弃用注释&#xff0c;并提供工具来增强功能生命周期的尾端。” 当前 java.lang.Deprecated的一些限制使我困扰了一段时间。 我特别希望能够使用Deprecated提供文本&#xff…

C++反汇编书

1、 《C反汇编与逆向分析技术揭秘》 2、 转载于:https://www.cnblogs.com/cppskill/p/5459867.html

前端工程师直线学习路径

想自学前端?却不知道学习路径。报个班吧,又怕被坑。一张学习前端路径是带你少走N条弯路。最近两年,前端技术和三大框架地位趋于稳定,推荐这个前端开发学习路径。 新手自学前端的五大阶段。 第一阶段 想成为一名前端开发人员,第一步就是网页布局和效果实现。这时候你需要学…

第三章 SQL

SQL最早版本是由IBM开发的&#xff0c;最初叫做Sequel。20世纪70年代早期是作为System R项目的一部分。 3.1 SQL查询语言概览 数据定义语言数据操纵语言完整性视图定义事务控制嵌入式SQL和动态SQL授权3.2 SQL数据定义 3.2.1 基本类型 char(n)&#xff1a;固定长度varchar(n)&am…

VS code常用插件推荐(总结整理篇)

简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个…