zoukankan      html  css  js  c++  java
  • 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)+'%';
                    };
  • 相关阅读:
    win10系统u盘安装单个文件超过4g解决办法
    单片机下使用IIC
    uart
    socket
    Linux中 ./configure --prefix命令
    linux下配置安装python3
    linux下的dhcp服务器实现
    安卓出现错误: java.lang.ClassCastException: android.widget.TextView cannot be cast to android.widget.EditText
    C语言基础02
    C语言基础01
  • 原文地址:https://www.cnblogs.com/hdwang/p/9099286.html
Copyright © 2011-2022 走看看