echarts南丁格尔玫瑰图label格式化

520 阅读1分钟

1.南丁格尔玫瑰图

image.png

1.1 函数

function pieNightingale(obj){
    var chart = echarts.init(document.getElementById(obj.id));
    var option = {
        // legend: {
        //     top: 'bottom'
        // },
        tooltip : {
            trigger: 'item',
            //提示框的数据样式显示
            formatter:"{b}: {c}% "

        },
        // toolbox: {
        //     show: true,
        //     feature: {
        //         mark: { show: true },
        //         dataView: { show: true, readOnly: false },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        series: [
            {
                name: obj.name,
                type: 'pie',
                radius: [20, 60],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle:{
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#ddd',
                            formatter: function(params) {
                                console.log(params,999999);
                                if(params.name !== '') {
                                    return params.data.name +'\n' + params.data.submitNum +'\n'+ '(' + params.data.value + '%)';
                                }else {
                                    return '';
                                }
                            },
                        },
                    },
                    borderRadius: 8
                },

                data: obj.data,
                color: ['#fd2929', '#68feff', '#faa705', '#00b3e8', '#fff447']
            }
        ]
    };
    chart.setOption(option,true);
    return chart;
}

1.2 使用函数需要传得值


var submitData3 = [],
    type = ['提出率', '未提出率'],
    name = [];
$.each(notProposal, function (i, n) {
    //notProposal是接口获取得数据
    //手动计算百分比作为value值传给函数
    var value1 = parseFloat(Math.round(n.submitNum / (n.submitNum + n.num) * 100) / 100);
    name.push(n.typeName);
    var value3 = {
        name:n.typeName,
        value:value1*100,
        submitNum:n.submitNum
    }
    submitData3.push(value3)
});
var chart10
chart10 = pieNightingale({
    id: 'wtc',
    data: submitData3.sort(sortData),  //为了看起来好看些这里使用了一个排序的方法
    name: '提出率',
    type: type,
    isFormatter: true,
});