图表根据分辨率缩放

app/view/dashboard/index.ejs

@@ -533,13 +533,8 @@
             }
         });
     })
-    $(window).resize(resizeChart);
-    function resizeChart() {
-        myChart1.resize()
-    }
-    var myChart1 = echarts.init(document.getElementById('jechart'));
     var transparentCount = 1;
-    option = {
+    const option = {
         // title: {
         //     text: '金额统计图',
         //     left: 'center',
@@ -569,7 +564,7 @@
             {
                 orient: 'vertical',
                 left: '3%',
-                top: '15%',
+                top: 'center',
                 itemWidth: 13,
                 itemHeight: 13,
                 textStyle: {
@@ -582,7 +577,7 @@
             {
                 orient: 'vertical',
                 right: '3%',
-                top: '15%',
+                top: 'center',
                 itemWidth: 13,
                 itemHeight: 13,
                 textStyle: {
@@ -597,8 +592,8 @@
             {
                 name: '审批次数',
                 type: 'pie',
-                radius: ['48%', '70%'],
-                right:'0',
+                radius: ['50%', '75%'],
+                center: ['50%', '50%'],
                 avoidLabelOverlap: false,
                 data: [
                     <% for (const sc of shenpi_count) { %>
@@ -618,9 +613,44 @@
             }
         ]
     };
+    function optionRadius() {
+        if ($(window).outerWidth() > 1366) {
+            if ($('#jechart').outerWidth() < 320) {
+                option.series[0].radius = ['35%', '60%'];
+            } else if ($('#jechart').outerWidth() < 330) {
+                option.series[0].radius = ['40%', '65%'];
+            } else if ($('#jechart').outerWidth() < 350) {
+                option.series[0].radius = ['45%', '70%'];
+            } else {
+                option.series[0].radius = ['50%', '75%'];
+            }
+        } else {
+            option.series[0].radius = ['50%', '75%'];
+        }
+    }
+    function initChart() {
+        const myChart1 = echarts.init(document.getElementById('jechart'));
+        optionRadius();
+        myChart1.setOption(option, true);
+        window.addEventListener('resize', function () {
+            optionRadius();
+            myChart1.setOption(option, true);
+            myChart1.resize();
+        });
+    }
+    // initChart();
     setTimeout(function () {
-        myChart1.setOption(option);
-        resizeChart();
-        resizeChart();
+        initChart();
     },500);
+
+    // $(window).resize(resizeChart);
+    // function resizeChart() {
+    //     myChart1.resize()
+    // }
+    // var myChart1 = echarts.init(document.getElementById('jechart'));
+    // setTimeout(function () {
+    //     myChart1.setOption(option);
+    //     resizeChart();
+    //     // resizeChart();
+    // },500);
 </script>