Echarts餅圖繪制

實現效果：

 

html代碼：

<div id="chartBody1" style="width:120%;height:28vh;">
    <div id="chart_Body1" style="width:100%;height:28vh;">

    </div>
</div>

 

js代碼：

//離線占比
var chart_Body1 = echarts.init(document.getElementById('chart_Body1'));
chart_Body1.setOption({
color: ['#8D4E03', '#FFAE00'],
series: [ //系列列表
{
name: '離線占比', //系列名稱
type: 'pie', //類型 pie表示餅圖
center: ['40%', '45%'], //設置餅的原心坐標 不設置就會默認在中心的位置
radius: ['55%', '65%'], //餅圖的半徑,第一項是內半徑,第二項是外半徑,內半徑為0就是真的餅,不是環形
itemStyle: { //圖形樣式
normal: { //normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
label: { //餅圖圖形上的文本標簽
show: true,//平常不顯示
position: 'center',
textStyle: {
fontSize: '25',
fontWeight: 'bold'
},
formatter: '{c}%' // {b}:數據名； {c}：數據值； {d}：百分比
},
labelLine: { //標簽的視覺引導線樣式
show: false //平常不顯示
}
}
}
}
]
});
window.addEventListener("resize", function () {
chart_Body1.resize();
});

賦值：

var offLineZb=[];

  offLineZb.push((offLine * 100.0 / count).toFixed(2));//離線占比

//離線占比
chart_Body1.setOption({
series: [
{
data: [
{
value: 100 - offLineZb,
name: name,
label: {
normal: {
show: false
}
}
},
{
value: offLineZb,
name: '',
label: {
normal: {
show: true
}
}
}
]
}
]
})

如果為空：value: 100 - 0,