|
|
@@ -1,5 +1,5 @@
|
|
|
-<template>
|
|
|
- <div style="display: inline-block;float:right ;height: 190rem;width: 350rem;">
|
|
|
+<!-- <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>
|
|
|
@@ -58,7 +58,7 @@
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ['土壤温度（℃）', '土壤湿度（%RH）', '土壤PH', '土壤水势（kpa）', '电导率（us/cm）'],
|
|
|
+ data: ['土壤温度(℃)', '土壤湿度(%RH)', '土壤PH', '土壤水势(kpa)', '电导率(us/cm)'],
|
|
|
// 图例
|
|
|
textStyle: {
|
|
|
color: 'rgb(200,255,255)' //字体颜色
|
|
|
@@ -116,7 +116,7 @@
|
|
|
}, //隐藏纵坐标刻度小线条
|
|
|
}],
|
|
|
series: [{
|
|
|
- name: '土壤温度（℃）',
|
|
|
+ name: '土壤温度(℃)',
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
@@ -146,7 +146,7 @@
|
|
|
data: [200, 2000, 219, 264, 500, 340, 250]
|
|
|
},
|
|
|
{
|
|
|
- name: '土壤湿度（%RH）',
|
|
|
+ name: '土壤湿度(%RH)',
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
@@ -176,7 +176,7 @@
|
|
|
data: [120, 400, 350, 500, 220, 340, 310]
|
|
|
},
|
|
|
{
|
|
|
- name: '土壤水势（kpa）',
|
|
|
+ name: '土壤水势(kpa)',
|
|
|
type: 'line',
|
|
|
|
|
|
smooth: true,
|
|
|
@@ -236,7 +236,7 @@
|
|
|
data: [220, 402, 231, 134, 190, 230, 120]
|
|
|
},
|
|
|
{
|
|
|
- name: '电导率（us/cm）',
|
|
|
+ name: '电导率(us/cm)',
|
|
|
type: 'line',
|
|
|
|
|
|
lable: {
|
|
|
@@ -282,4 +282,263 @@
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-</style>
|
|
|
+</style> -->
|
|
|
+ <template>
|
|
|
+ <div id="mains" style="display: inline-block;height: 200rem;width: 320rem;margin-top:20rem"></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: {
|
|
|
+ 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, 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: 100rem;
|
|
|
+ height: 220rem;
|
|
|
+ margin-top: 15rem;
|
|
|
+ }
|
|
|
+ </style>
|
Administrator