echarts怎么給餅圖中間添加文字

這篇文章主要介紹“echarts怎么給餅圖中間添加文字”，在日常操作中，相信很多人在echarts怎么給餅圖中間添加文字問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”echarts怎么給餅圖中間添加文字”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

先看要實(shí)現(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ā)布活動(dòng)}',
                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ā)布活動(dòng)}'

方法二：使用title

title: {
    text:this.total,//主標(biāo)題文本
    subtext:'共發(fā)布活動(dòng)',//副標(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實(shí)例，其中dom為圖表所在節(jié)點(diǎn)
   
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,//水平對(duì)齊方式，默認(rèn)根據(jù)x設(shè)置自動(dòng)調(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（無(wú)邊框）
        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,//一級(jí)層疊控制。默認(rèn)0,每一個(gè)不同的zlevel將產(chǎn)生一個(gè)獨(dú)立的canvas，相同zlevel的組件或圖標(biāo)將在同一個(gè)canvas上渲染。zlevel越高越靠頂層，canvas對(duì)象增多會(huì)消耗更多的內(nèi)存和性能，并不建議設(shè)置過(guò)多的zlevel，大部分情況可以通過(guò)二級(jí)層疊控制z實(shí)現(xiàn)層疊控制。
        z: 6,//二級(jí)層疊控制，默認(rèn)6,同一個(gè)canvas（相同zlevel）上z越高約靠頂層。
    },


    //提示框，鼠標(biāo)懸浮交互時(shí)的信息提示
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/> : {c} (mo8jb08%)"
    },
    //圖例，每個(gè)圖表最多僅有一個(gè)圖例
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['第一部分','第二部分','第三部分','第四部分']
    },
    // 系列列表,每個(gè)系列通過(guò) type 決定自己的圖表類型
    series : [
        {
            name: '訪問(wèn)',
            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 (nb8wvup%)",
                        position:"inner"
                    }
                }
            }
        }
    ],
};
myChart.setOption(option);// 為echarts對(duì)象加載數(shù)據(jù)

到此，關(guān)于“echarts怎么給餅圖中間添加文字”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！