Echarts中饼图的使用（附：formatter中{d}百分比位数修改） |
您所在的位置：网站首页 › 扇形图怎么显示百分比和数据并且保留两位小数 › Echarts中饼图的使用（附：formatter中{d}百分比位数修改） |
Echarts中饼图的使用（附：formatter中{d}百分比位数修改）
|
项目中有遇到需要使用饼图展示每种状态所占比例，去echarts官网学习了一番，成果图：
附上js代码： var myChart1 = echarts.init(document.getElementById('echarts1')); var countData = [ {value:result.data.count.approval_task, name:'报批任务'}, {value:result.data.count.proposed_tender, name:'拟制标书'}, {value:result.data.count.select_suppliers, name:'遴选供应商'}, {value:result.data.count.procurement_review, name:'采购评审'}, {value:result.data.count.result_announcement, name:'结果公示'}, {value:result.data.count.sign_contract, name:'签订合同'}, {value:result.data.count.delivery_acceptance, name:'交付验收'}, {value:result.data.count.balance, name:'结算'}, ] var option1 = { title : { text: '采购任务进程一览', x:'center' }, textStyle : { fontSize :16 , }, tooltip : { // 相对位置，放置在容器正中间 trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['报批任务','拟制标书','遴选供应商','采购评审','结果公示','签订合同','交付验收','结算'] }, series : [ { name: '任务数量', type: 'pie', radius : '70%', center: ['50%', '60%'], data: countData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart1.setOption(option1, true);然而项目中对应的每种状态百分比需要保留一位小数，而echarts中formatter中默认的{d}是保留两位小数
那么我们就需要自定义了。重新按照我们需要的定义下formatter。 tooltip : { // 相对位置，放置在容器正中间 trigger: 'item', //formatter: "{a} {b} : {c} ({d}%)", formatter:function(data){ console.log(data) return data.seriesName + ""+ data.name+ " : " + data.value + " ("+data.percent.toFixed(1)+"%)"; } }输出data看下是什么，哪些是有用的信息。不难看出官方的 a b c d 对应的就是$vars中的四个值，接下来就很简单了。
|
【本文地址】
今日新闻 |
推荐新闻 |