Echarts饼图绘制

实现效果：

html代码：

</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,

猜你喜欢