后台数据传递给前端是小数格式,例如:0.2248

前端显示要求为:22.48%

方法,设置tooltip.formatter和yAxis.axisLabel.formatter,两个分别是提示语格式化和Y轴标签格式化。

示例:

//初始化echart
var myChart = echarts.init(document.getElementById('chartArea')); //初始配置
var option = {
title: {
text: ''
},
tooltip: {
formatter:null
},
legend: {
data:['新增用户数']
},
grid: {
left: '3%',
right: '4%',
bottom: '4%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
axisLabel:{
interval:0,
rotate:0
},
boundaryGap: false,
data: []
},
yAxis: {
axisLabel:{
formatter:null
}
},
series: []
}; //查询数据后,更新配置
option.xAxis.data = chartData.xAxisData;
option.legend.data = chartData.legends[0];
option.series = chartData.series[0];
var dataFormat = chartData.dataFormats[0];
if(dataFormat == 'normal'){
option.yAxis.axisLabel.formatter = null;
option.tooltip.formatter = null;
}else if(dataFormat == 'percentage'){
option.yAxis.axisLabel.formatter = function(value,index){
return (value*100).toFixed(2)+'%';
};
option.tooltip.formatter = function (params) {
return (params.value*100).toFixed(2)+'%';
};
}
myChart.setOption(option,true);

另外,如果图上显示了数值,则也需要格式化。格式化方法如下:

//4.x版本
option.series.label.formatter = function (params) {
return (params.value*100).toFixed(2)+'%';
}; //3.x版本
option.series.label.normal.formatter = function (params) {
return (params.value*100).toFixed(2)+'%';
}; //2.x版本
option.series.itemStyle.normal.label.formatter = function (params) {
return (params.value*100).toFixed(2)+'%';
};

ECharts显示百分比(小数转百分比)的更多相关文章

  1. WPF下载远程文件,并显示进度条和百分比

    WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...

  2. 【JAVA】POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写

    POI设置EXCEL单元格格式为文本.小数.百分比.货币.日期.科学计数法和中文大写 博客分类:,本文内容转自 http://javacrazyer.iteye.com/blog/894850 FIL ...

  3. POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写

    再读本篇文章之前,请先看我的前一篇文章,前一篇文章中有重点讲到POI设置EXCEL单元格格式为文本格式,剩下的设置小数.百分比.货币.日期.科学计数法和中文大写这些将在下面一一写出 以下将要介绍的每一 ...

  4. echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮

    echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...

  5. C#曲线分析平台的制作(三,三层构架+echarts显示)

    本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...

  6. NPOI_2.1.3-Excel中设置小数、百分比、货币、日期、科学计数法和金额大写

    在操作Excel时候一些特殊值的转换是在所难免的,下面就给出转换方法大同小异,代码如下: HSSFWorkbook hssfWorkbook = new HSSFWorkbook(); ISheet ...

  7. sql中保留一位小数的百分比字符串拼接,替换函数,换行符使用

    select  num ,cast(round(convert(float,isnull((a.Sum_Num-d.Sum_Num),0))/convert(float,c.Sum_Store_Num ...

  8. 【转】js小数转百分比

    转自:js小数和百分数的转换 function toPercent(point){ var str=Number(point*100).toFixed(1); str+="%"; ...

  9. wordpress 添加 显示磁盘剩余空间百分比的插件

    在 wp-content/plugins 文件夹下 我取的文件名是: folder-sizes-dashboard-widget.php 在仪表盘 可以看到 Folder Sizes 标题的Box & ...

随机推荐

  1. C++小总结

    1.C与C++的简单区别 1.建立的文件类型不一样,C语言是.c,C++是.cpp 2.引入的头文件不一样 3.C++有命名空间 4.输入输出语句不一样 5.C语言不允许重载,C++可以重载 6.自定 ...

  2. 函数新特性、内联函数、const详解

    一.函数回顾与后置返回类型 函数定义中,形参如果在函数体内用不到的话,则可以不给形参变量名字,只给其类型. 函数声明时,可以只有形参类型,没有形参名 把函数返回类型放到函数名字之前,这种写法,叫前置返 ...

  3. window.onload和JQuery中$(function(){})的区别即其实现原理

    一.区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 在Jquery中$(function(){ })和$(document).ready(function(){ ...

  4. 使用bootstrap-table插件

    1.用户提交信息过滤表格内容: a.设置表格查询参数,并在用户提交按钮时候更新表格 <form id="current_table" class="form-inl ...

  5. javax.jms.JMSException: Could not connect to broker URL: tcp://localhost:61616. Reason: java.net.ConnectException: Connection timed out: connect

    本地测试向服务器中ActiveMQ添加队列数据,报错连接超时 解决: 查看服务器端口号是否存在,(最好是0.0.0.0格式的,虽然暂时还不知道为啥得这个格式) 通过telnet测试该端口不通(6161 ...

  6. stl容器学习——queue,stack,list与string

    目录 头文件 string 目录部分 1.string的定义及初始化 ① 用一个字符串给另一个字符串赋值 ②用字符串常量对字符串进行赋值 ③ 用n个相同的字符对字符串赋值 2.string的运算符及比 ...

  7. wordcloud词云--可视化

    import jieba import wordcloud f = open("新时代中国特色社会主义.txt", "r", encoding="gb ...

  8. py文件打包成exe程序

    C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Scripts https://blog.csdn.net/lqzdream ...

  9. SQLmap源码分析之框架初始化(一)

    SQLmap是现在搞web人手一个的注入神器,不仅包含了主流数据库的SQL注入检测,而且包含提权以及后渗透模块.基于python2.x开发而成,使用方便.所以研究web安全少不了分析源码,学习代码的同 ...

  10. iOS开发ApplePay的介绍与实现

    1.Apple Pay的介绍 Apple Pay官方 1.1 Apple Pay概念 Apple Pay,简单来说, 就是一种移动支付方式.通过Touch ID/ Passcode,用户可使用存储在i ...