echarts嵌套餅圖聯動實現
效果解釋：當點擊內部餅圖時，外環餅圖會跟隨內部選擇的餅圖變化
效果圖：
代碼：
<html>
<head>
<title>嵌套餅圖聯動</title>
</head>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body>
<div id="_top" style="width:600px;height: 600px;"></div>
</body>
<script type="text/javascript"> var myecharts = echarts.init(document.getElementById('_top')); var option={ legend: { //圖例 show:false, //是否顯示圖例 orient: 'vertical', //布局方向 x: 'left', //圖例相對位置 data:['一班','二班','三班'] //圖例內容 }, series: [ //內容 { name:'班級人數占比', //內容標題 type:'pie', //圖標樣式 selectedMode: 'single', //選中模式：單選 radius: [0, '32%'], //餅圖大小，[x,y]:x表示內半徑，y表示外半徑 label: { //標簽 normal: { position: 'inner' //標簽位置：內部 } }, labelLine: { //提示框 normal: { show: false //是否顯示 } }, color:['#0A276D','#1040AF','#1F5DEA','#628CF0'], //顏色 name:['一班','二班','三班'], //內容名稱 data:[ //數據 {value:50,name:'一班',selected:true}, //selected:是否被選中 {value:46,name:'二班'}, {value:54,name:'三班'}, ], }, { name:'男女占比', type:'pie', radius: ['42%', '55%'], label: { normal: { } }, labelLine:{ normal:{ length:2, } }, color:['#205E3F','#16DA69','red'], data:[ {value:21,name:'男生'}, {value:29,name:'女生'}, ], label: { normal: { textStyle: { color: '#aaa' //提示框字體顏色 } } }, }], backgroundColor: "#190c12", //背景顏色 }; myecharts.setOption(option); //嵌套餅圖聯動 function eConsole(param) { if (typeof param.seriesIndex != 'undefined') { if (param.type == 'click') { //判斷事件類型：點擊 //寫法一：獲取餅圖散區個數,按照圖例獲取 var peiLenght= option.legend.data.length; //寫法二：獲取餅圖散區個數,按照series中data獲取 //var peiLenght= option.series[0].data.length; for(var i=0;i<peiLenght;i++){ //seriesIndex==0：選擇內環餅圖；param.dataIndex==i：散區 if(param.seriesIndex==0&¶m.dataIndex==i){ if(i==0){ var option_1 = myecharts.getOption(); option_1.series[1].name='一班男女占比'; option_1.series[1].color=['#205E3F','#16DA69','red'], option_1.series[1].data=[ {value:21,name:'男生'}, {value:29,name:'女生'}, ]; myecharts.setOption(option_1); }else if(i==1){ var option_2 = myecharts.getOption(); option_2.series[1].name='二班男女占比'; option_2.series[1].color=['#16DA69','#205E3F','red'], option_2.series[1].data=[ {value:20,name:'男生'}, {value:26,name:'女生'}, ]; myecharts.setOption(option_2); }else if(i==2){ var option_3 = myecharts.getOption(); option_3.series[1].name='三班男女占比'; option_3.series[1].color=['blue','pink','red'], option_3.series[1].data=[ {value:30,name:'男生'}, {value:24,name:'女生'}, ]; myecharts.setOption(option_3); } } } } } } myecharts.on("click", eConsole); </script>
</html>分析：
嵌套餅圖聯動實現 原理：是兩個餅圖由於內外半徑大小控制而形成的，然后對於兩個餅圖進行不同的賦值，取得了嵌套的效果，再對內部餅圖進行點擊事件監控，餅圖散區被點擊后，外部餅圖采取相對變化，便實現了內外餅圖的聯動效果