后台数据传递给前端是小数格式,例如: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. “全栈2019”Java第七十四章:内部类与静态内部类相互嵌套

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  2. [SinGuLaRiTy] 关于博客

    由于博主主要使用Chrome内核的浏览器进行博客页面的代码优化,因此有些功能可能会因为浏览器的差异而无法正常运行,博主对此也非常无奈啊:Windows的IE浏览器的兼容性实在是太差了...... 尽管 ...

  3. SFML从入门到放弃(0) 配置环境

    SFML从入门到放弃(0) 配置环境 恩..开始划水..学sfml的时候顺便做点笔记什么的.. 安装 在linux里面打开终端 然后输入 sudo apt-get install libsfml-de ...

  4. 解决方法:配置群集时# gem install redis 报错:Unable to require openssl, install OpenSSL and rebuild ruby

    问题:前面已经在/usr/local/src安装了ruby-2.3.0.tar.gz.rubygems-2.4.2.tar.gz.在配置 redis-3.1.1 群集中,使用gem install 安 ...

  5. vue-cli中的webpack打包配置

    如下: assetsSubDirectory: 'static', assetsPublicPath: '/projectName/', 其中assetsSubDirectory是代表服务器上的实际路 ...

  6. 一次http请求响应流程

    前端客户端 发起http请求 web服务器接收并解析http报文 通过WSGI协议发送给web框架 web框架创建请求对象 中间层处理 具体的视图处理-业务处理 中间层处理 创建http响应对象 返回 ...

  7. [CQOI2015]标识设计

    Luogu3170 128MB过不去 LOJ2099 256MB能卡过 BZOJ3934 512MB怎么都过的去 求在\(30*30\)的方格上放\(3\)个\(L\)的方案 , 有障碍 拓展这条路的 ...

  8. JobScheduler布置后台任务以及实现进程保活?

    1.简介 在Android 5.0 提供了一套新的 JobScheduler API,它允许您定义要在以后的某个时间或在指定的条件下(例如,当设备在充电时)异步运行的作业来优化电池寿命. https: ...

  9. iview2.0 bug之+8 区的 DatePicker

    请看以上细节图:工作案例小Demo 用心去做,不留遗憾!

  10. 20190430-Bootstrapの组件

    写在前面的乱七八糟:今天务必要把BT盘完~任重道远~ 目录 1.字体图标 2.下拉菜单 3.按钮组 4.输入框组 5.导航 5.1标签页 5.2胶囊式标签页 5.3路径导航/面包屑导航 6.导航条 7 ...