echarts學(xué)習(xí)之如何給餅圖中間添加文字

更新時間：2023年03月29日 08:57:27 作者：King_960725

這篇文章主要介紹了echarts學(xué)習(xí)之如何給餅圖中間添加文字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

先看要實現(xiàn)的餅圖效果圖

方法一：使用series

series: [
    {
        type:'pie',
        radius: ['50%', '70%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: true,
                position: 'center',
                color:'#4c4a4a',
                formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共發(fā)布活動}',
                rich: {
                    total:{
                        fontSize: 35,
                        fontFamily : "微軟雅黑",
                        color:'#454c5c'
                    },
                    active: {
                        fontFamily : "微軟雅黑",
                        fontSize: 16,
                        color:'#6c7a89',
                        lineHeight:30,
                    },
                }
            },
            emphasis: {//中間文字顯示
                show: true,
            }
        },
        lableLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: true
            },
            tooltip: {
                show: false
            }
        },
        data:this.pieDataList2
    }
]

只要在formatter里這樣寫就可以啦，rich里面寫你需要的樣式即可

formatter: '{total|' + this.total +'}'+ '\n\r' + '{active|共發(fā)布活動}'

方法二：使用title

title: {
    text:this.total,//主標(biāo)題文本
    subtext:'共發(fā)布活動',//副標(biāo)題文本
    left:'center',
    top:'32%',
    textStyle:{
    fontSize: 38,
    color:'#454c5c',
    align:'center'
    },
    subtextStyle:{
        fontFamily : "微軟雅黑",
        fontSize: 16,
        color:'#6c7a89',
    }
},

title配置如下

var myChart=echarts.init(document.getElementById('main'));
//init初始化接口，返回ECharts實例，其中dom為圖表所在節(jié)點
   
var option = {
    //標(biāo)題
    title : {
        show:true,//顯示策略，默認(rèn)值true,可選為：true（顯示） | false（隱藏）
        text: '主標(biāo)題',//主標(biāo)題文本，'\n'指定換行
        link:'',//主標(biāo)題文本超鏈接,默認(rèn)值true
        target: null,//指定窗口打開主標(biāo)題超鏈接，支持'self' | 'blank'，不指定等同為'blank'（新窗口）
        subtext: '副標(biāo)題',//副標(biāo)題文本，'\n'指定換行
        sublink: '',//副標(biāo)題文本超鏈接
        subtarget: null,//指定窗口打開副標(biāo)題超鏈接，支持'self' | 'blank'，不指定等同為'blank'（新窗口）
        x:'center'//水平安放位置，默認(rèn)為'left'，可選為：'center' | 'left' | 'right' | {number}（x坐標(biāo)，單位px）
        y: 'top',//垂直安放位置，默認(rèn)為top，可選為：'top' | 'bottom' | 'center' | {number}（y坐標(biāo)，單位px）
        textAlign: null,//水平對齊方式，默認(rèn)根據(jù)x設(shè)置自動調(diào)整，可選為： left' | 'right' | 'center
        backgroundColor: 'rgba(0,0,0,0)',//標(biāo)題背景顏色，默認(rèn)'rgba(0,0,0,0)'透明
        borderColor: '#ccc',//標(biāo)題邊框顏色,默認(rèn)'#ccc'
        borderWidth: 0,//標(biāo)題邊框線寬，單位px，默認(rèn)為0（無邊框）
        padding: 5,//標(biāo)題內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，接受數(shù)組分別設(shè)定上右下左邊距
        itemGap: 10,//主副標(biāo)題縱向間隔，單位px，默認(rèn)為10
        textStyle: {//主標(biāo)題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal',
        },
        subtextStyle: {//副標(biāo)題文本樣式{"color": "#aaa"}
            fontFamily: 'Arial, Verdana, sans...',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal',
        },
        zlevel: 0,//一級層疊控制。默認(rèn)0,每一個不同的zlevel將產(chǎn)生一個獨立的canvas，相同zlevel的組件或圖標(biāo)將在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的內(nèi)存和性能，并不建議設(shè)置過多的zlevel，大部分情況可以通過二級層疊控制z實現(xiàn)層疊控制。
        z: 6,//二級層疊控制，默認(rèn)6,同一個canvas（相同zlevel）上z越高約靠頂層。
    },


    //提示框，鼠標(biāo)懸浮交互時的信息提示
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
    },
    //圖例，每個圖表最多僅有一個圖例
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['第一部分','第二部分','第三部分','第四部分']
    },
    // 系列列表,每個系列通過 type 決定自己的圖表類型
    series : [
        {
            name: '訪問',
            type: 'pie',
            radius : '62%',
            center: ['50%', '65%'],/
            minAngle:'15',
            data:[
                {name:"第一部分",value:4},
                {name:"第二部分",value:7},
                {name:"第三部分",value:3},
                {name:"第四部分",value:1},
            ],
            itemStyle: {
                normal:{
                    label:{
                        show:true,
                        formatter: " :\n  {c} \n (vvxyksv9kd%)",
                        position:"inner"
                    }
                }
            }
        }
    ],
};
myChart.setOption(option);// 為echarts對象加載數(shù)據(jù)