no message

src/views/test/components/SoilMoisture.vue

@@ -0,0 +1,221 @@
+<template>
+	<div style="display: inline-block;float:left ;height: 170rem;width: 160rem;">
+		<jt-echarts style="width: 100%;height: 100%;margin-top:25rem" :chartData="option"></jt-echarts>
+	</div>
+</template>
+
+<script>
+	 // import echarts from 'echarts' 这种方式高版本不支持
+	 import * as echarts from 'echarts'
+	 vue.prototype.$echarts = echarts
+
+	export default {
+		data() {
+			return {
+				option: {}
+			}
+		},
+		created() {},
+		mounted() {
+			this.typeCharts()
+		},
+		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: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+					  title: {
+					    text: 'Gradient Stacked Area Chart'
+					  },
+					  tooltip: {
+					    trigger: 'axis',
+					    axisPointer: {
+					      type: 'cross',
+					      label: {
+					        backgroundColor: '#6a7985'
+					      }
+					    }
+					  },
+					  legend: {
+					    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
+					  },
+					  toolbox: {
+					    feature: {
+					      saveAsImage: {}
+					    }
+					  },
+					  grid: {
+					    left: '3%',
+					    right: '4%',
+					    bottom: '3%',
+					    containLabel: true
+					  },
+					  xAxis: [
+					    {
+					      type: 'category',
+					      boundaryGap: false,
+					      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					    }
+					  ],
+					  yAxis: [
+					    {
+					      type: 'value'
+					    }
+					  ],
+					  series: [
+					    {
+					      name: 'Line 1',
+					      type: 'line',
+					      stack: 'Total',
+					      smooth: true,
+					      lineStyle: {
+					        width: 0
+					      },
+					      showSymbol: false,
+					      areaStyle: {
+					        opacity: 0.8,
+					        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: [140, 232, 101, 264, 90, 340, 250]
+					    },
+					    {
+					      name: 'Line 2',
+					      type: 'line',
+					      stack: 'Total',
+					      smooth: true,
+					      lineStyle: {
+					        width: 0
+					      },
+					      showSymbol: false,
+					      areaStyle: {
+					        opacity: 0.8,
+					        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, 282, 111, 234, 220, 340, 310]
+					    },
+					    {
+					      name: 'Line 3',
+					      type: 'line',
+					      stack: 'Total',
+					      smooth: true,
+					      lineStyle: {
+					        width: 0
+					      },
+					      showSymbol: false,
+					      areaStyle: {
+					        opacity: 0.8,
+					        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, 132, 201, 334, 190, 130, 220]
+					    },
+					    {
+					      name: 'Line 4',
+					      type: 'line',
+					      stack: 'Total',
+					      smooth: true,
+					      lineStyle: {
+					        width: 0
+					      },
+					      showSymbol: false,
+					      areaStyle: {
+					        opacity: 0.8,
+					        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					          {
+					            offset: 0,
+					            color: 'rgb(255, 0, 135)'
+					          },
+					          {
+					            offset: 1,
+					            color: 'rgb(135, 0, 157)'
+					          }
+					        ])
+					      },
+					      emphasis: {
+					        focus: 'series'
+					      },
+					      data: [220, 402, 231, 134, 190, 230, 120]
+					    },
+					    {
+					      name: 'Line 5',
+					      type: 'line',
+					      stack: 'Total',
+					      smooth: true,
+					      lineStyle: {
+					        width: 0
+					      },
+					      showSymbol: false,
+					      label: {
+					        show: true,
+					        position: 'top'
+					      },
+					      areaStyle: {
+					        opacity: 0.8,
+					        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					          {
+					            offset: 0,
+					            color: 'rgb(255, 191, 0)'
+					          },
+					          {
+					            offset: 1,
+					            color: 'rgb(224, 62, 76)'
+					          }
+					        ])
+					      },
+					      emphasis: {
+					        focus: 'series'
+					      },
+					      data: [220, 302, 181, 234, 210, 290, 150]
+					    }
+					  ]
+	
+				};
+				return option;
+			}
+	
+		},
+		}
+</script>
+
+<style>
+</style>

src/views/test/test.vue

@@ -1,4 +1,5 @@
 <script setup>
+	import SoilMoisture from "../test/components/SoilMoisture.vue"
 </script>
 
 <template>
@@ -22,8 +23,8 @@
 
 	</jt-popup3>
 	
-	<jt-popup3  title="" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
-		
+	<jt-popup3  title="土地墒情监测数据" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)">
+		<SoilMoisture></SoilMoisture>
 	</jt-popup3>
 </template>