前端：首页优化

src/dashoo.cn/frontend_web/src/pages/index.vue

@@ -109,7 +109,7 @@
         supplierLevelOptions: null,
         supplierScaleOption: null,
         chartColor: [
-          '#6666FF', '#66CCFF', '#CCFF66', '#FE8463',
+          '#c7000a', '#007fbb', '#6c757d', '#0099CC',
           '#4A4AFF', '#00CACA', '#3CB371',
           '#24CBE5', '#DDDF00', '#ED561B', '#64E572',
           '#6A5ACD', '#B5C334', '#FCCE10',
@@ -125,7 +125,8 @@
         downloading: true
       }
     },
-    created () {
+    created () {},
+    mounted () {
       // 获取待办任务数
       this.getToDoNumList()
       // 获取饼图数据
@@ -139,7 +140,8 @@
     methods: {
       openType () {
         this.$nextTick(() => {
-          this.supplierTypeOptions = Highcharts.chart('supplier-type-dialog', {
+          // https://blog.csdn.net/weixin_38938336/article/details/72770018
+          this.supplierTypeOptions = new Highcharts.Chart('supplier-type-dialog', {
             title: {
               text: ''
             },
@@ -202,7 +204,7 @@
       },
       openAccess () {
         this.$nextTick(() => {
-          this.supplierTypeOptions = Highcharts.chart('supplier-access-dialog', {
+          this.supplierTypeOptions = new Highcharts.Chart('supplier-access-dialog', {
             title: {
               text: ''
             },
@@ -264,7 +266,7 @@
       },
       openLevel () {
         this.$nextTick(() => {
-          this.supplierTypeOptions = Highcharts.chart('supplier-level-dialog', {
+          this.supplierTypeOptions = new Highcharts.Chart('supplier-level-dialog', {
             title: {
               text: ''
             },
@@ -326,7 +328,7 @@
       },
       openScale () {
         this.$nextTick(() => {
-          this.supplierTypeOptions = Highcharts.chart('supplier-scale-dialog', {
+          this.supplierTypeOptions = new Highcharts.Chart('supplier-scale-dialog', {
             title: {
               text: ''
             },
@@ -442,7 +444,7 @@
           this.RegCapital3 = res.data.RegCapital3
           this.RegCapital4 = res.data.RegCapital4
           this.RegCapitalBig = res.data.RegCapitalBig
-          this.supplierTypeOptions = Highcharts.chart('supplier-type', {
+          this.supplierTypeOptions = new Highcharts.Chart('supplier-type', {
             chart: {
               type: 'pie',
               backgroundColor: 'rgba(0,0,0,0)',
@@ -450,8 +452,7 @@
               options3d: {
                 enabled: true,
                 alpha: 45,
-                beta: 0,
-                viewDistance: 25
+                beta: 0
               }
             },
             colors: this.chartColor,
@@ -464,7 +465,7 @@
                 size: '70%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
-                depth: 60, // 饼图的厚度
+                depth: 35, // 饼图的厚度
                 dataLabels: {
                   enabled: false, // 隐藏连线提示
                   format: '{point.name}'
@@ -534,15 +535,14 @@
               symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
           })
-          this.accessTypeOptions = Highcharts.chart('access-type', {
+          this.accessTypeOptions = new Highcharts.Chart('access-type', {
             chart: {
               type: 'pie',
               marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
-                beta: 0,
-                viewDistance: 25
+                beta: 0
               }
             },
             colors: this.chartColor,
@@ -555,7 +555,7 @@
                 size: '70%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
-                depth: 60, // 饼图的厚度
+                depth: 35, // 饼图的厚度
                 dataLabels: {
                   enabled: false, // 隐藏连线提示
                   format: '{point.name}'
@@ -620,15 +620,14 @@
               symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
           })
-          this.supplierLevelOptions = Highcharts.chart('supplier-level', {
+          this.supplierLevelOptions = new Highcharts.Chart('supplier-level', {
             chart: {
               type: 'pie',
               marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
-                beta: 0,
-                viewDistance: 25
+                beta: 0
               }
             },
             colors: this.chartColor,
@@ -641,7 +640,7 @@
                 size: '70%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
-                depth: 60, // 饼图的厚度
+                depth: 35, // 饼图的厚度
                 dataLabels: {
                   enabled: false, // 隐藏连线提示
                   format: '{point.name}'
@@ -705,15 +704,14 @@
               symbolRadius: 1 // 将图例圆角设置为 值越大就变圆点  https://api.highcharts.com.cn/highcharts#legend.symbolRadius
             }
           })
-          this.supplierScaleOption = Highcharts.chart('supplier-scale', {
+          this.supplierScaleOption = new Highcharts.Chart('supplier-scale', {
             chart: {
               type: 'pie',
               marginLeft: 1, // 饼图距左距离
               options3d: {
                 enabled: true,
                 alpha: 45,
-                beta: 0,
-                viewDistance: 25
+                beta: 0
               }
             },
             colors: this.chartColor,
@@ -726,7 +724,7 @@
                 size: '100%', // 饼图大小
                 allowPointSelect: false, // 设置饼图不可点击选择
                 cursor: 'pointer',
-                depth: 60, // 饼图的厚度
+                depth: 35, // 饼图的厚度
                 dataLabels: {
                   enabled: false, // 隐藏连线提示
                   format: '{point.name}'