文档章节

关于echars数值不显示小数,例如12.3% 显示为12%

省委书记沙瑞金
 省委书记沙瑞金
发布于 2016/09/18 10:05
字数 274
阅读 1177
收藏 1

有人问我一个问题,说echarts如何显示将小数转换成整数,我决定,在这边写两个demo

第一个

<script type="text/javascript">
    var chart = echarts.init(document.getElementById('chart1'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter:  function (obj) {
                return obj.name + '\n' + obj.percent + '%'
            }
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: function (obj) {
                            return obj.name + '\n' + obj.percent + '%'
                        }
                    }
                },
                data:[
                    {value:335, name:'直达'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1048, name:'百度'},
                    {value:251, name:'谷歌'},
                    {value:147, name:'必应'},
                    {value:102, name:'其他'}
                ]
            }
        ]
    };

    chart.clear();
    chart.setOption(option);
</script>

显示的结果为:

第二个:

<script type="text/javascript">
    var chart = echarts.init(document.getElementById('chart1'));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter:  function (obj) {
                return obj.name + '\n' + obj.percent.toFixed(0) + '%'
            }
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: function (obj) {
                            return obj.name + '\n' + obj.percent.toFixed(0) + '%'
                        }
                    }
                },
                data:[
                    {value:335, name:'直达'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1048, name:'百度'},
                    {value:251, name:'谷歌'},
                    {value:147, name:'必应'},
                    {value:102, name:'其他'}
                ]
            }
        ]
    };

    chart.clear();
    chart.setOption(option);
</script>

显示的结果为:

其中最主要的区别就是对label添加了一个formatter的函数。

© 著作权归作者所有

省委书记沙瑞金
粉丝 22
博文 48
码字总数 54918
作品 0
海淀
前端工程师
私信 提问
加载中

评论(2)

省委书记沙瑞金
省委书记沙瑞金 博主

引用来自“麦兜不怕苦”的评论

请问,tooltip里面的百分比需要显示小数点后3位,怎样做呢
把这一句话中内容给更换成如下内容。
return obj.name + '\n' + obj.percent.toFixed(3) + '%'
麦兜不怕苦
请问,tooltip里面的百分比需要显示小数点后3位,怎样做呢
请问ECharts饼形图如何让数值不显示小数,例如12.3% 显示为12%

@曹思源 你好,想跟你请教个问题:ECharts饼形图如何让数值不显示小数,例如12.3% 显示为12%

青黛OL
2016/09/14
1K
2
DevExpress:带计算器功能的文本框CalcEdit

本文为我的.NET控件库DevExpress使用笔记,我的DevExpress版本为13.1 1、控件类型全称:DevExpress.XtraEditors.CalcEdit 2、控件所在程序集:DevExpress.XtraEditors.v13.1.dll 3、工具箱内...

北风其凉
2015/10/19
1K
0
echars横坐标时间类型

echars横坐标设置时间类型,想把同一坐标轴的值统计起来,然后后面的时间不要重复。主要是希望echars是否有自动结合同类型的数值,没有求大牛帮忙,万分感激

冰V封
2015/12/24
439
0
Linux 内核开发加速 

编者:最近感觉 Linux 的内核经常都有新的版本发布,尽管都是一些小的改动,从下面官方的报告中我们也可以看出这点。 下载 PDF 格式报告 Linux基金会连续第二年发布了Linux Kernel开发现状报...

红薯
2009/08/21
1K
0
使用echarts遇到内存泄露(IE,FIREFOX)

@Kener-林峰 :我们使用echart开发一个项目,测试发现内存不断上涨,直到浏览器崩溃,我们使用echarts的地图,用定时器定时向echars传递数据,目的是能让地图实时更新和显示,代码写的也比较简单...

koower
2015/01/30
3.7K
6

没有更多内容

加载失败,请刷新页面

加载更多

关于ThinkPHP5.1+的Log无法记录SQL调试记录的小经历

项目开发阶段,除了基本编码外,性能也需要实时关注与优化。之前我的大部分项目都是使用ThinkPHP5.0以及ThinkPHP3.2,对于框架提供的日志记录和日志配置都差不多,然后使用ThinkPHP5.1的时候...

北桥苏
35分钟前
2
0
TiDB Binlog 源码阅读系列文章(四)Pump server 介绍

作者: satoru 在 上篇文章 中,我们介绍了 TiDB 如何通过 Pump client 将 binlog 发往 Pump,本文将继续介绍 Pump server 的实现,对应的源码主要集中在 TiDB Binlog 仓库的 pump/server.go...

TiDB
39分钟前
2
0
OSChina 周五乱弹 ——不知道假装开心,装的像么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :天黑了 你很忧愁, 你说世界上, 找不到四块五的妞, 行走在凌晨两点的马路上, 你疲倦地拿着半盒黄鹤楼。#今日歌曲推荐# 《四块...

小小编辑
今天
2.5K
19
Windows下学习C语言有哪些集成开发软件?

前言 初学者学习C语言遇到的最大困难想必就是搭建环境了,相当多的初学者就是被搭建环境导致放弃了学习编程,就我自己的经验而言,初学编程不应该受限于环境,使用成熟好用的环境就可以了,之...

Allen5G
昨天
3
0
Hello,Servlet!

Servlet来源 上文说过了servlet是什么,我们从servlet是什么中也可以了解到servlet的来源:servlet是Java的一个类,并且能够运行在web容器上,所以servlet是按照web容器的规范和Java的规范写...

蒙尘
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部