1. 程式人生 > >實現echarts內外圈聯動

實現echarts內外圈聯動

 //控制都是通過控制series中data的name,那麼將內外圈需要同事控制的部分設定為一樣的名字,就可以實現內外圈聯動。

 //但是在name相同時,會使預設分配顏色時相同,使顏色不好看,這裡就需要給data自己分配顏色。

app.title = '巢狀環形圖';
var colors=[
                    '#6EB6F2','#71F16F','#FFC000','#384C6C','#7577F8',
                    '#003366','#AEABAF','#00F4D2','#8084F1','#FF9F4E',
                    
'#4FA2A9','#9a7fd1','#588dd5','#f5994e','#c05050', '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089', '#FF4F7F','#CC6666','#7f7522','#2b4490','#333399', '#70a19f','#009299','#78331e','#3e4145','#7bbfea', '#339999','#8f4b38','#694d9f','#f26522','#8e7437',
'#45b97c','#74787c','#afdfe4','#fdb933','#bed742', '#A20055','#AA0000','#C63300','#0000AA','#2200AA', '#990099','#00AAAA','#00AA88','#00AA55','#FF1493' ]; option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient:
'vertical', x: 'left', data:['直達','營銷廣告','搜尋引擎','郵件營銷','聯盟廣告','視訊廣告','百度','谷歌','必應','其他'] }, series: [ { name:'訪問來源', type:'pie', selectedMode: 'single', radius: [0, '30%'], label: { normal: { position: 'inner' } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直達', selected:true}, {value:679, name:'營銷廣告'}, ] }, { name:'訪問來源', type:'pie', radius: ['40%', '55%'], label: {//預設的label顯示時,是顯示名字,如果希望內外圈顯示的label不同,可以通過自己構建label函式。 normal:{ formatter:function (params) { if(params.value != 0) return params.data.name; else return ''; } } }, data:[ {value:335, name:'直達',type:"直達",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:310, name:'直達',type:"郵件營銷",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:234, name:'直達',type:"聯盟廣告",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:135, name:'直達',type:"視訊廣告",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:1048, name:'營銷廣告',type:"百度",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:251, name:'營銷廣告',type:"谷歌",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:147, name:'營銷廣告',type:"必應",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}}, {value:102, name:'營銷廣告',type:"其他",itemStyle:{ normal:{ color:colors[Math.floor(40*Math.random())] }}} ] } ] };