echarts餅圖標題居中以及調整主副標題的間距、字號

 

text：主標題

subtext：副標題

textStyle: {} //主標題的屬性設置

subtextStyle: {} //副標題的屬性

itemGap：主副標題之間的間距

textAlign：整體（包括 text 和 subtext）的水平對齊

項目個數是后台返回的，直接渲染

function initThisMonthProjectsParticipate() {
    $.ajax({
        url: urlpic + "currentMonthParticipateProject",
        type: 'get',
        data: {
            deptId: '4676',
        },
        success: function (data) {
            console.log(data.participateProjectTotal, 'data');
            let total = data.participateProjectTotal;
            let dataOption = data.eChartResponseModel;
            let styleOption = {
                title: {
                    show: true,
                    text: '本月參評項目',
                    subtext: total + '個',
                    itemGap: 8,
                    left: '48%',
                    top: '45%',
                    textStyle: {
                        color: '#B4E4FF',
                        fontSize: 8 * sceenRate,
                    },
                    subtextStyle: {
                        color: '#B4E4FF',
                        fontSize: 8 * sceenRate,
                    },
                    textAlign:'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'//a 系列名稱，b 數據項名稱，c 數值，d 百分比
                },
                series: [{
                    name: '本月參評項目',
                    type: 'pie',
                    label: {
                        show: true,
                        alignTo: 'labelLine',
                        position: 'outside',
                        formatter: '{c}個{b}項目',
                        fontSize: 6 * sceenRate,
                        alignTo: 'edge'
                    },                 
                }]
            }
            let id = 'participateChart'
            let chart = initCharts(id, dataOption, styleOption)
            chart.on('click', function () {
                initSecondLevelPage()
            })
        },
    })

}