今天工作中要求echarts生成的饼图需要显示百分比并保留一位小数,在echarts的series.lable.formatter中可以设置该属性。
值得注意的是 自带的{d}%默认保留两位小数,如需修改小数位数,需要自己写一个函数。
<script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title : { text: '住院医疗品质', //2.重大疾病医疗、 //3.癌症医疗、 //4.意外伤残医疗 //------------------ //xx先生养老需求、xx女士养老需求(环形) // subtext: '纯属虚构', x:'center' }, tooltip : { // trigger: 'item' }, legend: { orient: 'vertical', top: 'center', left: 'right', // 图例名字和数据的名字一定要一致,鼠标悬停图例和单击图例有功能 data: ['已购买日额型险种','缺口金额'] }, series : [ { name: '访问来源', type: 'pie', radius : ['50%', 0], // 水平位置,垂直位置 // center: ['50%', '60%'], label:{ //饼图图形上的文本标签 normal:{ show:true, position:'inner', //标签的位置 textStyle : { fontWeight : 300 , fontSize : 16 //文字的字体大小 },
formatter:function(data){ return data.percent.toFixed(1)+"%";}
使用这段代码后,效果如下图所示。特此记录。