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)+'%';
                    };
  • 相关阅读:
    SqlServer报错:指定的网络名不再可用
    Flutter Build apk 错误(一)
    修改项目语言为C#8.0
    Foxmail6.5 ERR LOGIN FAIL 重新输入口令
    VSCode调试Flutter的问题解决
    解决localdb中文智能的问题
    EF Oracle:错误 175
    清除SqlServer日志
    EF:根据实体类生成表结构SQL
    修改TNSLSNR的端口
  • 原文地址:https://www.cnblogs.com/hdwang/p/9099286.html
Copyright © 2011-2022 走看看