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

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

<script>
	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,
							axisLabel: {
								formatter: "{value}",
								color: "#e2e9ff",
							},
							axisLine: {
								lineStyle: {
									color: "lightgray",
									width: 1
								}
							},
							data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
						},


					],
					yAxis: [{
						type: 'value',
						splitLine: {
							lineStyle: {
								color: "rgba(255,255,255,0.12)",
							},
						},
						
						axisLabel: {
							formatter: "{value}",
							color: "#e2e9ff",
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: "lightgray",
								width: 1
							}
						},
						axisTick: {
							show: true
						}, //隐藏纵坐标刻度小线条
					}],
					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> -->
<template>
	<div id="mains" style="height: 200rem;width: 320rem;margin-top:20rem;margin-left: 30rem;"></div>
</template>
<script>
	export default {
		data() {
			return {

			}
		},
		mounted() {
			var chartDom = document.getElementById('mains');
			var myChart = this.$echarts.init(chartDom);

			let option = {
				color: ['#39e07f', '#1581ff', '#2ed0e7', '#ff9a9a', '#ffad31'],
				/* title: {
				   text: 'Gradient Stacked Area Chart'
				 }, */
				tooltip: {
					trigger: 'axis',
					backgroundColor: "rgba(255,255,255,0.6)",
					borderColor: "rgba(255,255,255,0.6)", //设置边框颜色
					textStyle: {
						color: "rgba(0,0,0,0.8)" //设置文字颜色
					},
					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,
						axisLabel: {
							formatter: "{value}",
							color: "#e2e9ff",
						},
						axisLine: {
							lineStyle: {
								color: "lightgray",
								width: 1
							}
						},
						data: ['1:00', '5:00', '9:00', '13:00', '17:00', '21:00', '24:00']
					},


				],
				yAxis: [{
					type: 'value',
					splitLine: {
						lineStyle: {
							color: "rgba(255,255,255,0.12)",
						},
					},


					axisLabel: {
						show:false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: "lightgray",
							width: 1
						}
					},
					axisTick: {
						show: true
					}, //隐藏纵坐标刻度小线条
				}],
				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, 600, 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: [220, 402, 231, 134, 190, 230, 120]
					},
					{
						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, 302, 181, 234, 210, 290, 150]
					},
					{
						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]
					}
				]

			}
			myChart.setOption(option);
		}
	}
</script>
<style scoped>
	.mains {
		width: 100%;
		height: 220rem;
		margin-top: 15rem;
	}
</style>