style(bi/cmm/lineandbar): 修复移动端显示问题

src/components/LevitatedSphere/index.vue

@@ -59,18 +59,10 @@ export default {
     };
   },
   created() {
-    this.clientWidth = document.documentElement.clientWidth;
-    this.clientHeight = document.documentElement.clientHeight;
-    this.left = this.clientWidth - this.itemWidth - this.gapWidth;
-    this.top = this.clientHeight * this.coefficientHeight;
+    this.resize()
   },
   mounted() {
-    window.addEventListener('resize', () => {
-      this.clientWidth = document.documentElement.clientWidth;
-      this.clientHeight = document.documentElement.clientHeight;
-      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
-      this.top = this.clientHeight * this.coefficientHeight;
-    })
+    window.addEventListener('resize', this.resize)
     this.$nextTick(() => {
       const sphereBtn = this.$refs.levitatedSphere;
       let isDown = false
@@ -109,9 +101,17 @@ export default {
       });
     });
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+  },
   methods: {
+    resize() {
+      this.clientWidth = document.documentElement.clientWidth;
+      this.clientHeight = document.documentElement.clientHeight;
+      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
+      this.top = this.clientHeight * this.coefficientHeight;
+    },
     handleClick() {
-      console.log(this.downPoint.x,this.upPoint.x,this.downPoint.y,this.upPoint.y)
       if (this.downPoint.x === this.upPoint.x && this.downPoint.y === this.upPoint.y) {
         this.drawer = !this.drawer
       }

src/views/bi/competitor/cmm/LineAndBar.vue

@@ -32,7 +32,7 @@ const props = defineProps({
 
 const echartsRef = ref(null)
 const chart = shallowRef(null)
-const myThousand = ref(false) // 是否显示万单位
+let myThousand = false // 是否显示万单位
 
 const setOptions = () => {
   // 计算 y 轴显示
@@ -45,13 +45,13 @@ const setOptions = () => {
       },
       axisLabel: {
         formatter(value) {
-          return formatNumberWithUnit(value, '元', myThousand.value, true)
+          return formatNumberWithUnit(value, '元', myThousand, true)
         }
       },
       axisPointer: {
         label: {
           formatter: (params) => {
-            return formatNumberWithUnit(params.value, '元', myThousand.value, true)
+            return formatNumberWithUnit(params.value, '元', myThousand, true)
           }
         }
       }
@@ -64,13 +64,13 @@ const setOptions = () => {
       },
       axisLabel: {
         formatter(value) {
-          return formatNumberWithUnit(value, '人', myThousand.value, true)
+          return formatNumberWithUnit(value, '人', myThousand, true)
         }
       },
       axisPointer: {
         label: {
           formatter: (params) => {
-            return formatNumberWithUnit(params.value, '人', myThousand.value, true)
+            return formatNumberWithUnit(params.value, '人', myThousand, true)
           }
         }
       }
@@ -113,7 +113,7 @@ const setOptions = () => {
           title: '切换万单位',
           icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
           onclick: () => {
-            myThousand.value = !myThousand.value
+            myThousand = !myThousand
             setOptions()
           }
         }
@@ -134,9 +134,9 @@ const setOptions = () => {
           var color = item.color;
           // 拼接提示内容
           if (item.seriesName.split('-')[1] === '销售额') {
-            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand.value) + '<br>';
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand) + '<br>';
           } else if (item.seriesName.split('-')[1] === '观看人次') {
-            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand.value) + '<br>';
+            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '人', myThousand) + '<br>';
           }
         });
         return tooltip;
@@ -161,8 +161,8 @@ const setOptions = () => {
 }
 
 watchEffect(() => {
-  if (!chart.value) return
-  myThousand.value = props.chartData.series?.some(o => {
+  if (!chart.value || props.chartData.series.length === 0) return
+  myThousand = props.chartData.series?.some(o => {
     return o.data.some(num => num >= 10000)
   })
   setOptions()
@@ -170,18 +170,23 @@ watchEffect(() => {
 
 const initChart = () => {
   chart.value = echarts.init(echartsRef.value)
-  setOptions()
+}
+
+const resize = () => {
+  chart.value.resize()
 }
 
 onMounted(() => {
   nextTick(() => {
     initChart()
+    window.addEventListener('resize', resize)
   })
 })
 onBeforeUnmount(() => {
   if (!chart.value) {
     return
   }
+  window.removeEventListener('resize', resize)
   chart.value.dispose()
   chart.value = null
 })

src/views/bi/competitor/cmm/index.vue

@@ -252,7 +252,7 @@ const reset = async () => {
 <style scoped
   lang="scss">
   .tabs-container {
-    height: 100%;
+    min-height: 100%;
     display: flex;
     flex-direction: column;
 

src/views/bi/competitor/index.vue

@@ -30,20 +30,20 @@ const activeName = ref(list.value[0].name)
 <style scoped
   lang="scss">
   .app-container {
-    height: calc(100vh - 84px);
+    min-height: calc(100vh - 84px);
 
     .tabs {
       background: var(--el-bg-color-overlay);
       padding: 20px;
       display: flex;
       flex-direction: column;
-      height: 100%;
+      min-height: 100%;
 
       ::v-deep(.el-tabs__content) {
         flex: 1;
 
         .el-tab-pane {
-          height: 100%;
+          min-height: 100%;
         }
 
       }

src/views/bi/competitor/sycm_store/index.vue

@@ -200,7 +200,6 @@ const filterData = () => {
     // // 初始化时间
     // allChartData.xAxis = generatorDayList(queryParams.date[0], queryParams.date[1])
     const data = await getList()
-    console.log(data)
     // 直播间列表
     brandList.value = data.map(list => list[0].platformStore)
     // 初始化筛选条件（默认请求第一个店铺的第一类型数据）