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