hbj_app/components/BingImg/BingImg.vue

<template>
	<view class="charts-box"><qiun-data-charts type="pie" :opts="opts" :chartData="chartData" /></view>
</template>

<script>
export default {
	props: {
		dataArr: {
			type: Array
		}
	},
	//props数据传值组件给其异步加载，使用监听
	watch: {
		dataArr(newData) {
			this.dataArr = newData;
			//获取数据后再去渲染图表
			this.getServerData();
		}
	},
	data() {
		return {
			chartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [10, 5, 5, 5],
				enableScroll: false,
				extra: {
					pie: {
						activeOpacity: 0.5,
						activeRadius: 10,
						offsetAngle: 0,
						labelWidth: 15,
						border: true,
						borderWidth: 2,
						borderColor: '#FFFFFF'
					}
				}
			}
		};
	},
	mounted() {
		// this.getServerData();
	},
	methods: {
		getServerData() {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [
					{
						data: this.dataArr
						// data: [{ name: '待接收', value: 0 }, { name: '进行中', value: 0 }, { name: '已完成', value: 20 }, { name: '已逾期', value: 20 }]
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(res));
		}
	}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
	width: 100%;
	height: 100%;
}
</style>