JT-CIM-ZHNY/src/views/test/components/SoilMoisture.vue

<template>
	<div style="display: inline-block;float:left ;height: 190rem;width: 350rem;">
		<jt-echarts style="width: 100%;height: 100%;margin-top:20rem" :chartData="option"></jt-echarts>
	</div>
</template>

<script>
	// import echarts from 'echarts' 这种方式高版本不支持
	import * as echarts from 'echarts'

	export default {
		data() {
			return {
				option: {}
			}
		},
		created() {},
		mounted() {
			this.typeCharts()
			let _this = this
			var t1=setTimeout(function() {
				_this.option.series = [{
						data:  [200, 600, 219, 264, 500, 340, 250]
					},
					{
						data: [320, 400, 201, 334, 190, 350, 220]
					},
					{
						data: [120, 400, 350, 500, 220, 340, 310]
					},
					{
						data: [220, 402, 231, 134, 190, 230, 120]
					},
					{
						data: [220, 302, 181, 234, 210, 290, 150]
					},
				]
					
			}, 1000);
		},
		methods: {
			typeCharts() {
				this.option = this.getOption();
				// var chartDom = document.getElementById('echarts');
				// var myChart = echarts.init(chartDom);
				// myChart.setOption(option, true);
			},
			getOption(data) {
				let option = {
					color: ['#39e07f', '#1581ff', '#2ed0e7', '#ff9a9a', '#ffad31'],
					/* title: {
					   text: 'Gradient Stacked Area Chart'
					 }, */
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						data: ['土壤温度（℃）', '土壤湿度（%RH）', '土壤PH', '土壤水势（kpa）', '电导率（us/cm）'],
						// 图例
						textStyle: {
							color: 'rgb(200,255,255)' //字体颜色
						},
						padding: 0,
					},
					toolbox: {

					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
							type: 'category',
							boundaryGap: false,
							data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
						},


					],
					yAxis: [{
						type: 'value'
					}],
					series: [{
							name: '土壤温度（℃）',
							type: 'line',
							
							smooth: true,
							lineStyle: {
								width: 2
							},
							lable: {
								show: true,
								position: 'top'
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.4,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(128, 255, 165)'
									},
									{
										offset: 1,
										color: 'rgb(1, 191, 236)'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: [200, 2000, 219, 264, 500, 340, 250]
						},
						{
							name: '土壤湿度（%RH）',
							type: 'line',
							
							smooth: true,
							lineStyle: {
								width: 2
							},
							lable: {
								show: true,
								position: 'top'
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.4,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(0, 221, 255)'
									},
									{
										offset: 1,
										color: 'rgb(77, 119, 255)'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: [120, 400, 350, 500, 220, 340, 310]
						},
						{
							name: '土壤水势（kpa）',
							type: 'line',
							
							smooth: true,
							lable: {
								show: true,
								position: 'top'
							},
							lineStyle: {
								width: 2
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.4,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(55, 162, 255)'
									},
									{
										offset: 1,
										color: 'rgb(116, 21, 219)'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: [320, 400, 201, 334, 190, 350, 220]
						},
						{
							name: '土壤PH',
							type: 'line',
							
							smooth: true,
							lable: {
								show: true,
								position: 'top'
							},
							lineStyle: {
								width: 2
							},
							showSymbol: false,
							areaStyle: {
								opacity: 0.4,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#ff9a9a'
									},
									{
										offset: 1,
										color: '#ff9a9a'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: [220, 402, 231, 134, 190, 230, 120]
						},
						{
							name: '电导率（us/cm）',
							type: 'line',
							
							lable: {
								show: true,
								position: 'top'
							},
							smooth: true,
							lineStyle: {
								width: 2
							},
							showSymbol: false,
							label: {
								show: true,
								position: 'top'
							},
							areaStyle: {
								opacity: 0.4,
								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgb(255, 191, 0)'
									},
									{
										offset: 1,
										color: 'rgb(255, 191, 0)'
									}
								])
							},
							emphasis: {
								focus: 'series'
							},
							data: [220, 302, 181, 234, 210, 290, 150]
						}
					]

				};
				return option;
			}

		},
		
			
	}
</script>

<style>
</style>