|
@@ -0,0 +1,258 @@
|
|
|
|
+<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>
|