first commit all content

2025-08-27 17:54:46 +08:00
parent 4a5269cf34
commit 513d77f40f
317 changed files with 29786 additions and 0 deletions
--- a/src/components/echartsList/line.vue
+++ b/src/components/echartsList/line.vue
@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" @dataChange="dataChangeValue"></DateTimeSelect>
+        <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
+    </div>
+</template>
+
+<script>
+    import * as echarts from 'echarts'
+    import DateTimeSelect from './dateTimeSelect.vue'
+    export default {
+      name: 'echartsLine',
+      components: {DateTimeSelect},
+      props: {
+        lineData: {
+          type: Object,
+          default: () => {}
+        },
+        title: {
+          type: String,
+          default: null
+        },
+        chartData: {
+          type: Function,
+          default: () => {
+          }
+        }
+      },
+      data() {
+        return {
+          lineDataList: '',
+          num: ''
+        }
+      },
+      created() {
+        this.num = Math.floor(Math.random() * 9000);
+      },
+      mounted() {
+        if (this.lineData && this.lineData.hiddenTime) {
+          this.getList(this.title, {data: this.lineData.data, lineXData: this.lineData.lineXData});
+        }
+      },
+      methods: {
+        getList(title, dataXY) {
+          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num))
+          let option = {
+            title: [{
+              text: title,
+              x: '50%',
+              y: '3%',
+              textAlign: 'center',
+            }],
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross',
+                label: {
+                  backgroundColor: '#6a7985'
+                }
+              }
+            },
+            grid: {
+              top: '20%',
+              left: '2%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              axisLine: {
+                show: false
+              },
+              axisTick: {
+                show: false
+              },
+              data: dataXY.lineXData
+            },
+            yAxis: {
+              type: 'value',
+              name: '单位Mbps',
+              splitLine: {
+                show: false,
+              },
+            },
+            series: [
+              {
+                data: dataXY.data,
+                type: 'line',
+                areaStyle: {
+                  color: 'rgba(140, 158, 217, 1)'
+                }
+              }
+            ]
+          };
+          lineDataListIntance.setOption(option);
+          // window.addEventListener("resize", () => {
+          //   lineDataListIntance.resize()
+          // })
+        },
+        dataChangeValue(val, days) {
+          // console.log(props.chartData(val));
+          this.getList(this.title, {data: this.lineData.data, lineXData: days});
+        }
+      }
+    }
+</script>
+<style scoped>
+</style>