echarts配置環形餅圖的參數，以及牽引線顯示百分比，中間數據,牽引線標簽不重疊

最近項目有多處是用echarts的，有環形圖，折線圖，餅圖，總結了一下。

本次主要講環形圖，折線圖在下期。

 

 這個是最終的效果圖。下面附上代碼

//三種占比
var myChartType = echarts.init(document.getElementById('type_chart'));
var gailanTotal="";
option = {
    legend: {
        icon: "circle",
        orient: 'vertical',
        right: 50,
        bottom: 20,
        selectedMode: false, //取消圖例上的點擊事件
        data: ['轎車', 'SUV', 'MPV']
    },
    //點擊提示文字
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        

    },
    //環形顏色
    color: ['#0C7BE3', '#5BA1E3', '#88B7E3'],
    // 設置環形中間的數據
    graphic: [{
        type: 'text',
        left: '34%',
        top: '55%',
        z: 10,
        style: {
            fill: '#1a1a1a',
            text: gailanTotal,
            font: '16px Microsoft YaHei'
        }
    }],
    series: [{
        name: '訪問來源',
        type: 'pie',
        radius: ['35%', '55%'], //兩個表示環：內半徑,外半徑
        center: ['43%', '58%'],//左右，上下
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: true,
                position: 'outer',
                // formatter: '{d}%, {c} \n\n',
                //模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等。
                formatter: "{a_set|{b},{d}%}\n{c_set|{c}輛}\n\n\n",
                borderWidth: 20,
                borderRadius: 4,
                padding: [90, -50],
                rich: {
                    a_set: {
                        color: "#1a1a1a",
                        lineHeight: 20,
                        align: "center"
                    },
                    c_set:{
                        color: "#808080",
                    }
                   
                }
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold',
                }
            }
        },
        //牽引線條顏色
        labelLine: {
            normal: {
                show: true,
                length: 30,
                length2: 50,
                lineStyle: {
                    color: '#808080'
                },
            }
        },
        data: [],
    }]
};
myChartType.setOption(option);

因為是動態獲取的，索引中間的總數，還有環形的數據都在接口中獲取的

$.ajax({
    type: "get",
    url: "http:///salesSearch/?Stype="+stype+"&date="+date,
    dataType: "jsonp",
    success: function (json) {
        console.log(json);
        var item=json;
         var gailan=json.gailan;
        //總數
         gailanTotal=json.gailan[0].value+json.gailan[1].value+json.gailan[2].value;
         console.log(gailanTotal);// 行業概覽
        myChartType.setOption({  
            series: {
                data:gailanData
            },
            // //環形心總數
            graphic:{
                style:{
                    text:gailanTotal
                }
            }
        })

    },
    error: function () {
        console.log("請求失敗");
    }

 有時候數據多了，牽引線的會重疊

 

餅圖中的series有個avoidLabelOverlap屬性，改為true之后就不會重疊 

 

 avoidLabelOverlap:是否啟用防止標簽重疊策略，默認開啟，在標簽擁擠重疊的情況下會挪動各個標簽的位置，防止標簽間的重疊。

原文鏈接https://blog.csdn.net/qq_37899792/article/details/90747057?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

Echarts 解決餅圖文字過長重疊的問題  以下是解決方法

https://blog.csdn.net/weixin_41384423/article/details/88049983?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task