ECharts显示百分比(小数转百分比)
后台数据传递给前端是小数格式,例如: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显示百分比(小数转百分比)的更多相关文章
- WPF下载远程文件,并显示进度条和百分比
WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...
- 【JAVA】POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写
POI设置EXCEL单元格格式为文本.小数.百分比.货币.日期.科学计数法和中文大写 博客分类:,本文内容转自 http://javacrazyer.iteye.com/blog/894850 FIL ...
- POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写
再读本篇文章之前,请先看我的前一篇文章,前一篇文章中有重点讲到POI设置EXCEL单元格格式为文本格式,剩下的设置小数.百分比.货币.日期.科学计数法和中文大写这些将在下面一一写出 以下将要介绍的每一 ...
- echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮
echarts 显示下载按钮,echarts 自定义按钮,echarts 添加按钮 >>>>>>>>>>>>>>&g ...
- C#曲线分析平台的制作(三,三层构架+echarts显示)
本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...
- NPOI_2.1.3-Excel中设置小数、百分比、货币、日期、科学计数法和金额大写
在操作Excel时候一些特殊值的转换是在所难免的,下面就给出转换方法大同小异,代码如下: HSSFWorkbook hssfWorkbook = new HSSFWorkbook(); ISheet ...
- sql中保留一位小数的百分比字符串拼接,替换函数,换行符使用
select num ,cast(round(convert(float,isnull((a.Sum_Num-d.Sum_Num),0))/convert(float,c.Sum_Store_Num ...
- 【转】js小数转百分比
转自:js小数和百分数的转换 function toPercent(point){ var str=Number(point*100).toFixed(1); str+="%"; ...
- wordpress 添加 显示磁盘剩余空间百分比的插件
在 wp-content/plugins 文件夹下 我取的文件名是: folder-sizes-dashboard-widget.php 在仪表盘 可以看到 Folder Sizes 标题的Box & ...
随机推荐
- “全栈2019”Java第十二章:变量
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- mysqldump导出数据不带时区信息的问题
今天在导出数据时,发现所有timestamp字段都不带时区信息,因为我在东8区,导出的数据中所有时间都提早了8个小时 首先先看表的字段和数据 CREATE TABLE IF NOT EXISTS `a ...
- [ 转 ] 为 phpstorm 自定义默认 Web 服务器
phpstorm自带web 服务器,可以直接执行调试,这个之前的文章专门讲过,可以看下. 同时你也可以选择在phpstorm集成apache服务器,下面是我自己的亲测的步骤. 如何修改apache默认 ...
- ArchLinux下Shell基础学习
首先来认识脚本语言:通常指的是命令行界面的解析器.(来自维基的解释) 第一部分:认识Shell 大家可以看到这里使用了#!/bin/sh和!/bin/bash.可是俩者有什么区别呢?下图有解释. sh ...
- CSS 加号选择器("+")
加号选择器("+"):就是指对找到的某类的元素除第一个元素以外的兄弟元素起作用,即第一个元素不起作用,后面的兄弟元素都会起作用 效果:给每一个li加一个border-left, ...
- C# 进程通信SendMessage和有关消息参数
SendMessage是啥? 函数原型: LRESULT SendMessage(HWND hWnd,UINT Msg,WPARAM wParam,LPARAM IParam)SendMessage( ...
- C/C++入门易错点及常用小技巧
int型:绝对值在10^9范围内的整数都可以定义为int型 long long 型:如果long long型赋值大于2^23-1的初值,需要在初值后面加LL,否则会编译错误. float,double ...
- Vivado 的IP:Global 和 Out-Of-Context选项问题
在Vivado定制IP的时候,或者在IP Catalog中双击一个IP,不论该IP是我们自己添加到工程的自定义IP,还是Vivado自己带的IP,选择"Customize IP"后 ...
- C++ 流控制函数setw()、setfill()、setbase()、setprecision()的使用
头文件: #include <iostream> #include <iomanip> 功能: std::setw :需要填充多少个字符,默认填充的字符为' '空格 std:: ...
- js 删除数组的某一项或者几项的方法
1.arr.splice() splice(index,len,[item]) 注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...