feat:echarts-fonsize配置

src/services/echarts.ts

@@ -47,9 +47,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -137,9 +148,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -269,13 +291,23 @@ export const charts = [
                 top: 12,
                 containLabel: true,
               },
-              fontSize: 10,
               xAxis: {
                 type: 'category',
                 data: [],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -329,9 +361,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -420,9 +463,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -558,9 +612,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: [],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -615,9 +680,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -712,9 +788,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -804,9 +891,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -939,6 +1037,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -950,11 +1049,22 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
                 max: 100,
                 min: 0,
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1116,6 +1226,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1126,9 +1237,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1251,6 +1373,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1261,9 +1384,20 @@ export const charts = [
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               yAxis: {
                 type: 'value',
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1394,6 +1528,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1405,11 +1540,22 @@ export const charts = [
               yAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               xAxis: {
                 type: 'value',
                 max: 100,
                 min: 0,
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1486,6 +1632,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 top: 20,
                 bottom: 40,
@@ -1495,11 +1642,22 @@ export const charts = [
               yAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               xAxis: {
                 type: 'value',
                 max: 100,
                 min: 0,
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1622,6 +1780,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1632,11 +1791,22 @@ export const charts = [
               yAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               xAxis: {
                 type: 'value',
                 max: 100,
                 min: 0,
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1761,6 +1931,7 @@ export const charts = [
           disableAnchor: true,
           echarts: {
             option: {
+              barWidth: '20%',
               grid: {
                 bottom: 8,
                 left: 8,
@@ -1771,11 +1942,22 @@ export const charts = [
               yAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                },
               },
               xAxis: {
                 type: 'value',
                 max: 100,
                 min: -50,
+                splitNumber: 2,
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  textStyle: {
+                    color: '#FFFFFF66', //Y轴内容文字颜色
+                  },
+                },
               },
               series: [
                 {
@@ -1961,7 +2143,13 @@ export const charts = [
                   type: 'pie',
                   radius: '50%',
                   label: {
-                    color: '#ffffff',
+                    normal: {
+                      show: true,
+                      textStyle: {
+                        fontSize: 12,
+                        color: '#ffffff',
+                      },
+                    },
                   },
                   data: [
                     { value: 335, name: '2D' },
@@ -2042,7 +2230,13 @@ export const charts = [
                   type: 'pie',
                   radius: ['50%', '70%'],
                   label: {
-                    color: '#ffffff',
+                    normal: {
+                      show: true,
+                      textStyle: {
+                        fontSize: 12,
+                        color: '#ffffff',
+                      },
+                    },
                   },
                   data: [
                     { value: 335, name: '2D' },
@@ -2123,7 +2317,13 @@ export const charts = [
                   type: 'pie',
                   radius: ['50%', '70%'],
                   label: {
-                    color: '#ffffff',
+                    normal: {
+                      show: true,
+                      textStyle: {
+                        fontSize: 12,
+                        color: '#ffffff',
+                      },
+                    },
                   },
                   itemStyle: {
                     borderRadius: 4,
@@ -2471,6 +2671,12 @@ export const charts = [
                     opacity: 0.3,
                   },
                 },
+                name: {
+                  textStyle: { fontSize: 12 },
+                },
+                axisLabel: {
+                  fontSize: 12,
+                },
                 splitArea: {
                   show: false,
                 },
@@ -2479,12 +2685,22 @@ export const charts = [
                     opacity: 0.1,
                   },
                 },
+                nameGap: 10,
               },
               series: [
                 {
                   type: 'radar',
                   lineStyle: { width: 1, opacity: 0.5 },
                   areaStyle: { opacity: 0.1 },
+                  label: {
+                    normal: {
+                      show: true,
+                      textStyle: {
+                        fontSize: 12,
+                        color: '#ffffff',
+                      },
+                    },
+                  },
                   data: [
                     {
                       value: [52000, 3000, 20000, 35000, 50000, 18000],
@@ -2581,6 +2797,12 @@ export const charts = [
                     opacity: 0.3,
                   },
                 },
+                name: {
+                  textStyle: { fontSize: 12 },
+                },
+                axisLabel: {
+                  fontSize: 12,
+                },
                 splitArea: {
                   show: false,
                 },
@@ -2589,12 +2811,22 @@ export const charts = [
                     opacity: 0.1,
                   },
                 },
+                nameGap: 10,
               },
               series: [
                 {
                   type: 'radar',
                   lineStyle: { width: 1, opacity: 0.5 },
                   areaStyle: { opacity: 0.1 },
+                  label: {
+                    normal: {
+                      show: true,
+                      textStyle: {
+                        fontSize: 12,
+                        color: '#ffffff',
+                      },
+                    },
+                  },
                   data: [
                     {
                       value: [52000, 3000, 20000, 35000, 50000, 18000],

src/views/Preview.vue

@@ -36,6 +36,9 @@ onMounted(() => {
   open();
   meta2d.on('opened', opened);
   window.addEventListener('message', function (e) {
+    if (typeof e.data !== 'string') {
+      return;
+    }
     let data = JSON.parse(e.data);
     if (typeof data === 'object') {
       meta2d.emit(data.name);

src/views/components/View.vue

@@ -803,6 +803,9 @@ onMounted(() => {
   };
 
   window.addEventListener('message', function (e) {
+    if (typeof e.data !== 'string') {
+      return;
+    }
     let data = JSON.parse(e.data);
     if (typeof data === 'object') {
       meta2d.emit(data.name);