fix(competitor): 竞品分析-tab 切换导致 ECharts 的大小不对

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

@@ -179,12 +179,23 @@ watchEffect(() => {
 
 onMounted(() => {
   nextTick(() => {
-    chart.value = echarts.init(echartsRef.value)
+    chart.value = echarts.init(echartsRef.value, null, {
+      width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
+      height: props.height
+    })
   })
 })
-useWindowResize(() => {
-  chart.value.resize()
-})
+
+const resize = () => {
+  chart.value.resize({
+    width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
+    height: props.height
+  })
+}
+
+const injectMessage = inject('activeName')
+watch(injectMessage, resize)
+useWindowResize(resize)
 
 onBeforeUnmount(() => {
   if (!chart.value) {

src/views/bi/competitor/components/GradientArea.vue

@@ -42,7 +42,7 @@ const setOptions = () => {
   // 面积图是否切换
   const seriesResult = props.chartData.series.map(o => {
     if (!isArea.value) {
-      const obj = {...o}
+      const obj = { ...o }
       delete obj.areaStyle
       delete obj.lineStyle
       return obj
@@ -93,14 +93,6 @@ const setOptions = () => {
         magicType: {
           type: ['stack', 'tiled'] // 切换图表类型
         },
-        myTool1: {
-          show: true,
-          title: '切换表格',
-          icon: 'path://M5,5 L5,15 L15,15 L15,5 Z M20,5 L20,15 L30,15 L30,5 Z M5,20 L5,30 L15,30 L15,20 Z M20,20 L20,30 L30,30 L30,20 Z',
-          onclick: () => {
-            emits('changeType', 'table')
-          }
-        },
         myTool2: {
           show: true,
           title: '面积/折线图',
@@ -108,6 +100,14 @@ const setOptions = () => {
           onclick: () => {
             isArea.value = !isArea.value
           }
+        },
+        myTool1: {
+          show: true,
+          title: '切换表格',
+          icon: 'path://M5,5 L5,15 L15,15 L15,5 Z M20,5 L20,15 L30,15 L30,5 Z M5,20 L5,30 L15,30 L15,20 Z M20,20 L20,30 L30,30 L30,20 Z',
+          onclick: () => {
+            emits('changeType', 'table')
+          }
         }
       }
     },
@@ -141,21 +141,28 @@ watchEffect(() => {
   setOptions()
 })
 
-const initChart = () => {
-  chart.value = echarts.init(echartsRef.value)
-}
 
-const resize = () => {
-  chart.value.resize()
-}
-useWindowResize(resize)
 
 onMounted(() => {
   nextTick(() => {
-    initChart()
+    chart.value = echarts.init(echartsRef.value, null, {
+      width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
+      height: props.height
+    })
   })
 })
 
+const resize = () => {
+  chart.value.resize({
+    width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
+    height: props.height
+  })
+}
+
+const injectMessage = inject('activeName')
+watch(injectMessage, resize)
+useWindowResize(resize)
+
 onBeforeUnmount(() => {
   if (!chart.value) {
     return

src/views/bi/competitor/index.vue

@@ -4,9 +4,10 @@
       class="tabs">
       <el-tab-pane v-for="item in list"
         :label="item.name"
-        :name="item.name"
-        lazy>
+        :name="item.name">
+        <keep-alive>
           <component :is="item.component"></component>
+        </keep-alive>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -23,6 +24,7 @@ const list = ref([
   { name: '生意参谋-竞品', component: shallowRef(sycmPrd) }
 ])
 const activeName = ref(list.value[0].name)
+provide('activeName', activeName);
 </script>
 
 <style scoped
@@ -34,6 +36,7 @@ const activeName = ref(list.value[0].name)
       padding: 20px;
       display: flex;
       flex-direction: column;
+      width: 100%;
 
       ::v-deep(.el-tabs__content) {
         flex: 1;
@@ -51,12 +54,18 @@ const activeName = ref(list.value[0].name)
         flex: 1;
         display: flex;
         flex-direction: column;
+        width: 100%;
 
         .chart_wrap {
           flex: 1;
           display: flex;
           flex-direction: column;
           justify-content: space-around;
+          width: 100%;
+
+          .chart{
+            flex: 1;
+          }
         }
       }
     }

src/views/dashboard/mixins/resize.js

-import { debounce } from '@/utils'
-
-export default {
-  data() {
-    return {
-      $_sidebarElm: null,
-      $_resizeHandler: null
-    }
-  },
-  mounted() {
-    this.initListener()
-  },
-  activated() {
-    if (!this.$_resizeHandler) {
-      // avoid duplication init
-      this.initListener()
-    }
-
-    // when keep-alive chart activated, auto resize
-    this.resize()
-  },
-  beforeDestroy() {
-    this.destroyListener()
-  },
-  deactivated() {
-    this.destroyListener()
-  },
-  methods: {
-    // use $_ for mixins properties
-    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
-    $_sidebarResizeHandler(e) {
-      if (e.propertyName === 'width') {
-        this.$_resizeHandler()
-      }
-    },
-    initListener() {
-      this.$_resizeHandler = debounce(() => {
-        this.resize()
-      }, 100)
-      window.addEventListener('resize', this.$_resizeHandler)
-
-      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
-      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    destroyListener() {
-      window.removeEventListener('resize', this.$_resizeHandler)
-      this.$_resizeHandler = null
-
-      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
-    },
-    resize() {
-      const { chart } = this
-      chart && chart.resize()
-    }
-  }
-}