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;},},

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

Echats给柱状图及提示文字添加百分号（%）的解决办法相关推荐

Qt直接运行生成的exe文件提示“缺少Qt5Core.dll”的解决办法
Qt直接运行生成的exe文件提示"缺少Qt5Core.dll"的解决办法 [错误描述] 在QtCreator下,程序可以正常运行,但是当关闭QtCreator后,在"de ...
海康摄像机在Edge浏览器的网页无法直接预览，按照要求安装WebComponents后仍然提示请安装插件的解决办法
海康摄像机在网页无法直接预览,按照要求安装WebComponents后仍然提示请安装插件的解决办法在win10系统Microsoft Edge浏览器中亲测有效. 第一步:按照要求安装WebCompo ...
idea验证失败_SVN提示https证书验证失败解决办法
技术分享之 <SVN提示https证书验证失败解决办法>--我要编程技术手册系列 svn提交代码时报错,证书认证失败 Commit failed with error 0 files co ...
Mac cnpm装包时提示Error: EACCES: permission denied解决办法
Cnpm装包时提示Error: EACCES: permission denied解决办法 2018年03月04日 09:31:51 miniminixu 阅读数:1598 版权声明:本文为博主原创文 ...
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法
eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Ser ...
计算机开机出现ROM,电脑无法开机提示exiting pxe rom的解决办法
近日,有用户反映,当电脑开机的时候便跳出提示"exiting pxe rom",不知道该如何处理.那么出现这种问题怎么办呢?首先给大家解释一下电脑开机出现"exiting ...
打开excel，提示 flash play2 错误，解决办法
打开excel,提示 flash play2 错误,解决办法,下载附件的东东,然后解压安装即可 ISScript.msi安装补丁.zip (4.8 MB) 下载次数: 0
安装ps时显示建议重启计算机,安装 photoshop cs6提示建议重新启动计算机的解决办法...
我的电脑重装为Win10系统,在安装安装 photoshop cs6提示建议重新启动计算机的解决办法重启了几次都是这样,这应该是安装 CS5 系列软件的通病,测试的系统为32位系统,本文就针对这 ...
在word中利用Endnote导入文献时提示“无法编辑range”的解决办法-基本上通过以下方法都可以解决
在word中利用Endnote导入文献时提示"无法编辑range"的解决办法注意:在处理这个问题之前,请复制word以备份我们要处理的word文件,否则后期如果我们调整了word ...
Ubuntu 提示boot空间不足的解决办法
系统用久了就会出现各种问题,这一点windows表现的格外明显,Linux也不例外,当然啦,在稳定性方面Linux肯定是远胜于windows.我电脑的Ubuntu系统已经使用了有快两年了,刚刚出现了卷 ...

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

柱状图上添加%效果图

悬浮标签添加%效果图：

Echats给柱状图及提示文字添加百分号（%）的解决办法相关推荐

最新文章

热门文章