echarts餅圖樣式


1.中間標題字體大小不一致(可分為一個title一個graphic)

2.labelLine與餅圖分離(兩個餅圖,其中一個顯示一個隱藏)

function setmyChartJsgxzq(arr,date) {
    // 基於准備好的dom,初始化echarts實例
    myChartJsgxzq = echarts.init(document.getElementById('jsgxzq'));
    // 指定圖表的配置項和數據
    var option = {
        color: moreColor,
        dataset: {
            source: arr
        },
        xAxis: {
            axisLine: {
                show: false
            }
        },
        yAxis: {
            axisLine: {
                show: false
            }
        },
        series: [{
            name : 'show',
            type: 'pie',
            radius: ['43%', '60%'],
            seriesLayoutBy: 'row',
            label: {
                normal: {
                    show: false,
                    color:'#000000'
                },
            }
        },
            {
                name: 'hidden',
                radius: ['60%', '63%'],
                type: 'pie',
                seriesLayoutBy: 'row',
                itemStyle: {
                    opacity: 0,
                },
                label: {
                    normal: {
                        show: true,
                        color:'#000000'
                    },
                },
                labelLine:{
                    normal: {
                        lineStyle: {
                            color: '#000000'
                        },
                        show: true
                    }
                }
            }
        ],
        title: {
            text: '行業更新周期',
            x: 'center',
            y: '44%',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 14
            }
        },
        graphic:{
            type:'text',
            left:'center',
            top:'54%',
            style:{
                text:date,
                textAlign:'center',
                fill:'#000',
                width:30,
                fontSize:18,
                // height:60
            }
        }
    };
    // 使用剛指定的配置項和數據顯示圖表。
    myChartJsgxzq.setOption(option);
}

注:arr的數據格式為二維數組

eg:

arr = [
['1-3年','4-6年','7-9年','10-12年'],
[10,20,30,40]
];
date = '5年';


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM