Recent work has used echarts to generate charts, which is hereby recorded.
The original pie chart is generated as shown in the figure. When the required data is 0, it will be displayed as shown in Figure 2 below. Code attached.
<script type="text/javascript">
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data of the chart
var option = {
title : {
text: 'Inpatient medical quality',
// subtext: 'Purely fictitious',
x:'center'
},
tooltip : {
// trigger: 'item'
},
legend: {
orient: 'vertical',
top: 'center',
left: 'right',
// The name of the legend and the name of the data must be the same, the mouseover legend and click the legend have functions
data: ['Purchased daily amount insurance','Gap amount']
},
series : [
{
name: 'Access source',
type: 'pie',
//The radius of the pie chart, the first item is the inner radius, the second item is the outer radius, the inner radius of 0 is a real pie, not a ring
radius : ['50%', '10%'],
// horizontal position, vertical position
// center: ['50%', '60%'],
label:{ //Text label on the pie chart
normal:{
show:true,
position:'inner', //The position of the label
textStyle : {
fontWeight : 300 ,
fontSize : 16 //The font size of the text
},
formatter:'{d}%'
}
},
data:[
{value:0, name:'Purchased daily insurance'},
{value:310, name:'Gap Amount'}
],
itemStyle: {
normal: {
borderColor: "#FFFFFF", borderWidth: 1,
}
},
}
]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
This part of the code implements the function
itemStyle: {
normal: {
borderColor: "#FFFFFF", borderWidth: 1,
}
},