【看板展示】【bar、lineX轴各名称倾斜条件调整/字体大小逻辑调整】

kanban-client/README.md

@@ -31,6 +31,8 @@
 * 屏幕resize重新渲染
 * 打包调整，之前存在很多重复打包文件
 * resize之后根据容器大小重新调整charts的展示方式
+* 字体大小梯度调整
+* bar/line图X轴名称倾斜条件调整
 #### 运行
 * 本地运行
 ```

kanban-client/app/component/converter.js

@@ -132,7 +132,7 @@ function barConfig(model) {
                         fontSize: getFontSize() * .7
                     },
                     axisLabel: {
-                        rotate:  getScreenSize().width * layout.w / xf.length / 100 < 60 ? 45 : 0,
+                        rotate:  getScreenSize().width * layout.w / xf.length / 100 < 80 ? 45 : 0,
                         interval: 0,
                         textStyle: {
                             fontSize: getFontSize() * .7
@@ -198,7 +198,7 @@ function lineConfig(model) {
                         fontSize: fontSize || getFontSize() * .7
                     },
                     axisLabel: {
-                        rotate:  getScreenSize().width * layout.w / xf.length / 100 < 60 ? 45 : 0,
+                        rotate:  getScreenSize().width * layout.w / xf.length / 100 < 80 ? 45 : 0,
                         interval: 0,
                         textStyle: {
                             fontSize: fontSize || getFontSize() * .7
@@ -413,17 +413,7 @@ function getScreenSize() {
 
 function getFontSize() {
     let {height, width} = getScreenSize();
-    if(width > 1000) {
-        return 24;
-    }else if(width > 800) {
-        return 22;
-    }else if(width > 500) {
-        return 20;
-    }else if(width > 300) {
-        return 18;
-    }else {
-        return 16
-    }
+    return width / 300 * 2 + 16 + Math.round(width/1000) * 2;
 }
 
 export {converter};

kanban-client/app/src/Charts/ResetCharts.js

@@ -17,7 +17,7 @@ function resetBarOption(option, node) {
     option.grid.top = node.offsetHeight < 310 ? '35%' : '28%';
     option.grid.bottom = node.offsetHeight < 310 ? '20%' : '16%';
     option.legend.top = node.offsetHeight < 310 ? '20%' : '18%';
-    option.xAxis[0].axisLabel.rotate = node.offsetWidth / option.xAxis[0].data.length < 60 ? 45 : 0;
+    option.xAxis[0].axisLabel.rotate = node.offsetWidth / option.xAxis[0].data.length < 80 ? 45 : 0;
     return option;
 }
 
@@ -25,7 +25,7 @@ function resetLineOption(option, node) {
     option.grid.top = node.offsetHeight < 310 ? '35%' : '28%';
     option.grid.bottom = node.offsetHeight < 310 ? '20%' : '16%';
     option.legend.top = node.offsetHeight < 310 ? '20%' : '18%';
-    option.xAxis[0].axisLabel.rotate = node.offsetWidth / option.xAxis[0].data.length < 60 ? 45 : 0;
+    option.xAxis[0].axisLabel.rotate = node.offsetWidth / option.xAxis[0].data.length < 80 ? 45 : 0;
     return option;
 }