使用百度echarts製作視覺化大屏——製作一個雙層餅圖
實現一個兩層巢狀的環形圖，展示三個分類下各個品牌車輛的市場貢獻度。先看一下最終效果。
主要程式碼如下：
//產品餅圖元件和屬性
var productPie=null;var productPie_option=null;
$(document).ready(function (){
//產品銷售的環形圖
var productLegend=[['轎車1','轎車2','轎車3','轎車4','轎車5','轎車6','轎車7','轎車8','轎車9'],['SUV1','SUV2','SUV3','SUV4'],['卡車1','卡車2','卡車3','卡車4','卡車5','卡車6']];
var productClassLegend=['轎車','SUV','卡車'];
var productClassColor=['rgba(255,153,0,','rgba(153,204,102,','rgba(0,102,255,'];
var productClassData=[];
var productData=[];
var productColor=[];
for(var i=0;i<productClassLegend.length;i++)
{
var total=0;
for(var j=0;j<productLegend[i].length;j++)
{
var n=Math.round(Math.random()*100)+1;
productData.push({name:productLegend[i][j],value:n});
total+=n;
}
for(var j=0;j<productLegend[i].length;j++)
{
productColor.push(productClassColor[i]+(1.0-productData[j].value/total).toFixed(2)+")");
}
productClassData.push({name:productClassLegend[i],value:total});
}
productPie=echarts.init(document.getElementById('productPie'));
productPie_option={
title : {
text: '銷售額',
x: 'center',
y: 'center',
itemGap: 10,
textStyle : {
color : '#09F',
fontWeight: 'normal',
fontFamily : '微軟雅黑',
fontSize : 32
}
},
calculable : false,
tooltip : {
trigger: 'item',
textStyle: {
color:'#FFF',
fontSize:24
},
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name:'類別',
type:'pie',
selectedMode: 'single',
radius : ['20%','40%'],
width: '40%',
funnelAlign: 'right',
itemStyle : {
normal : {
color:function(d)
{
return productClassColor[d.dataIndex]+'1)';
},
borderColor:'#032749',
label : {
position : 'inner',
fontSize:28,
},
labelLine : {
show : false
}
}
},
data:productClassData
},
{
name:'車型',
type:'pie',
radius : ['40%','70%'],
width: '35%',
funnelAlign: 'left',
itemStyle : {
normal : {
color:function(d)
{
return productColor[d.dataIndex];
},
borderColor:'#032749',
label : {
color:'#B7E1FF',
fontSize:24
}
}
},
data:productData
}
]
};
productPie.setOption(productPie_option);
}）；
核心就是指定兩個序列的radius在不同區間，這個沒什麼好說的。