echarts饼图如何修改百分比位数

今天工作中要求echarts生成的饼图需要显示百分比并保留一位小数,在echarts的series.lable.formatter中可以设置该属性。

值得注意的是 自带的{d}%默认保留两位小数,如需修改小数位数,需要自己写一个函数。

<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title : {
        text: '住院医疗品质',
        //2.重大疾病医疗、
        //3.癌症医疗、
        //4.意外伤残医疗
        //------------------
        //xx先生养老需求、xx女士养老需求(环形)
        // subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        // trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        left: 'right',
        // 图例名字和数据的名字一定要一致,鼠标悬停图例和单击图例有功能
        data: ['已购买日额型险种','缺口金额']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : ['50%', 0],
            // 水平位置,垂直位置
            // center: ['50%', '60%'],
            label:{            //饼图图形上的文本标签
                normal:{
                    show:true,
                    position:'inner', //标签的位置
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                   
 formatter:function(data){ return data.percent.toFixed(1)+"%";} 

使用这段代码后,效果如下图所示。特此记录。



猜你喜欢

转载自blog.csdn.net/qq_38439885/article/details/79919912