修复数据分析为原来的 echarts 绘图

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

@@ -54,9 +54,7 @@
         </el-icon>
         指标聚合统计图
       </div>
-      <div class="chart" style="height: calc(100vh - 280px);" v-loading="loading">
-        <VueUiXy :dataset="dataset" :config="config" />
-      </div>
+      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
     </el-card>
   </div>
 </template>
@@ -66,29 +64,17 @@ import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/device';
 import dayjs from 'dayjs';
-import { VueUiXy } from "vue-data-ui";
-import "vue-data-ui/style.css";
-import { getLineData } from "/@/utils/dataUiOptions";
-import { useThemeChange } from '/@/hooks/useCommon';
+import Chart from '/@/components/chart/index.vue'
+import { getLineOption } from '/@/components/chart/options'
 
 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: '',
@@ -134,18 +120,13 @@ function getData() {
   loading.value = true
   api.analysis.deviceIndicatorPolymerize(params).then((data: any[]) => {
     const res = data || []
-    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
+    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 + '最小值']
+      })
+    )
   }).finally(() => loading.value = false)
 }
 

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

@@ -38,7 +38,7 @@
           </el-button-group>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="getData" :loading="loading">
+          <el-button type="primary" @click="getData">
             <el-icon>
               <ele-Search />
             </el-icon>
@@ -52,9 +52,7 @@
         </el-icon>
         指标趋势统计图
       </div>
-      <div class="chart" style="height: calc(100vh - 280px);" v-loading="loading">
-        <VueUiXy :dataset="dataset" :config="config" />
-      </div>
+      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
     </el-card>
   </div>
 </template>
@@ -64,26 +62,13 @@ import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/device';
 import dayjs from 'dayjs';
-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])
+import Chart from '/@/components/chart/index.vue'
+import { getLineOption } from '/@/components/chart/options'
 
 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);
@@ -132,18 +117,19 @@ function getData() {
   loading.value = true
   api.analysis.deviceIndicatorTrend(params).then((data: any[]) => {
     const res = data || []
-    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
-
+    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],
+        }]
+      })
+    )
   }).finally(() => loading.value = false)
 }