Achieve results:
html code:
<div id="chartBody1" style="width:120%;height:28vh;">
<div id="chart_Body1" style="width:100%;height:28vh;">
</div>
</div>
js code:
// offline accounting
var chart_Body1 = echarts.init (document.getElementById ( 'chart_Body1'));
chart_Body1.setOption ({
Color: [ '# 8D4E03', '# FFAE00'],
Series: [@ series list
{
name : 'offline proportion', // series name
type: 'pie', // type of pie pie chart represents the
center: ['40% ', '45 %'], // set the cake will not set the original center coordinates the default position at the center of
radius: ['55% ', '65 %'], // pie radius, is the radius of the first, the second term is the outer radius, the inner radius of 0 is true bread, not annular
itemStyle: {// graph style
normal: {// normal pattern is a pattern in a default state; emphasis in graphic style is highlighted state, such as when the mouse or suspension linkage highlighted legend.
label: // { text label on the pie chart graphics
show: true, // do not show the usual
position: 'Center',
textStyle: {
the fontSize: '25',
fontWeight: 'Bold'
},
Formatter: '{c}% '// {b }: Data Name; {c}: data values; {d}: Percentage
},
labelLine: {// Visual tag guidewire styles
show: false // do not normally displayed
}
}
}
}
]
});
window.addEventListener ( "a resize", function () {
chart_Body1.resize ();
});
Assignment:
was offLineZb = [];
offLineZb.push ((offLine * 100.0 / count) .toFixed (2)); // offline accounting
//离线占比
chart_Body1.setOption({
series: [
{
data: [
{
value: 100 - offLineZb,
name: name,
label: {
normal: {
show: false
}
}
},
{
value: offLineZb,
name: '',
label: {
normal: {
show: true
}
}
}
]
}
]
})
If empty: value: 100 - 0,