增加数据分析页面的 vue-data-ui 绘图，调试 x 轴数据多之后的显示问题

src/utils/dataUiOptions.ts

@@ -3,7 +3,7 @@ export function getTheme() {
   return localStorage.isDark ? 'hack' : ''
 }
 
-export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400 }) {
+export function getLineData({ xAxis = [] as any[], datas = [] as number[][], legend = [] as string[], suffix = '', width = 1000, height = 400, responsive = false, zoom = false, modulo = 10, padding = 30, useArea = true }) {
   const colors = ['#6376DD', '#FBBB04']
 
   const maxVal = Math.max(...datas.flat())
@@ -12,19 +12,20 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
   const max = Math.ceil(maxVal * 1.4 / radio) * radio
   const config = {
     theme: getTheme(),
+    responsive,
     "chart": {
       "fontFamily": "inherit",
       "paddingTop": 0,
       height,
       width,
       "zoom": {
-        "show": false
+        "show": zoom
       },
       "padding": {
         "top": 30,
-        "right": 14,
+        "right": padding,
         "bottom": 34,
-        "left": 30
+        "left": padding
       },
       "grid": {
         "position": "start",
@@ -44,6 +45,8 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
             "values": xAxis,
             "fontSize": 12,
             "showOnlyFirstAndLast": false,
+            "showOnlyAtModulo": true,
+            modulo,
             "yOffset": 8
           }
         }
@@ -63,7 +66,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
       },
       "userOptions": {
         "show": false
-      }
+      },
     },
     "line": {
       "radius": 3,
@@ -84,7 +87,7 @@ export function getLineData({ xAxis = [] as any[], datas = [] as number[][], leg
       "color": colors[i],
       "type": "line",
       "shape": "circle",
-      "useArea": true,
+      "useArea": useArea,
       "useProgression": false,
       "dataLabels": true,
       "smooth": true,

src/views/iot/dataAnalysis/IndicatorAggregation/index.vue

@@ -54,7 +54,9 @@
         </el-icon>
         指标聚合统计图
       </div>
-      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
+      <div class="chart" style="height: calc(100vh - 280px);" v-loading="loading">
+        <VueUiXy :dataset="dataset" :config="config" />
+      </div>
     </el-card>
   </div>
 </template>
@@ -64,22 +66,37 @@ import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/device';
 import dayjs from 'dayjs';
-import Chart from '/@/components/chart/index.vue'
-import { getLineOption } from '/@/components/chart/options'
+import { VueUiXy } from "vue-data-ui";
+import "vue-data-ui/style.css";
+import { getLineData } from "/@/utils/dataUiOptions";
+import { useThemeChange } from '/@/hooks/useCommon';
 
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
 const propertyList = ref<any[]>([])
-const chart = ref()
 const loading = ref(false)
 const propertyName = ref('')
 
 // 聚合力度可选值为"5分钟"、"1小时"和"1天"，对应的最大时间范围为"一周"、"一个月"和"一年"。
+// 获取默认图形配置数据
+const chartData = getLineData({
+  xAxis: [],
+  legend: [],
+  datas: [[]],
+})
+
+const config = ref<any>(chartData.config);
+const dataset = ref<any[]>(chartData.dataset);
+
+useThemeChange([config])
 
 const params = reactive({
-  productKey: '',
-  deviceKey: '',
-  properties: '',
+  // productKey: '',
+  // deviceKey: '',
+  // properties: '',
+  productKey: '1234567890',
+  deviceKey: 'qwertyuio',
+  properties: 'wertyuiop',
   dateType: '1',
   dateRange: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
 })
@@ -120,13 +137,18 @@ function getData() {
   loading.value = true
   api.analysis.deviceIndicatorPolymerize(params).then((data: any[]) => {
     const res = data || []
-    chart.value.draw(
-      getLineOption({
-        datas: [res.map(item => item.dataAverageValue), res.map(item => item.dataMaxValue), res.map(item => item.dataMinValue)],
-        xAxis: res.map(item => item.date),
-        legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值']
-      })
-    )
+    const chartData = getLineData({
+      xAxis: res.map(item => item.date.slice(5, 16)),
+      legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值'],
+      datas: [res.map(item => item.dataAverageValue), res.map(item => item.dataMaxValue), res.map(item => item.dataMinValue)],
+      responsive: true,
+      zoom: true,
+      useArea: false,
+      padding: 70,
+    })
+
+    dataset.value = chartData.dataset
+    config.value = chartData.config
   }).finally(() => loading.value = false)
 }
 

src/views/iot/dataAnalysis/exponentialTrend/index.vue

@@ -29,17 +29,16 @@
           </el-select>
         </el-form-item>
         <el-form-item label="选择时间：" prop="dateRange">
-          <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-            :clearable="false">
+          <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
           </el-date-picker>
           <el-button-group class="ml10">
-            <el-button @click="changeDate(1)" :type="activeIndex == 1 ?  'primary' : ''">最近一小时</el-button>
-            <el-button @click="changeDate(2)" :type="activeIndex == 2 ?  'primary' : ''">最近24小时</el-button>
-            <el-button @click="changeDate(3)" :type="activeIndex == 3 ?  'primary' : ''">最近一周</el-button>
+            <el-button @click="changeDate(1)" :type="activeIndex == 1 ? 'primary' : ''">最近一小时</el-button>
+            <el-button @click="changeDate(2)" :type="activeIndex == 2 ? 'primary' : ''">最近24小时</el-button>
+            <el-button @click="changeDate(3)" :type="activeIndex == 3 ? 'primary' : ''">最近一周</el-button>
           </el-button-group>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getData">
+          <el-button type="primary" @click="getData" :loading="loading">
             <el-icon>
               <ele-Search />
             </el-icon>
@@ -53,7 +52,9 @@
         </el-icon>
         指标趋势统计图
       </div>
-      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
+      <div class="chart" style="height: calc(100vh - 280px);" v-loading="loading">
+        <VueUiXy :dataset="dataset" :config="config" />
+      </div>
     </el-card>
   </div>
 </template>
@@ -63,20 +64,36 @@ import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/device';
 import dayjs from 'dayjs';
-import Chart from '/@/components/chart/index.vue'
-import { getLineOption } from '/@/components/chart/options'
+import { VueUiXy } from "vue-data-ui";
+import "vue-data-ui/style.css";
+import { getLineData } from "/@/utils/dataUiOptions";
+import { useThemeChange } from '/@/hooks/useCommon';
+
+// 获取默认图形配置数据
+const chartData = getLineData({
+  xAxis: [],
+  legend: [],
+  datas: [[]],
+})
+
+const config = ref<any>(chartData.config);
+const dataset = ref<any[]>(chartData.dataset);
+
+useThemeChange([config])
 
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
 const propertyList = ref<any[]>([])
-const chart = ref()
 const loading = ref(false)
 const propertyName = ref('')
 const activeIndex = ref(1);
 const params = reactive({
-  productKey: '',
-  deviceKey: '',
-  properties: '',
+  productKey: '1234567890',
+  deviceKey: 'qwertyuio',
+  properties: 'wertyuiop',
+  // productKey: '',
+  // deviceKey: '',
+  // properties: '',
   dateRange: [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')],
 })
 
@@ -85,22 +102,22 @@ api.product.getLists({ status: 1 }).then((res: any) => {
 });
 
 // 仪表盘折线按钮
-const changeDate = (key:number) => {
+const changeDate = (key: number) => {
   if (!params.productKey) return ElMessage('请选选择产品')
   if (!params.deviceKey) return ElMessage('请选选择设备')
   if (!params.properties) return ElMessage('请选选择属性')
   // 1 近1小时 2近24小时 3近一周
   activeIndex.value = key;
-  if(key === 1) {
+  if (key === 1) {
     // 近1小时
     params.dateRange = [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
-  }else if(key === 2) {
+  } else if (key === 2) {
     // 近24小时
-     params.dateRange = [
+    params.dateRange = [
       dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
       dayjs().format('YYYY-MM-DD HH:mm:ss'),
     ]
-  }else if(key === 3) {
+  } else if (key === 3) {
     // 近一周
     params.dateRange = [
       dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
@@ -118,19 +135,18 @@ function getData() {
   loading.value = true
   api.analysis.deviceIndicatorTrend(params).then((data: any[]) => {
     const res = data || []
-    chart.value.draw(
-      getLineOption({
-        datas: [res.map(item => item.dataValue)],
-        xAxis: res.map(item => item.dataTime),
-        legend: [propertyName.value],
-        dataZoom: [{ // 这部分是dataZoom的配置
-            type: 'slider', // 这里可以选择你需要的dataZoom类型
-            start: 0, // 数据窗口范围的起始百分比
-            end: 100,// 数据窗口范围的结束百分比
-            xAxisIndex: [0, 2],
-        }]
-      })
-    )
+    const chartData = getLineData({
+      xAxis: res.map(item => item.dataTime.slice(5)),
+      legend: [propertyName.value],
+      datas: [res.map(item => item.dataValue)],
+      responsive: true,
+      zoom: true,
+      padding: 70,
+    })
+
+    dataset.value = chartData.dataset
+    config.value = chartData.config
+
   }).finally(() => loading.value = false)
 }
 

src/views/iot/iotmanager/dashboard.vue

@@ -89,7 +89,7 @@ import { toRefs, reactive, onMounted, ref, watch, nextTick, onActivated, getCurr
 import { useRouter } from 'vue-router';
 import { VueUiXy, VueUiDonut } from "vue-data-ui";
 import "vue-data-ui/style.css";
-import { getLineData, getPieData, getTheme } from "/@/utils/dataUiOptions";
+import { getLineData, getPieData } from "/@/utils/dataUiOptions";
 import api from '/@/api/datahub';
 import dayjs from 'dayjs';
 import EditDic from '../alarm/log/component/edit.vue';