AppleWatch 健身记录

组件类型：UxChartComponentPublicInstance

平台兼容性

Android uni-app-x	iOS uni-app-x	web	小程序
√	x	x	x

示例代码

htmltscss

html

<template>
	<ux-page :colors="['black']">
		<ux-navbar title="AppleWatch" :border="false"></ux-navbar>

		<ux-col>
			<view style="height: 400px;">
				<ux-chart ref="UxChart" :data="chart"></ux-chart>
			</view>
		</ux-col>
	</ux-page>
</template>

<template>
	<ux-page :colors="['black']">
		<ux-navbar title="AppleWatch" :border="false"></ux-navbar>

		<ux-col>
			<view style="height: 400px;">
				<ux-chart ref="UxChart" :data="chart"></ux-chart>
			</view>
		</ux-col>
	</ux-page>
</template>

<script>
	import { UXChart, UXChartGuideArc, UXChartGuideHtml } from "@/uni_modules/ux-frame/libs/types/chart.uts"

	export default {
		data() {
			return {
				data: [{
					name: 'activity1',
					percent: 2370,
					color: '#1ad5de',
					icon: 'stand.png',
					bgColor: '#183C3D'
				}, {
					name: 'activity2',
					percent: 80,
					color: '#a0ff03',
					icon: 'walk.png',
					bgColor: '#324214'
				}, {
					name: 'activity3',
					percent: 65,
					color: '#e90b3a',
					icon: 'run.png',
					bgColor: '#40131D'
				}] as UTSJSONObject[],
				timer: 0,
			}
		},
		computed: {
			chart() : UXChart {
				return {
					source: {
						data: this.data,
						conf: {
							percent: {
								max: 100
							},
						}
					},
					coord: {
						polar: true,
						transposed: true,
						innerRadius: 0.382,
						radius: 0.8
					},
					geom: {
						interval: [{
							position: 'name*percent',
							color: {
								field: 'color',
								callback: `function (val) {
									return val;
								}`
							},
							shape: {
								shape: 'tick'
							},
							size: {
								size: 18,
							},
							animate: {
								appear: {
									animation: 'waveIn',
									duration: 1500,
									easing: 'elasticOut'
								},
								update: {
									duration: 1500,
									easing: 'elasticOut'
								}
							}
						}]
					},
					guide: {
						arc: this.data.map((e: UTSJSONObject): UXChartGuideArc => {
							return {
								start: [e['name'] as string, '0'],
								end: [e['name'] as string, '99.98'],
								top: false,
								style: {
								  lineWidth: 18,
								  stroke: e['bgColor'] as string
								}
							} as UXChartGuideArc
						}),
						html: this.data.map((e: UTSJSONObject): UXChartGuideHtml => {
							return {
								position: [ e['name'] as string, '0' ],
								html: `<div style="width: 16px;height: 16px;">
								    <img
								      style="width: 16px;height: 16px;display: block;"
								      src="http://www.adeveloperdiary.com/wp-content/uploads/2015/11/${e['icon']}"
								    />
								  </div>`
							} as UXChartGuideHtml
						})
					},
					registerShape: [{
						type: 'interval',
						name: 'tick',
						draw: `function (cfg, container) {
							let points = this.parsePoints(cfg.points);
							let style = F2.Util.mix({
								stroke: cfg.color
							}, F2.Global.shape.interval, cfg.style);
							if (cfg.isInCircle) {
								let newPoints = points.slice(0);
								if (this._coord.transposed) {
									newPoints = [points[0], points[3], points[2], points[1]];
								}

								const x = cfg.center.x;
								const y = cfg.center.y;

								const v = [1, 0];
								const v0 = [newPoints[0].x - x, newPoints[0].y - y];
								const v1 = [newPoints[1].x - x, newPoints[1].y - y];
								const v2 = [newPoints[2].x - x, newPoints[2].y - y];

								let startAngle = F2.G.Vector2.angleTo(v, v1);
								let endAngle = F2.G.Vector2.angleTo(v, v2);
								const r0 = F2.G.Vector2.length(v0);
								const r = F2.G.Vector2.length(v1);

								if (startAngle >= 1.5 * Math.PI) {
									startAngle = startAngle - 2 * Math.PI;
								}

								if (endAngle >= 1.5 * Math.PI) {
									endAngle = endAngle - 2 * Math.PI;
								}

								const lineWidth = r - r0;
								const newRadius = r - lineWidth / 2;

								return container.addShape('Arc', {
									className: 'interval',
									attrs: F2.Util.mix({
										x,
										y,
										startAngle,
										endAngle,
										r: newRadius,
										lineWidth,
										lineCap: 'round',
										shadowColor: 'rgba(0, 0, 0, 0.6)',
										shadowOffsetX: 0,
										shadowOffsetY: -5,
										shadowBlur: 50
									}, style)
								});
							}
						}`
					}],
					registerAnimation: [{
						name: 'waveIn',
						callback: `function (shape, animateCfg) {
							const startAngle = shape.attr('startAngle');
							const endAngle = shape.attr('endAngle');
							shape.attr('endAngle', startAngle);
							shape.animate().to(F2.Util.mix({
								attrs: {
									endAngle
								}
							}, animateCfg));
						}`
					}]
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
			let updateData = ():void => {}
			updateData = () => {
			  for (let i = 0; i < this.data.length; ++i) {
			    this.data[i]['percent'] = Math.floor(Math.random() * 60 + 20);
			  }
			  
			  if(this.$refs['UxChart'] == null) {
				  return
			  }
			  
			  (this.$refs['UxChart'] as UxChartComponentPublicInstance).change(this.data)
			  
			  this.timer = setTimeout(updateData, 1500);
			};
			
			this.timer = setTimeout(updateData, 1500);
		},
		onUnload() {
			clearTimeout(this.timer)
		},
		methods: {
			
		}
	}
</script>

<script>
	import { UXChart, UXChartGuideArc, UXChartGuideHtml } from "@/uni_modules/ux-frame/libs/types/chart.uts"

	export default {
		data() {
			return {
				data: [{
					name: 'activity1',
					percent: 2370,
					color: '#1ad5de',
					icon: 'stand.png',
					bgColor: '#183C3D'
				}, {
					name: 'activity2',
					percent: 80,
					color: '#a0ff03',
					icon: 'walk.png',
					bgColor: '#324214'
				}, {
					name: 'activity3',
					percent: 65,
					color: '#e90b3a',
					icon: 'run.png',
					bgColor: '#40131D'
				}] as UTSJSONObject[],
				timer: 0,
			}
		},
		computed: {
			chart() : UXChart {
				return {
					source: {
						data: this.data,
						conf: {
							percent: {
								max: 100
							},
						}
					},
					coord: {
						polar: true,
						transposed: true,
						innerRadius: 0.382,
						radius: 0.8
					},
					geom: {
						interval: [{
							position: 'name*percent',
							color: {
								field: 'color',
								callback: `function (val) {
									return val;
								}`
							},
							shape: {
								shape: 'tick'
							},
							size: {
								size: 18,
							},
							animate: {
								appear: {
									animation: 'waveIn',
									duration: 1500,
									easing: 'elasticOut'
								},
								update: {
									duration: 1500,
									easing: 'elasticOut'
								}
							}
						}]
					},
					guide: {
						arc: this.data.map((e: UTSJSONObject): UXChartGuideArc => {
							return {
								start: [e['name'] as string, '0'],
								end: [e['name'] as string, '99.98'],
								top: false,
								style: {
								  lineWidth: 18,
								  stroke: e['bgColor'] as string
								}
							} as UXChartGuideArc
						}),
						html: this.data.map((e: UTSJSONObject): UXChartGuideHtml => {
							return {
								position: [ e['name'] as string, '0' ],
								html: `<div style="width: 16px;height: 16px;">
								    <img
								      style="width: 16px;height: 16px;display: block;"
								      src="http://www.adeveloperdiary.com/wp-content/uploads/2015/11/${e['icon']}"
								    />
								  </div>`
							} as UXChartGuideHtml
						})
					},
					registerShape: [{
						type: 'interval',
						name: 'tick',
						draw: `function (cfg, container) {
							let points = this.parsePoints(cfg.points);
							let style = F2.Util.mix({
								stroke: cfg.color
							}, F2.Global.shape.interval, cfg.style);
							if (cfg.isInCircle) {
								let newPoints = points.slice(0);
								if (this._coord.transposed) {
									newPoints = [points[0], points[3], points[2], points[1]];
								}

								const x = cfg.center.x;
								const y = cfg.center.y;

								const v = [1, 0];
								const v0 = [newPoints[0].x - x, newPoints[0].y - y];
								const v1 = [newPoints[1].x - x, newPoints[1].y - y];
								const v2 = [newPoints[2].x - x, newPoints[2].y - y];

								let startAngle = F2.G.Vector2.angleTo(v, v1);
								let endAngle = F2.G.Vector2.angleTo(v, v2);
								const r0 = F2.G.Vector2.length(v0);
								const r = F2.G.Vector2.length(v1);

								if (startAngle >= 1.5 * Math.PI) {
									startAngle = startAngle - 2 * Math.PI;
								}

								if (endAngle >= 1.5 * Math.PI) {
									endAngle = endAngle - 2 * Math.PI;
								}

								const lineWidth = r - r0;
								const newRadius = r - lineWidth / 2;

								return container.addShape('Arc', {
									className: 'interval',
									attrs: F2.Util.mix({
										x,
										y,
										startAngle,
										endAngle,
										r: newRadius,
										lineWidth,
										lineCap: 'round',
										shadowColor: 'rgba(0, 0, 0, 0.6)',
										shadowOffsetX: 0,
										shadowOffsetY: -5,
										shadowBlur: 50
									}, style)
								});
							}
						}`
					}],
					registerAnimation: [{
						name: 'waveIn',
						callback: `function (shape, animateCfg) {
							const startAngle = shape.attr('startAngle');
							const endAngle = shape.attr('endAngle');
							shape.attr('endAngle', startAngle);
							shape.animate().to(F2.Util.mix({
								attrs: {
									endAngle
								}
							}, animateCfg));
						}`
					}]
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
			let updateData = ():void => {}
			updateData = () => {
			  for (let i = 0; i < this.data.length; ++i) {
			    this.data[i]['percent'] = Math.floor(Math.random() * 60 + 20);
			  }
			  
			  if(this.$refs['UxChart'] == null) {
				  return
			  }
			  
			  (this.$refs['UxChart'] as UxChartComponentPublicInstance).change(this.data)
			  
			  this.timer = setTimeout(updateData, 1500);
			};
			
			this.timer = setTimeout(updateData, 1500);
		},
		onUnload() {
			clearTimeout(this.timer)
		},
		methods: {
			
		}
	}
</script>

css

<style lang="scss">

</style>

<style lang="scss">

</style>

AppleWatch 健身记录 ​

平台兼容性 ​

示例代码 ​

AppleWatch 健身记录

平台兼容性

示例代码