低代码高性能原生UI框架

Appearance

本页导读

Area 面积图 ​

组件类型：UxChartComponentPublicInstance

平台兼容性 ​

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

示例代码 ​

html
<template>
	<ux-page :colors="['black']">
		<ux-navbar title="Area" :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="Area" :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: {
							time: {
								type: 'timeCat',
								tickCount: 3,
								range: [0, 1]
							},
							tem: {
								tickCount: 5,
								min: 0
							}
						}
					},
					geom: {
						area: [{
							position: 'time*tem',
						}],
						line: [{
							position: 'time*tem',
						}]
					},
					scale: [{
						field: 'time',
						conf: {
							range: [ 0, 1 ]
						}
					},
					{
						field: 'tem',
						conf: {
							tickCount: 5,
							min: 0
						}
					}],
					axis: [{
						field: 'time',
						conf: {
							label: `function(text, index, total) {
							  const textCfg = {};
							  if (index == 0) {
							    textCfg.textAlign = 'left';
							  } else if (index == total - 1) {
							    textCfg.textAlign = 'right';
							  }
							  return textCfg;
							}`
						}
					}],
					tooltip: {
						showCrosshairs: true
					}
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
		},
		methods: {
			getData() : UTSJSONObject[] {
				return [{
					time: 'Jan.',
					tem: 1000
				}, {
					time: 'Feb.',
					tem: 2200
				}, {
					time: 'Mar.',
					tem: 2000
				}, {
					time: 'Apr.',
					tem: 2600
				}, {
					time: 'May.',
					tem: 2000
				}, {
					time: 'Jun.',
					tem: 2600
				}, {
					time: 'Jul.',
					tem: 2800
				}, {
					time: 'Aug.',
					tem: 2000
				}] 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: {
							time: {
								type: 'timeCat',
								tickCount: 3,
								range: [0, 1]
							},
							tem: {
								tickCount: 5,
								min: 0
							}
						}
					},
					geom: {
						area: [{
							position: 'time*tem',
						}],
						line: [{
							position: 'time*tem',
						}]
					},
					scale: [{
						field: 'time',
						conf: {
							range: [ 0, 1 ]
						}
					},
					{
						field: 'tem',
						conf: {
							tickCount: 5,
							min: 0
						}
					}],
					axis: [{
						field: 'time',
						conf: {
							label: `function(text, index, total) {
							  const textCfg = {};
							  if (index == 0) {
							    textCfg.textAlign = 'left';
							  } else if (index == total - 1) {
							    textCfg.textAlign = 'right';
							  }
							  return textCfg;
							}`
						}
					}],
					tooltip: {
						showCrosshairs: true
					}
				} as UXChart
			}
		},
		onLoad(e : OnLoadOptions) {
			
		},
		methods: {
			getData() : UTSJSONObject[] {
				return [{
					time: 'Jan.',
					tem: 1000
				}, {
					time: 'Feb.',
					tem: 2200
				}, {
					time: 'Mar.',
					tem: 2000
				}, {
					time: 'Apr.',
					tem: 2600
				}, {
					time: 'May.',
					tem: 2000
				}, {
					time: 'Jun.',
					tem: 2600
				}, {
					time: 'Jul.',
					tem: 2800
				}, {
					time: 'Aug.',
					tem: 2000
				}] as UTSJSONObject[]
			},
		}
	}
</script>
css
<style lang="scss">

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

</style>

上次更新: