[update] add line chart

src/components/data-analysis/ControlPanel.vue

@@ -9,6 +9,10 @@
           track-by="id"
           :options="simpleOptions"
         />
+        <!-- <div v-if="simpleSelectModel.id === 1">
+          <va-button>test</va-button>
+          <va-input></va-input>
+        </div> -->
       </va-card-content>
     </va-card>
   </div>
@@ -17,7 +21,7 @@
   import { ref } from 'vue'
   export default {
     setup() {
-      const simpleSelectModel = ref('')
+      const simpleSelectModel = ref({})
       const simpleOptions = ref([
         {
           id: 1,

src/components/data-analysis/LineChartContainer.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <va-card class="h-full">
+      <va-card-content class="h-full w-full">
+        <EChart ref="chart_ref" :option="option" :autoresize="true" />
+      </va-card-content>
+    </va-card>
+  </div>
+</template>
+<script lang="ts">
+  import { ref, onMounted } from 'vue'
+
+  export default {
+    setup() {
+      const chart_ref = ref<HTMLElement | null>(null)
+
+      function randomData() {
+        now = new Date(+now + oneDay)
+        value = value + Math.random() * 21 - 10
+        return {
+          name: now.toString(),
+          value: [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value)],
+        }
+      }
+
+      let data: { name: string; value: (string | number)[] }[] = []
+      let now = new Date(1997, 9, 3)
+      let oneDay = 24 * 3600 * 1000
+      let value = Math.random() * 1000
+      for (var i = 0; i < 1000; i++) {
+        data.push(randomData())
+      }
+
+      const option = {
+        title: {
+          text: 'Dynamic Data & Time Axis',
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: function (params: Array<object>) {
+            console.log('params', params)
+            const _params = params[0]
+            var date = new Date(_params.name)
+            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + _params.value[1]
+          },
+          axisPointer: {
+            animation: false,
+          },
+        },
+        xAxis: {
+          type: 'time',
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, '100%'],
+          splitLine: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: 'Fake Data',
+            type: 'line',
+            showSymbol: false,
+            data: data,
+          },
+        ],
+      }
+
+      onMounted(() => {
+        console.log(chart_ref.value)
+        setInterval(function () {
+          for (var i = 0; i < 5; i++) {
+            data.shift()
+            data.push(randomData())
+          }
+          chart_ref.value.setOption({
+            series: [
+              {
+                data: data,
+              },
+            ],
+          })
+        }, 1000)
+      })
+
+      return { option, chart_ref }
+    },
+  }
+</script>
+<style lang=""></style>

src/pages/admin/data-analysis/DataAnalysis.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="h-[88vh] grid grid-cols-4 gap-6">
     <ControlPanel class="h-full col-span-1"></ControlPanel>
-    <ChartContainer class="h-[50%] col-span-3"></ChartContainer>
+    <LineChartContainer class="h-[50%] col-span-3"></LineChartContainer>
   </div>
 </template>
 
 <script lang="ts">
   import useMqtt from '@/composables/utils/useMqtt'
   import ControlPanel from '@/components/data-analysis/ControlPanel.vue'
-  import ChartContainer from '@/components/data-analysis/ChartContainer.vue'
+  import LineChartContainer from '@/components/data-analysis/LineChartContainer.vue'
 
   export default {
     components: {
       ControlPanel,
-      ChartContainer,
+      LineChartContainer,
     },
     setup() {
       const { startMqtt, publish } = useMqtt()