pingpu_H5/pages/weather/components/w-line-charts.vue

<template>
	<!-- 气象历史数据 折线统计图 -->
	<view >
		<ui-charts ref="wLineCharts" type="line" :loadingType="0" :ontouch="true" :opts="opts" :chartData="chartData">
		</ui-charts>
	</view>
</template>

<script>
	/**
	 * 气象历史数据 折线统计图
	 * @example <w-line-charts :chartData="chartData"></w-line-charts>
	 * @description  统计图官方说明文档 https://www.ucharts.cn
	 */
	export default {
		name: 'w-line-charts',
		data() {
			return {
				loading: true,
				opts: {
					color: ["#317afd"],
					padding: [10, 10, 0, 15],
					enableScroll: true,
					legend: {
						position: 'top',
						float: 'left'
					},
					dataLabel: false,
					// dataPointShape: false,
					// dataPointShapeType: 'hollow',
					xAxis: {
						disableGrid: true,
						fontColor: '#999',
						fontSize: 10,
						axisLineColor: '#F4F7F9',
						scrollShow: true,
						itemCount: 5
					},
					yAxis: {
						gridColor: '#F4F7F9',
						gridType: "solid",
						dashLength: 2,
						data: [{
							axisLineColor: '#F4F7F9',
							fontColor: '#999',
							fontSize: 10,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 3
						},
						tooltip: {
							showArrow: true,
							gridType: 'dash',
							labelBgColor: '#66ccff',
							gridColor: '#317afd'
						},
						markLine: {
							type: 'dash',
							dashLength: 5,
							data: [{
								lineColor: '#1A6EFE'
							}]
						}
					}
				},
			}
		},
		props: {
			chartData: {
				type: [Array, Object],
				default () {
					return []
				}
			},
			width: {
				type: [Number],
				default: 0
			},
			height: {
				type: [Number],
				default: 0
			},
		},
		watch: {
			chartData: {
				deep: true, // 深度监听
				handler(val) {}
			}
		},
		async mounted() {
			if (!this.width) {
				return;
			}
			// console.log(11);
			// await null;
			// this.$refs['wLineCharts'].cWidth = this.width;
			// this.$refs['wLineCharts'].cHeight = this.height;

		},
		methods: {}
	};
</script>

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