pingpu_H5/pages/worm/components/w-pie-charts.vue

<template>
	<!-- 虫害饼状图-->
	<view>
		<ui-charts ref="ringChart" type="ring" :opts="opts" :chartData="chartData"></ui-charts>
	</view>
</template>

<script>
	/**
	 * 虫害饼状图
	 * @example <w-ring-charts :chartData="chartData"></w-ring-charts>
	 * @description  统计图官方说明文档 https://www.ucharts.cn
	 */
	export default {
		name: 'w-ring-charts',
		data() {
			return {
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#43B693", "#317AFD", "#8543E0"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "收益率",
						fontSize: 14,
						color: "#4E5969"
					},
					subtitle: {
						name: "70%",
						fontSize: 16,
						color: "#4E5969"
					},
					extra: {
						ring: {
							ringWidth: 36,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}

			}
		},
		props: {
			chartData: {
				type: [Array, Object],
				default () {
					return []
				}
			},
			// 标题
			title: String,
			// 副标题
			subtitle: String,
			color:{
				type:[Array],
				default () {
					return  ["#43B693", "#317AFD", "#8543E0"]
				}
			}
		},
		watch: {
			chartData: {
				deep: true, // 深度监听
				handler(val) {
					this.ringChart.updataUChart();
					this.initData();
				}
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			// 初始化数据
			initData(){
				this.opts.title = this.title;
				this.opts.subtitle = this.subtitle;
				this.opts.color=this.color;
			}
		}
	};
</script>

<style lang="scss">
</style>