低代码高性能原生UI框架

Appearance

本页导读

Radar 雷达图 ​

组件类型：UxChartComponentPublicInstance

平台兼容性 ​

Android uni-app-xiOS uni-app-xweb小程序
√xxx

示例代码 ​

html
<template>
	<ux-page :colors="['black']">
		<ux-navbar title="Radar" :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="Radar" :border="false"></ux-navbar>

		<ux-col>
			<view style="height: 400px;">
				<ux-chart ref="UxChart" :data="chart"></ux-chart>
			</view>
		</ux-col>
	</ux-page>
</template>
ts
<script>
	import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"

	export default {
		data() {
			return {
				
			}
		},
		computed: {
			chart() : UXChart {
				return {
					source: {
						data: this.getData(),
						conf: {
							score: {
								min: 0,
								max: 120,
								nice: false,
								tickCount: 4
							}
						}
					},
					geom: {
						line: [{
							position: 'item*score',
							color: {
								field: 'user',
							},
						}],
						point: [{
							position: 'item*score',
							color: {
								field: 'user',
							},
							style: {
								stroke: '#fff',
								lineWidth: 1
							},
						}],
					},
					coord: {
						polar: true,
						radius: 0.95,
					},
					tooltip: {
						custom: true,
						onChange: `function(obj) {
						    const legend = chart.get('legendController').legends.top[0];
						    const tooltipItems = obj.items;
						    const legendItems = legend.items;
						    const map = {};
						    legendItems.forEach(function(item) {
						      map[item.name] = _.clone(item);
						    });
						    tooltipItems.forEach(function(item) {
						      const name = item.name;
						      const value = item.value;
						      if (map[name]) {
						        map[name].value = value;
						      }
						    });
						    legend.setItems(_.values(map));
						  }`,
						onHide: `function() {
						    const legend = chart.get('legendController').legends.top[0];
						    legend.setItems(chart.getLegendItems().country);
						  }`
					},
					axis: [{
						field: 'score',
						conf: {
							label: `function(text, index, total) {
								if (index == total - 1) {
									return null;
								}
								return {
									top: true
								};
							}`,
							grid: {
								type: 'arc' // 弧线网格
							},
						}
					}, {
						field: 'item',
						conf: {
							grid: {
							  lineDash: null
							}
						}
					}]
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
		},
		methods: {
			getData() : UTSJSONObject[] {
				return [{
					item: 'Design',
					user: '用户 A',
					score: 70
				}, {
					item: 'Design',
					user: '用户 B',
					score: 30
				}, {
					item: 'Development',
					user: '用户 A',
					score: 60
				}, {
					item: 'Development',
					user: '用户 B',
					score: 70
				}, {
					item: 'Marketing',
					user: '用户 A',
					score: 50
				}, {
					item: 'Marketing',
					user: '用户 B',
					score: 60
				}, {
					item: 'Users',
					user: '用户 A',
					score: 40
				}, {
					item: 'Users',
					user: '用户 B',
					score: 50
				}, {
					item: 'Test',
					user: '用户 A',
					score: 60
				}, {
					item: 'Test',
					user: '用户 B',
					score: 70
				}, {
					item: 'Language',
					user: '用户 A',
					score: 70
				}, {
					item: 'Language',
					user: '用户 B',
					score: 50
				}, {
					item: 'Technology',
					user: '用户 A',
					score: 70
				}, {
					item: 'Technology',
					user: '用户 B',
					score: 40
				}, {
					item: 'Support',
					user: '用户 A',
					score: 60
				}, {
					item: 'Support',
					user: '用户 B',
					score: 40
				}] as UTSJSONObject[]
			},
		}
	}
</script>
<script>
	import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"

	export default {
		data() {
			return {
				
			}
		},
		computed: {
			chart() : UXChart {
				return {
					source: {
						data: this.getData(),
						conf: {
							score: {
								min: 0,
								max: 120,
								nice: false,
								tickCount: 4
							}
						}
					},
					geom: {
						line: [{
							position: 'item*score',
							color: {
								field: 'user',
							},
						}],
						point: [{
							position: 'item*score',
							color: {
								field: 'user',
							},
							style: {
								stroke: '#fff',
								lineWidth: 1
							},
						}],
					},
					coord: {
						polar: true,
						radius: 0.95,
					},
					tooltip: {
						custom: true,
						onChange: `function(obj) {
						    const legend = chart.get('legendController').legends.top[0];
						    const tooltipItems = obj.items;
						    const legendItems = legend.items;
						    const map = {};
						    legendItems.forEach(function(item) {
						      map[item.name] = _.clone(item);
						    });
						    tooltipItems.forEach(function(item) {
						      const name = item.name;
						      const value = item.value;
						      if (map[name]) {
						        map[name].value = value;
						      }
						    });
						    legend.setItems(_.values(map));
						  }`,
						onHide: `function() {
						    const legend = chart.get('legendController').legends.top[0];
						    legend.setItems(chart.getLegendItems().country);
						  }`
					},
					axis: [{
						field: 'score',
						conf: {
							label: `function(text, index, total) {
								if (index == total - 1) {
									return null;
								}
								return {
									top: true
								};
							}`,
							grid: {
								type: 'arc' // 弧线网格
							},
						}
					}, {
						field: 'item',
						conf: {
							grid: {
							  lineDash: null
							}
						}
					}]
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
		},
		methods: {
			getData() : UTSJSONObject[] {
				return [{
					item: 'Design',
					user: '用户 A',
					score: 70
				}, {
					item: 'Design',
					user: '用户 B',
					score: 30
				}, {
					item: 'Development',
					user: '用户 A',
					score: 60
				}, {
					item: 'Development',
					user: '用户 B',
					score: 70
				}, {
					item: 'Marketing',
					user: '用户 A',
					score: 50
				}, {
					item: 'Marketing',
					user: '用户 B',
					score: 60
				}, {
					item: 'Users',
					user: '用户 A',
					score: 40
				}, {
					item: 'Users',
					user: '用户 B',
					score: 50
				}, {
					item: 'Test',
					user: '用户 A',
					score: 60
				}, {
					item: 'Test',
					user: '用户 B',
					score: 70
				}, {
					item: 'Language',
					user: '用户 A',
					score: 70
				}, {
					item: 'Language',
					user: '用户 B',
					score: 50
				}, {
					item: 'Technology',
					user: '用户 A',
					score: 70
				}, {
					item: 'Technology',
					user: '用户 B',
					score: 40
				}, {
					item: 'Support',
					user: '用户 A',
					score: 60
				}, {
					item: 'Support',
					user: '用户 B',
					score: 40
				}] as UTSJSONObject[]
			},
		}
	}
</script>
css
<style lang="scss">

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

</style>

上次更新: