feat: 解决首页图表警告

src/views/Dashboard/src/DashboardView.vue

@@ -1235,10 +1235,10 @@ function handleImageClick(event) {
                       :Interval="Top1OInterval_dest"
                       v-vloading="TopOriginLoading"
                       saveImageName="Top 10 Destination"
-                      style="height: 272px"
+                      style="height: 310px"
                     ></SellerChart>
                   </div>
-                  <div class="map" style="height: 272px">
+                  <div class="map" style="height: 310px">
                     <!-- <TopMap :obj="dashboardObj.Top10faultData" ref="Top10Destinationref"></TopMap> -->
                     <TopMap ref="Top10Destinationref"></TopMap>
                   </div>

src/views/Dashboard/src/components/BarChart.vue

@@ -23,7 +23,7 @@ watch(
     initOption.yAxis.interval = interval.value
     initOption.title.text = bar_title.value
     nextTick(() => {
-      initChart()
+      barChart.value.setOption(initOption)
     })
   },
   {
@@ -65,7 +65,7 @@ const Name = computed(() => {
 const initOption = reactive({
   //标题
   title: {
-    text: bar_title.value || 'Total:', //主标题
+    text: bar_title.value || '', //主标题
     left: 19,
     top: 9.5,
     textStyle: {
@@ -206,25 +206,30 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+
   watch(
     () => themeStore.theme,
     (newVal) => {
       if (newVal === 'dark') {
-        // initOption.title.textStyle.color = '#f0f1f3'
+        initOption.title.textStyle.color = '#f0f1f3'
         initOption.xAxis.axisLine.lineStyle.color = '#8d9095'
         initOption.yAxis.axisLine.lineStyle.color = '#8d9095'
         initOption.yAxis.splitLine.lineStyle.color = '#8d9095'
         initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
         initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
-        initChart()
+        nextTick(() => {
+          barChart.value.setOption(initOption)
+        })
       } else {
-        // initOption.title.textStyle.color = '#2B2F36'
+        initOption.title.textStyle.color = '#2B2F36'
         initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
         initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
         initOption.toolbox.iconStyle.borderColor = '#2B2F36'
         initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
-        initChart()
+        nextTick(() => {
+          barChart.value.setOption(initOption)
+        })
       }
     },
     {
@@ -240,21 +245,20 @@ const paramsdata = ref({
   type: ''
 })
 const clickParams = () => {
-  const bar_chart = echarts.init(bar_ref.value)
   // 监听点击事件
-  bar_chart.on('click', function (params) {
+  barChart.value.on('click', function (params) {
     paramsdata.value.name = params.name
     paramsdata.value.type = params.seriesName
     emits('ClickParams')
   })
 }
+const barChart = ref()
 const initChart = () => {
-  const bar_chart = echarts.init(bar_ref.value)
+  barChart.value = echarts.init(bar_ref.value)
   //图表响应式
   window.addEventListener('resize', () => {
-    bar_chart.resize()
+    barChart.value.resize()
   })
-  bar_chart.setOption(initOption)
 }
 
 defineExpose({

src/views/Dashboard/src/components/PieChart.vue

@@ -235,18 +235,14 @@ const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()
 const pieChart = ref()
 const clickParams = () => {
-  // pieChart.value = echarts.init(pie_ref.value)
-  // pieChart.value = pie_chart
   // 监听点击事件
-  pieChart.value &&
-    pieChart.value.on('click', function (params) {
-      paramsdata.value = params.data
-      emits('ClickParams')
-    })
+  pieChart.value.on('click', function (params) {
+    paramsdata.value = params.data
+    emits('ClickParams')
+  })
 }
 const initChart = () => {
   pieChart.value = echarts.init(pie_ref.value)
-  pieChart.value.setOption(initOption)
   //图表响应式
   window.addEventListener('resize', () => {
     pieChart.value.resize()

src/views/Dashboard/src/components/RevenueChart.vue

@@ -25,7 +25,7 @@ watch(
     initOption.legend.data = Name.value
     initOption.toolbox.show = isShowTooltips.value
     nextTick(() => {
-      initChart()
+      revenueChart.value.setOption(initOption)
     })
   },
   {
@@ -39,7 +39,7 @@ watch(
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
     nextTick(() => {
-      initChart()
+      revenueChart.value.setOption(initOption)
     })
   },
   {
@@ -81,80 +81,6 @@ const Name = computed(() => {
 const isShowTooltips = computed(() => {
   return bar_data.value?.isShowTooltips
 })
-const exportData = ({ filename }: any) => {
-  $api
-    .RevenueDownload({
-      date_start: props.RevenueStartDate,
-      date_end: props.RevenueEndDate
-    })
-    .then((res: any) => {
-      if (res.code === 200) {
-        let header: any = []
-        let data: any = []
-        let sheetname: any = []
-        let filterA = res.data.r2_cloumn.map((el: any) => {
-          return el.dataIndex
-        })
-        let titleA = res.data.r2_cloumn.map((el: any) => {
-          return el.title
-        })
-        let filterB = res.data.r3_cloumn.map((el: any) => {
-          return el.dataIndex
-        })
-        let titleB = res.data.r3_cloumn.map((el: any) => {
-          return el.title
-        })
-        let result: any = [
-          {
-            tHeader: titleA,
-            filterVal: filterA,
-            tableDatas: res.data.r2,
-            sheetName: res.data.r2_title
-          },
-          {
-            tHeader: titleB,
-            filterVal: filterB,
-            tableDatas: res.data.r3,
-            sheetName: res.data.r3_title
-          }
-        ]
-        let formatJson = (filterVal: any, jsonData: any) => {
-          return jsonData.map((v: any) => filterVal.map((j: any) => v[j]))
-        }
-        for (var i in result) {
-          header.push(result[i].tHeader)
-          sheetname.push(result[i].sheetName)
-          data.push(formatJson(result[i].filterVal, result[i].tableDatas))
-        }
-        // 将表头插入数据数组中
-        for (let i = 0; i < header.length; i++) {
-          data[i].unshift(header[i])
-        }
-        let ws_name = sheetname
-        // 创建工作簿对象
-        let wb = XLSX.utils.book_new()
-        let ws: any = []
-        // 创建每个工作表并设置列宽
-        for (let j = 0; j < header.length; j++) {
-          ws.push(XLSX.utils.aoa_to_sheet(data[j]))
-          let arr: any = []
-          header[j].forEach((val: any) => {
-            arr.push({
-              wpx: 120
-            })
-          })
-          ws[j]['!cols'] = arr
-        }
-        // 将工作表对象添加到工作簿中
-        for (let k = 0; k < header.length; k++) {
-          wb.SheetNames.push(ws_name[k])
-          wb.Sheets[ws_name[k]] = ws[k]
-        }
-        XLSX.writeFile(wb, filename + '.xlsx') // 导出文件
-      }
-    })
-    .finally(() => {})
-}
 
 // 数额
 const initOption = reactive({
@@ -316,7 +242,9 @@ onMounted(() => {
         initOption.legend.textStyle.color = 'rgba(240,241,243,0.7)'
         initOption.toolbox.iconStyle.borderColor = '#f0f1f3'
         initOption.toolbox.feature.saveAsImage.backgroundColor = '#3F434A'
-        initChart()
+        nextTick(() => {
+          revenueChart.value.setOption(initOption)
+        })
       } else {
         initOption.title.textStyle.color = '#2B2F36'
         initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
@@ -325,7 +253,9 @@ onMounted(() => {
         initOption.legend.textStyle.color = '#646A73'
         initOption.toolbox.iconStyle.borderColor = '#2B2F36'
         initOption.toolbox.feature.saveAsImage.backgroundColor = '#fff'
-        initChart()
+        nextTick(() => {
+          revenueChart.value.setOption(initOption)
+        })
       }
     },
     {
@@ -335,13 +265,14 @@ onMounted(() => {
   )
 })
 
+const revenueChart = ref()
 const initChart = () => {
-  const bar_chart = echarts.init(bar_ref.value)
+  revenueChart.value = echarts.init(bar_ref.value)
   //图表响应式
   window.addEventListener('resize', () => {
-    bar_chart.resize()
+    revenueChart.value.resize()
   })
-  bar_chart.on('legendselectchanged', function (event: any) {
+  revenueChart.value.on('legendselectchanged', function (event: any) {
     const selected = event.selected
     let trueCount = 0
     let trueObj: any = {}
@@ -386,9 +317,8 @@ const initChart = () => {
       initOption.yAxis.max = max
       initOption.yAxis.interval = interval
     }
-    bar_chart.setOption(initOption)
+    revenueChart.value.setOption(initOption)
   })
-  bar_chart.setOption(initOption)
 }
 </script>