图表

src/views/Home/Index.vue

@@ -74,10 +74,13 @@
   <!-- 第二行：图表行 -->
   <el-row :gutter="16" class="mb-4">
     <el-col :span="8">
-      <el-card shadow="hover" class="mb-8px">
-        <el-skeleton :loading="loading" animated>
-          <Echart :options="barOptionsData" :height="280" />
-        </el-skeleton>
+      <el-card class="chart-card" shadow="never">
+        <template #header>
+          <div class="flex items-center">
+            <span class="text-base font-medium text-gray-600">设备状态统计</span>
+          </div>
+        </template>
+        <div ref="typeChartRef" class="h-[220px]"></div>
       </el-card>
     </el-col>
     <el-col :span="8">
@@ -135,8 +138,6 @@
 <script setup lang="ts" name="Index">
 import * as echarts from 'echarts/core'
 import { BarChart } from 'echarts/charts'; // 显式导入柱状图模块
-import { set } from 'lodash-es'
-const { t } = useI18n() // 国际化
 
 import {
   GridComponent,
@@ -154,7 +155,7 @@ import {
 } from '@/api/iot/statistics'
 import { formatDate } from '@/utils/formatTime'
 import { IotStatApi } from '@/api/pms/stat'
-import { pieOptions, barOptions } from './echarts-data'
+
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件
 
 /** IoT 首页 */
@@ -671,37 +672,10 @@ const initChart = async () => {
 const handleResize = () => {
   chartInstance?.resize()
 }
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
-
-// 周活跃量
-const getWeeklyUserActivity = async () => {
-  const data = [
-    { value: 13253, name: 'analysis.monday' },
-    { value: 34235, name: 'analysis.tuesday' },
-    { value: 26321, name: 'analysis.wednesday' },
-    { value: 12340, name: 'analysis.thursday' },
-    { value: 24643, name: 'analysis.friday' },
-    { value: 1322, name: 'analysis.saturday' },
-    { value: 1324, name: 'analysis.sunday' }
-  ]
-  set(
-    barOptionsData,
-    'xAxis.data',
-    data.map((v) => t(v.name))
-  )
-  set(barOptionsData, 'series', [
-    {
-      name: t('analysis.activeQuantity'),
-      data: data.map((v) => v.value),
-      type: 'bar'
-    }
-  ])
-}
 /** 初始化 */
 onMounted(() => {
   getStats()
   initChart()
-  //getWeeklyUserActivity()
 })
 onUnmounted(() => {
   chartInstance?.dispose()