时间选择器

src/components/echartsTemplate/sankey.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="sankey_echart" ref="echart"></div>
+</template>
+
+<script>
+// #5BB57A
+let option = {
+  // tooltip: {
+  //   trigger: "item",
+  //   triggerOn: "mousemove",
+  // },
+  // animation: false,
+  series: {
+    type: "sankey",
+    layout: "none",
+    left: "10%",
+    emphasis: {
+      focus: "adjacency",
+    },
+    label: { position: "right" },
+    data: [],
+    links: [],
+    lineStyle: {
+      color: "source",
+      curveness: 0.5,
+    },
+    nodeWidth: 10,
+  },
+};
+export default {
+  name: "sankey_echart",
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(data = [], links = []) {
+      if (!this.myChart) {
+        // var dom = document.getElementById("sankey_echart");
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      option.series.data = data;
+      option.series.links = links;
+      option = this.myChart.setOption(option);
+    },
+  },
+  mounted() {
+    // this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sankey_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/cockpitNew1/datePicker.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-date-picker
+    v-model="dateValue"
+    class="block"
+    type="daterange"
+    :picker-options="pickerOptions"
+    value-format="yyyy-MM-dd"
+    range-separator="-"
+    start-placeholder="开始日期"
+    end-placeholder="结束日期"
+    align="right"
+    @change="dateChange"
+  >
+  </el-date-picker>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今年",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "去年",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "近三年",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "近五年",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+      dateValue: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    dateChange() {
+      this.$emit("dateChange");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/views/cockpitNew1/stxf.vue

@@ -23,10 +23,10 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import Bar3d from "../../components/echartsTemplate/3dBar.vue";
+// import Bar3d from "../../components/echartsTemplate/3dBar.vue";
 
 export default {
-  components: { Bar3d },
+  // components: { Bar3d },
   data() {
     return {};
   },

src/views/viewer1.vue

@@ -1,5 +1,6 @@
 <template>
     <div v-show="flag">
+        <datePicker @deteChange="deteChange"></datePicker>
         <JSYD />
         <TDSC />
         <HYSY />
@@ -20,10 +21,11 @@ import TDSY from './cockpitNew1/tdsy';
 import GDBH from './cockpitNew1/gdbh';
 import STXF from './cockpitNew1/stxf';
 import WPJG from './cockpitNew1/wpjg';
+import datePicker from './cockpitNew1/datePicker.vue';
 import { cockpitInfo } from '@/api/cockpit'
 import xzqh from "../../static/data/460200_full.json";
 export default {
-    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
+    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG ,datePicker},
     data() {
         return {
             flag: true
@@ -38,6 +40,9 @@ export default {
         switch() {
             this.flag = !this.flag;
 
+        },
+        deteChange(date){
+
         },
         pick_xzqh() {
             const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);