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

<template>
	<!-- 虫情数据 区域统计图 -->
	<view>
		<ui-charts ref="wLineCharts" type="area" :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 {

				opts: {
					loadingType: 0,
					color: ["#317afd","#45EAB7"],
					padding: [10, 0, 0, 5],
					legend: {
						position: 'top',
						float: 'left'
					},
					dataLabel: false,
					// dataPointShape: false,
					dataPointShapeType: 'hollow',
					xAxis: {
						disableGrid: true,
						          boundaryGap: "justify",
						fontColor: '#999',
						fontSize: 10,
						axisLineColor: '#F4F7F9'

					},
					yAxis: {
						gridColor: '#F4F7F9',
						gridType: "solid",
						dashLength: 2,
						data: [{
							axisLineColor: '#F4F7F9',
							fontColor: '#999',
							fontSize: 10,
						}]
					},
					extra: {
						area: {
							type: "curve",
							width: 3,
							gradient:true
						},
						tooltip: {
							showArrow: true,
							gridType: 'dash',
							labelBgColor: '#66ccff',
							gridColor: '#317afd'
						},
						markLine: {
							type: 'dash',
							dashLength: 5,
							data: [{
								lineColor: '#1A6EFE'
							}]
						}
					}
				},

			}
		},
		props: {
			/** 统计图数据 对象数据格式
			 	categories: [],// 类别
				series: [{
					name: "土壤温度（°C）",
					data: []
		      	}]
			 */
			chartData: {
				type: [Array, Object],
				default () {
					return []
				}
			},
		},
		watch: {
			chartData: {
				deep: true, // 深度监听
				handler(val) {
				  this.wLineCharts.updataUChart()
				}
			}
		},
		methods: {}
	};
</script>

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