# 优化x-axis 显示

src/views/counter/components/chart.vue

@@ -34,10 +34,16 @@ export default {
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      rotate: 0,
+      screenWidth: document.body.clientWidth
     }
   },
   mounted() {
+    window.screenWidth = document.body.clientWidth
+    if (window.screenWidth <= 400) {
+      this.rotate = 30
+    }
     this.initChart()
     if (this.autoResize) {
       this.__resizeHanlder = debounce(() => {
@@ -51,6 +57,19 @@ export default {
     // 监听侧边栏的变化
     const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
     sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
+
+    // 监听窗体大小
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        that.screenWidth = window.screenWidth
+        console.log(window.screenWidth)
+        if (window.screenWidth <= 400) {
+          this.rotate = 30
+        }
+      })()
+    }
   },
   beforeDestroy() {
     if (!this.chart) {
@@ -78,6 +97,16 @@ export default {
         console.log(val)
         this.chart.resize()
       }
+    },
+    screenWidth(val) {
+      this.screenWidth = val
+      if (val <= 400) {
+        this.rotate = 30
+        this.setOptions(this.chartData)
+      } else {
+        this.rotate = 0
+        this.setOptions(this.chartData)
+      }
     }
   },
   methods: {
@@ -88,7 +117,8 @@ export default {
           data: xAxis,
           boundaryGap: false,
           axisLabel: {
-            interval: 0
+            interval: 0,
+            rotate: this.rotate
           },
           axisTick: {
             show: false