echarts餅圖不顯示資料為0的資料
阿新 • • 發佈：2018-12-30
首先闡述下為什麼會有這個需求，這個和echarts自身的顯示效果有關。
如果你選擇的展示圖形為餅圖，然後你的資料裡有一條資料為0，那麼展示的資料就為一條直線，看上去效果並不好，
會很突兀。
當然如果你的業務需求就算是直線的話也要展示出來，那麼下面的文章你可以略過了，對你畫圖表並沒有什麼幫助。
言歸正傳，我這裡會結合程式碼和圖給大家看看效果，首先看看資料為0時的效果。效果如下
附上程式碼：
<html> <head> <title>echarts測試</title> <script type="text/javascript" src="echarts.js"></script> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:800px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, title: { text: '某站點使用者訪問來源', subtext: '純屬虛構', x:'center' }, legend: { orient: 'vertical', left: 'left', //這個為提示條，注意名稱要和data裡的name一一對應 data: ['視訊廣告','聯盟廣告', '郵件營銷', '直接訪問',"搜尋引擎","黑客"] }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:235, name:'視訊廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接訪問'}, {value:1400, name:'搜尋引擎'}, {value:0, name:'黑客'} // {value:0, name:'黑客',itemStyle:{ // normal:{ // label:{ // show: true, // formatter: function (params,option) { // if(params.data.value == 0){ // // params.data.itemStyle.normal.labelLine.show = false; // params.data.label.normal.show = false; // params.data.labelLine.normal.show = false; // } // }, // }, // labelLine: { // show: true // } // } // }} ] } ] } // var opt = option.series[0]; // lineHide(opt); // //資料為零時隱藏線段 // function lineHide(opt) { // jQuery.each(opt.data, function (i, item) { // if (item.value == 0) { // item.itemStyle.normal.labelLine.show = false; // item.itemStyle.normal.label.show = false; // } // }); // } // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
是不是很難受。
下面我這裡介紹下將0資料不在餅圖上顯示的幾種方式。
現附上最終效果圖：
1.在後臺數據處理時候講資料結果為0的資料過濾掉（這個大家根據業務情況做處理，這裡只講述下思路，不做具體展示）
2.在option的定義裡處理（和第三個方法本質上是一樣的，2的方式對各個資料進行處理，更有針對性，而3對餅圖裡的所有資料都做統一處理，大家根據需要進行選擇）
附上程式碼：
<html> <head> <title>echarts測試</title> <script type="text/javascript" src="echarts.js"></script> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:800px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, title: { text: '某站點使用者訪問來源', subtext: '純屬虛構', x:'center' }, legend: { orient: 'vertical', left: 'left', //這個為提示條，注意名稱要和data裡的name一一對應 data: ['視訊廣告','聯盟廣告', '郵件營銷', '直接訪問',"搜尋引擎","黑客"] }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視訊廣告'}, {value:1548, name:'搜尋引擎'}, // {value:0, name:'黑客'} //注意：這種方式，這個過濾只針對黑客這個屬性，其他屬性如果為0的話還是會顯示的， //這個是具體根據某個屬性做的設定，如果需要對所有的屬性都做處理，推薦使用第三種 {value:0, name:'黑客',itemStyle:{ normal:{ label:{ show: true, formatter: function (params,option) { if(params.data.value == 0){ // params.data.itemStyle.normal.labelLine.show = false; params.data.label.normal.show = false; params.data.labelLine.normal.show = false; } }, }, labelLine: { show: true } } }} ] } ] } // var opt = option.series[0]; // lineHide(opt); // //資料為零時隱藏線段 // function lineHide(opt) { // jQuery.each(opt.data, function (i, item) { // if (item.value == 0) { // item.itemStyle.normal.labelLine.show = false; // item.itemStyle.normal.label.show = false; // } // }); // } // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
3.寫一個函式，遍歷所有的資料，將為0的資料隱藏掉
附上程式碼：
<html> <head> <title>echarts測試</title> <script type="text/javascript" src="echarts.js"></script> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> </head> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:800px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); var option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, title: { text: '某站點使用者訪問來源', subtext: '純屬虛構', x:'center' }, legend: { orient: 'vertical', left: 'left', //這個為提示條，注意名稱要和data裡的name一一對應 data: ['視訊廣告','聯盟廣告', '郵件營銷', '直接訪問',"搜尋引擎","黑客"] }, series : [ { name: '訪問來源', type: 'pie', radius: '55%', data:[ //使用該種方法記得要加上itemStyle屬性，不然會找不到show屬性報錯的 {value:335, name:'直接訪問',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }}, {value:310, name:'郵件營銷',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }}, {value:234, name:'聯盟廣告',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }}, {value:135, name:'視訊廣告',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }}, {value:1548, name:'搜尋引擎',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }}, {value:0, name:'黑客',itemStyle:{ normal:{ label:{ show: true, }, labelLine: { show: true } } }} ] } ] } var opt = option.series[0]; lineHide(opt); //資料為零時隱藏線段 function lineHide(opt) { jQuery.each(opt.data, function (i, item) { if (item.value == 0) { item.itemStyle.normal.labelLine.show = false; item.itemStyle.normal.label.show = false; } }); } // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>