uchart pie 饼图 显示series中配置的数据(series.data)而不是百分比

这是之前1.0的写法,注意,目前是2.0。

一般的uchart饼图是长下面这样的:
在这里插入图片描述
而需求却是要饼图长成下面这个样子:
在这里插入图片描述
也就是不展示百分比,展示series.data里面的数据咯。话不多说,开整。

  • 简简单单的一步,就到位了。
showPie(canvasId, chartData, _self) {
				//核心就下面的for循环,为每个series加上format
				for(let key in chartData.series) {
					chartData.series[key].format = (val) => {
						return  chartData.series[key].data + '天'
					}
				}
				canvaPie = new uCharts({
				...相关代码写过肯定知道的
				})
}

这里需要注意的一点是,如果你是把piechart封成组件,那么还是要找到组件里的这个showPie方法,在这里把format加进去的,我试过在父组件加,结果是无效的。

这是2.0的写法:

再往chartData中添加数据时:

<view class="charts-box">
			<qiun-data-charts type="pie" :chartData="chartData" 
				canvasId="canvasId" canvas2d reshow />
</view>
this.chartData.push({
	name:'名字1,
	data: 1,
	format: 'pieDay'
})

这个pieDay是哪来的呢?如下图:
在这里插入图片描述

在这个文件中,找到formatter对象
在这里插入图片描述
在里面再添加一个pieDay

"pieDay":function(val) {
	return val.data + '天'
}

这样按上面那条数据,显示出来就是1天了。

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值