ECharts显示百分比(小数转百分比)

2018-06-24 02:10:06来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

后台数据传递给前端是小数格式,例如: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)+'%';
                };

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:react使用echarts地图实现中国地图大区展示

下一篇:拿Proxy可以做哪些有意思的事儿