农业增加统计种植数据、养殖数据、病虫害、粪污处理统计分析

src/api/bigdata/bigdata.js

@@ -22,16 +22,18 @@ export function landInfoBigData() {
   })
 }
 // 统计事件类型种类；统计每个种类占当前部门查看权限所有事件的百分比；事件总数；未处理；处理中--两个饼图三个数据信息
-export function eventcatalogueBigData() {
+export function eventcatalogueBigData(param) {
   return request({
     url: '/center-agriculture/data/eventcatalogueBigData',
     method: 'get',
+    param:param
   })
 }
-export function deptBigData() {
+export function deptBigData(param) {
   return request({
     url: '/center-agriculture/data/deptBigData',
     method: 'get',
+    param:param
   })
 }
 // 站点统计（五角分布图雷达图）按照当前登录人数据权限数据查询农业合作社个数、农机站个数、畜保站个数、植保站个数、养殖、粪污处理个数（不用按照部门分组）
@@ -111,3 +113,18 @@ export function getRlt(param) {
     data : param
   })
 }
+
+//大数据-种植数据分析
+export function plantDataAnalysis() {
+  return request({
+    url: '/center-agriculture/data/plantDataAnalysis',
+    method: 'get',
+  })
+}
+//大数据-养殖数据分析
+export function breedDataAnalysis() {
+  return request({
+    url: '/center-agriculture/data/breedDataAnalysis',
+    method: 'get',
+  })
+}

src/views/bigdata/bigdata.vue

@@ -104,7 +104,7 @@
           <chartFireControl ref="chartFireControl"></chartFireControl>
         </div>
       </div>
-      <!-- 第八纵向-->
+      <!-- 第五纵向-->
       <div class="bigdata-list wid-li-1 m-l-15">
         <div class="b-con mg-b-20 tall">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -119,8 +119,40 @@
           <chartWaterIntake ref="chartWaterIntake"></chartWaterIntake>
         </div>
       </div>
+      <!-- 第六纵向-->
+      <div class="bigdata-list wid-li-3 m-l-15 flex-r">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>种植数据分析</span><!--大数据-种植数据分析--柱状图-->
+          </div>
+          <chartPlant ref="chartPlant"></chartPlant>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>养殖数据分析</span><!--养殖数据分析--柱状图-->
+          </div>
+          <div class="twins">
+            <div class="count">
+              <div class="count-z m-l-15">养殖场<span>{{ breedFarm }}</span></div>
+              <div class="count-z m-l-15">养殖户<span> {{ breedFarmer }}</span></div>
+            </div>
+            <chartBreed ref="chartBreed"></chartBreed>
+          </div>
+        </div>
+        <div class="b-con b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>农业病虫害分析</span><!--按照部门农业病虫害分析--柱状图-->
+          </div>
+          <chartFireControlTwo ref="chartFireControlTwo"></chartFireControlTwo>
+        </div>
+        <div class="b-con b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>粪污处理分析</span><!--按照部门粪污处理分析--饼图-->
+          </div>
+          <chartCollectionTwo ref="chartCollectionTwo"></chartCollectionTwo>
+        </div>
+      </div>
     </div>
-
   </div>
 </template>
 
@@ -147,6 +179,10 @@ import chartWaterIntake from './chart-waterintake' //15 取水口
 import chartCamera from './chart-camera' //16 摄像头
 import chartDetector from './chart-detector' //17 探测器
 import chartFireControl from './chart-firecontrol' //18 消防力量
+import chartPlant from './chart-plant' //19 种植
+import chartBreed from './chart-breed' //20 养殖
+import chartFireControlTwo from './chart-firecontrolTwo' //21 病虫害分布
+import chartCollectionTwo from './chart-collectionTwo' //22 粪污处理分布
 
 import bigdataSupermap from '@/components/supermap' //超图
 
@@ -156,6 +192,7 @@ import {
   , leidaBigData, protectInfoBigData, xubaoBigData
   , zhongZiBigData, huaFeiBigData, YangZhiBigData
   , getHuanTianDept, getHuanTianType, getLItianDept
+  , plantDataAnalysis, breedDataAnalysis
 } from '@/api/bigdata/bigdata'
 import { fontConfig } from '@/api/login'
 
@@ -181,7 +218,11 @@ export default {
     chartCamera,
     chartDetector,
     chartFireControl,
-    bigdataSupermap
+    bigdataSupermap,
+    chartPlant,
+    chartBreed,
+    chartFireControlTwo,
+    chartCollectionTwo
   },
   created() {
     this.fontConfig()
@@ -199,6 +240,10 @@ export default {
     this.getHuanTianDept()
     this.getHuanTianType()
     this.getLItianDept()
+    this.plantDataAnalysis()
+    this.breedDataAnalysis()
+    this.findEventGroupByDept()
+    this.findPerByEventXl()
   },
   mounted() {
     // setTimeout(() => {
@@ -233,7 +278,10 @@ export default {
       total: 0, //事件总数
       file: 0,// 事件-归档
       signIn: 0,// 事件-签收
-      conclude: 0// 事件-办结
+      conclude: 0,// 事件-办结
+
+      breedFarm:0,
+      breedFarmer:0,
 
       /** ------------------------------------图标参数开始 -----------------------------*/
       /** ------------------------------------图标参数结束 -----------------------------*/
@@ -271,7 +319,7 @@ export default {
 
     /**事件类型、分布统计*/
     eventcatalogueBigData() {
-      eventcatalogueBigData().then(res => {
+      eventcatalogueBigData({eventTypeId:['7','8']}).then(res => {
         this.total = res.data.total
         for (let index in res.data.list) {
           if (res.data.list[index].dictValue == 'forest_event_status_2') {
@@ -284,7 +332,7 @@ export default {
         }
         this.$refs.chartEvent.myEcharts(res.data.list)
       })
-      deptBigData().then(res => {
+      deptBigData({eventTypeId:['7','8']}).then(res => {
         this.$refs.chartEvent.myEcharts2(res.data)
       })
     },
@@ -379,6 +427,44 @@ export default {
       getLItianDept().then(res => {
         this.$refs.chartWaterIntake.myEcharts(res.data)
       })
+    },
+    plantDataAnalysis() {
+      plantDataAnalysis().then(res => {
+        for (let i in res.data.series) {
+          if(res.data.series[i].type == 'line'){
+            res.data.series[i].yAxisIndex = 1;
+          }
+        }
+        this.$refs.chartPlant.myEcharts(res.data.variety,res.data.series);
+      })
+    },
+    breedDataAnalysis() {
+      breedDataAnalysis().then(res => {
+        this.breedFarm = res.data.breedFarm;
+        this.breedFarmer = res.data.breedFarmer;
+        for (let i in res.data.series) {
+          if(res.data.series[i].type == 'line'){
+            res.data.series[i].yAxisIndex = 1;
+          }
+        }
+        this.$refs.chartBreed.myEcharts(res.data.variety,res.data.series);
+      })
+    },
+    findEventGroupByDept(){
+      eventcatalogueBigData({eventTypeId:['7']}).then(res => {
+        this.$refs.chartCollectionTwo.myEcharts(res.data.list)
+      })
+    },
+    findPerByEventXl(){
+      deptBigData({eventTypeId:['8']}).then(res => {
+        const xData = []
+        const seriesData = []
+        for (let index in res.data) {
+          xData.push(res.data[index].name)
+          seriesData.push(res.data[index].value)
+        }
+        this.$refs.chartFireControlTwo.myEcharts(xData,seriesData)
+      })
     }
   }
 
@@ -386,228 +472,252 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
-
+  @import '@/assets/styles/base.scss';
 
-.bigdata-con {
-  width: -webkit-fit-content;
-  height: 100%;
-  background: #01020c;
 
-  .el-loading-mask {
-    background: none;
-  }
-
-  .header {
-    height: 3rem;
+  .bigdata-con {
+    width: fit-content;
+    height: 100%;
+    background: #01020c;
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    overflow-y: hidden;
 
-    .header-left {
-      position: fixed;
-      left: 10px;
-      top: 5px;
-      display: flex;
-      align-items: center;
-      color: $inBlue;
-      font-family: $fontFk;
-
-      .title {
-        margin: 0 auto;
-        text-align: center;
-        background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: #fff;
-        font-size: 28px;
-      }
+    .el-loading-mask {
+      background: none;
     }
 
-    .bignav {
-      height: 40px;
-      position: fixed;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 0;
-      z-index: 1000;
-      border-radius: 5px;
+    .header {
+      height: 3rem;
       display: flex;
-      justify-content: cetner;
       align-items: center;
 
-      .bignav-list {
-        background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
-        float: left;
+      .header-left {
+        position: fixed;
+        left: 10px;
+        top: 5px;
         display: flex;
-        justify-content: cetner;
         align-items: center;
-        color: #fff;
-        height: 40px;
-        font-size: 12px;
-        padding: 0 23px;
-        cursor: pointer;
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-        transition: all 0.3s ease-in-out;
+        color: $inBlue;
+        font-family: $fontFk;
+
+        .title {
+          margin: 0 auto;
+          text-align: center;
+          background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: #fff;
+          font-size: 20px;
+        }
       }
 
-      .router-link-active,
-      .bignav-list:hover {
-        filter: brightness(2.3);
-        -webkit-transform: translateY(2px);
-        transform: translateY(2px);
-        color: $inBlueHover;
-        border-bottom: 1px solid $inBlueHover;
-        transition: all 0.3s ease-in-out;
+      .bignav {
+        height: 40px;
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+        z-index: 1000;
+        border-radius: 5px;
+        display: flex;
+        justify-content: cetner;
+        align-items: center;
 
-      }
-    }
+        .bignav-list {
+          background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
+          float: left;
+          display: flex;
+          justify-content: cetner;
+          align-items: center;
+          color: #fff;
+          height: 40px;
+          font-size: 12px;
+          padding: 0 23px;
+          cursor: pointer;
+          -webkit-transform: translateY(0);
+          transform: translateY(0);
+          transition: all 0.3s ease-in-out;
+        }
 
+        .router-link-active,
+        .bignav-list:hover {
+          filter: brightness(2.3);
+          -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+          color: $inBlueHover;
+          border-bottom: 1px solid $inBlueHover;
+          transition: all 0.3s ease-in-out;
 
-  }
+        }
+      }
 
-  .bigdata-body {
-    margin: 15px;
-    display: flex;
-    align-items: top;
-    // justify-content: center;
 
-  }
+    }
 
-  .bigdata-list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+    .bigdata-body {
+      // margin: 15px;
+      display: flex;
+      align-items: top;
+      // justify-content: center;
 
-    .twins-con {
-      width: 100% !important;
     }
 
-    .b-con {
-      width: 100%;
-      height: 28.5vh;
+    .flex-r {
+      display: flex;
+      flex-direction: row !important;
+      align-content: flex-start;
+      justify-content: space-between
+    }
 
-      box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-      -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+    .bigdata-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
 
-      // display: flex;
-      // flex-direction: column;
-      .b-tit {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        padding: 10px;
-
-        span {
-          font-size: 15px;
-          color: #00ceec;
-          margin-left: 5px;
-          text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
-          -0 -0 10px rgba($color: #41fff8, $alpha: .9);
-        }
+      .twins-con {
+        width: 100% !important;
+      }
+
+      .b-49 {
+        width: 49% !important;
       }
 
-      .twins {
+      .b-con {
         width: 100%;
-        display: flex;
-        position: relative;
+        height: 28.5vh;
+
+        box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+        -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
 
-        .count {
+        // display: flex;
+        // flex-direction: column;
+        .b-tit {
           width: 100%;
-          color: #fff;
-          font-size: 12px;
-          position: absolute;
           display: flex;
           align-items: center;
-          left: 1rem;
-          top: 9px;
-          z-index: 100;
+          padding: 10px;
+
+          span {
+            font-size: 15px;
+            color: #00ceec;
+            margin-left: 5px;
+            text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
+            -0 -0 10px rgba($color: #41fff8, $alpha: .9);
+          }
+        }
 
-          .count-z {
-            display: flex;
-            margin: 0 .5rem;
+        .twins {
+          width: 100%;
+          display: flex;
+          position: relative;
 
-            span {
-              margin-left: .4rem;
-              font-size: 1rem;
-              color: #2ee0fb !important;
-              font-weight: bolder;
+          .count {
+            width: 100%;
+            color: #fff;
+            font-size: 12px;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            left: 1rem;
+            top: 9px;
+            z-index: 100;
+
+            .count-z {
+              display: flex;
+              margin: 0 .5rem;
+
+              span {
+                margin-left: .4rem;
+                font-size: 1rem;
+                color: #2ee0fb !important;
+                font-weight: bolder;
+              }
             }
-          }
 
 
+          }
         }
+
       }
 
-    }
+      .tall {
+        height: 59vh !important;
+      }
 
-    .tall {
-      height: 59vh !important;
-    }
+      .taller {
+        height: 89.5vh !important;
+      }
 
-    .taller {
-      height: 89.5vh !important;
-    }
+      .three {
+        display: flex;
+        flex-direction: column;
+      }
 
-    .three {
-      display: flex;
-      flex-direction: column;
-    }
+      .el-row {
+        width: 100%;
+      }
 
-    .el-row {
-      width: 100%;
-    }
 
+      .bigdata-map {
+        width: 100%;
+        height: 59vh;
+        position: relative;
+        background: #00101f;
 
-    .bigdata-map {
-      width: 100%;
-      height: 59vh;
-      position: relative;
-      background: #00101f;
-
-      .event-count {
-        color: #fff;
-        font-size: 14px;
-        font-weight: bolder;
-        padding: 10px;
-        background-color: #000000;
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        z-index: 1000;
+        .event-count {
+          color: #fff;
+          font-size: 14px;
+          font-weight: bolder;
+          padding: 10px;
+          background-color: #000000;
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          z-index: 1000;
 
-        span {
-          font-size: 16px;
-          color: #d50000;
+          span {
+            font-size: 16px;
+            color: #d50000;
+          }
         }
+
       }
 
     }
 
-  }
+    .wid-li-1 {
+      width: 396px;
+    }
 
-  .wid-li-1 {
-    width: 396px;
-  }
+    .wid-li-2 {
+      width: 760px;
+    }
 
-  .wid-li-2 {
-    width: 760px;
-  }
+    .wid-li-3 {
+      width: 850px;
+    }
 
-  .wid-li-3 {
-    width: 850px;
-  }
+    .wid-li-4 {
+      width: 304px;
+    }
 
-  .wid-li-4 {
-    width: 304px;
-  }
+    .mg-b-20 {
+      margin-bottom: 2vh;
+    }
 
-  .mg-b-20 {
-    margin-bottom: 2vh;
-  }
+    .m-l-15 {
+      margin-left: .5%;
+    }
+    .m-r-15 {
+      margin-right: .5%;
+    }
 
-  .m-l-15 {
-    margin-left: .5%;
+    .scrollHeight {
+      width: 100%;
+      height: 100%;
+      // height: 800px;
+      // height: calc(100% - 20px)
+    }
   }
-}
 </style>

src/views/bigdata/chart-breed.vue

@@ -0,0 +1,72 @@
+<!-- **************************************NO.16 摄像头*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartBreed" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	export default {
+		name: 'chartBreed',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts1();
+		},
+
+		methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
+      myEcharts(xData,seriesData) {
+        var chartDom = document.getElementById('chartBreed');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true,
+                backgroundColor: '#333'
+              }
+            }
+          },
+
+          xAxis: {
+            data: xData,
+            axisLine: {
+              lineStyle: {
+                color: '#ccc'
+              }
+            }
+          },
+          yAxis: [{
+            type: 'value',
+          },
+            {
+              type: 'value',
+            }],
+          series: seriesData
+        };
+        option && myChart.setOption(option);
+      },
+
+    }
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
+</style>

src/views/bigdata/chart-collectionTwo.vue

@@ -0,0 +1,108 @@
+<!-- **************************************NO.10 收集点*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="collectionTwo" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	export default {
+		name: 'collectionTwo',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+		},
+
+		methods: {
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
+			myEcharts(data) {
+				var chartDom = document.getElementById('collectionTwo');
+				var myChart = echarts.init(chartDom);
+				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+				var option;
+				let bgColor = '#fff';
+
+				let formatNumber = function (num) {
+				    let reg = /(?=(\B)(\d{3})+$)/g;
+				    return num.toString().replace(reg, ',');
+				};
+
+				option = {
+				    color: color,
+				    series: [
+				        {
+				            type: 'pie',
+				            radius: ['50%', '70%'],
+				            center: ['50%', '50%'],
+				            data: data,
+				            hoverAnimation: false,
+				            itemStyle: {
+				                normal: {
+				                    borderWidth:1,
+				                },
+
+				                emphasis: {
+				                    borderColor: bgColor,
+				                    borderWidth: 2,
+				                         shadowBlur: 8,
+				                borderColor: "#00ffff",
+				                shadowColor: "#00ffff",
+				                },
+				            },
+				            labelLine: {
+				                normal: {
+				                    length: 20,
+				                    length2:10,
+				                    lineStyle: {
+				                        color: '#356781',
+				                    },
+				                },
+				            },
+				            label: {
+				                normal: {
+				                    formatter: (params) => {
+				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
+				                    },
+				                    rich: {
+				                        icon: {
+				                            fontSize: 10,
+				                        },
+				                        name: {
+				                            fontSize:10,
+				                            padding: [0, 3, 0, 4],
+				                            color: '#23c9ea',
+				                        },
+				                        value: {
+				                            fontSize: 10,
+				                            color: '#ffffff',
+				                        },
+				                    },
+				                },
+				            },
+				        },
+				    ],
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-firecontrolTwo.vue

@@ -0,0 +1,132 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="firecontrolTwo" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	export default {
+		name: 'firecontrolTwo',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts();
+		},
+
+		methods: {
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=f46x0t0c7883X-D6
+      myEcharts(xData,seriesData) {
+				var chartDom = document.getElementById('firecontrolTwo');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+                    interval: 0,
+                    rotate: 20,
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         data: xData
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: [{
+				        itemStyle:{
+				            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+				                    offset: 0,
+				                    color: 'rgba(0,244,255,1)'
+				                }, {
+				                    offset: 1,
+				                    color: 'rgba(0,77,167,1)'
+				                }], false),
+				                barBorderRadius: 10,
+				                opacity:0.8
+				        },
+				        barWidth:10,
+				        label:{
+                    formatter: "{c}",
+				            show:true,
+				            position:['0','-20'],
+				            color:'#fff',
+				        },
+				        data: seriesData,
+				        type: 'bar',
+				    }]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

src/views/bigdata/chart-plant.vue

@@ -0,0 +1,72 @@
+<!-- **************************************NO.16 摄像头*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPlant" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	export default {
+		name: 'chartPlant',
+		data() {
+			return {
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts1();
+		},
+
+		methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
+      myEcharts(xData,seriesData) {
+        var chartDom = document.getElementById('chartPlant');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                show: true,
+                backgroundColor: '#333'
+              }
+            }
+          },
+
+          xAxis: {
+            data: xData,
+            axisLine: {
+              lineStyle: {
+                color: '#ccc'
+              }
+            }
+          },
+          yAxis: [{
+            type: 'value',
+          },
+            {
+              type: 'value',
+            }],
+          series: seriesData
+        };
+        option && myChart.setOption(option);
+      },
+
+    }
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
+</style>