Today's work requires that the pie chart generated by echarts needs to display the percentage and retain one decimal place. This property can be set in the series.lable.formatter of echarts.
It is worth noting that the built-in {d}% retains two decimal places by default. If you need to modify the number of decimal places, you need to write a function yourself.
<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',
//2. Major disease medical treatment,
//3. Cancer treatment,
//4. Accidental disability medical treatment
//------------------
//Mr. xx's pension needs, xx's pension needs (ring)
// 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',
radius : ['50%', 0],
// 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:function(data){ return data.percent.toFixed(1)+"%";}
After using this code, the effect is as shown below. It is hereby recorded.
