使用百度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在不同区间，这个没什么好说的。