今天工作中要求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)+"%";}
使用这段代码后,效果如下图所示。特此记录。