chart图支持更多配置项

kanban-client/app/component/converter.dev.js

@@ -112,14 +112,14 @@ function tableConfig(model) {
 
 function barConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, areaconfig, color } = config;
 
     legendconfig = parseObjectStr(legendconfig);
+    areaconfig = parseObjectStr(areaconfig);
     color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(',')),
         legendTop = legendconfig.top ? (legendconfig.top)+'%' : null,
-        legendRight = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -136,14 +136,18 @@ function barConfig(model) {
                     }
                 },
                 grid: {
+                    containLabel: true,
+                    top_: areaconfig.top ? areaconfig.top+'%' : null,
+                    bottom_: areaconfig.bottom ? areaconfig.bottom+'%' : null,
+                    left_: areaconfig.left ? areaconfig.left+'%' : null,
+                    right_: areaconfig.right ? areaconfig.right+'%' : null,
                     top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    show: !legendconfig.hide,
                     top_: legendTop,
                     top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-                    right: legendRight || '5%',
                     padding: 0,
                     orient: legendconfig.orient || 'horizontal',
                     itemGap: itemGap,
@@ -187,7 +191,7 @@ function barConfig(model) {
                         }
                     }
                 }],
-                series: getBarSeries(fontSize, layout, series)
+                series: getBarSeries(fontSize, layout, series, areaconfig)
             }
         },
         layout: getLayout(layout)
@@ -195,19 +199,24 @@ function barConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
+    if(Number(legendconfig.left) >= 0) {
+        o.config.option.legend.left = Number(legendconfig.left)+'%';
+    }else {
+        o.config.option.legend.right = '5%';
+    }
     return o;
 }
 
 function lineConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, areaconfig, color } = config;
     
     legendconfig = parseObjectStr(legendconfig);
+    areaconfig = parseObjectStr(areaconfig);
     color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(',')),
         legendTop = legendconfig.top ? (legendconfig.top)+'%' : null,
-        legendRight = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -221,14 +230,18 @@ function lineConfig(model) {
                     trigger: 'axis'
                 },
                 grid: {
+                    containLabel: true,
+                    top_: areaconfig.top ? areaconfig.top+'%' : null,
+                    bottom_: areaconfig.bottom ? areaconfig.bottom+'%' : null,
+                    left_: areaconfig.left ? areaconfig.left+'%' : null,
+                    right_: areaconfig.right ? areaconfig.right+'%' : null,
                     top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    show: !legendconfig.hide,
                     top_: legendTop,
                     top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-                    right: legendRight || '5%',
                     padding: 0,
                     orient: legendconfig.orient || 'horizontal',
                     itemGap: itemGap,
@@ -272,7 +285,7 @@ function lineConfig(model) {
                         }
                     }
                 }],
-                series: getLineSeries(fontSize, series),
+                series: getLineSeries(fontSize, series, areaconfig),
                 dataZoom: series.length > 0 ? [
                     {
                         type: 'slider',
@@ -289,6 +302,11 @@ function lineConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
+    if(Number(legendconfig.left) >= 0) {
+        o.config.option.legend.left = Number(legendconfig.left)+'%';
+    }else {
+        o.config.option.legend.right = '5%';
+    }
     return o;
 }
 
@@ -353,15 +371,16 @@ function getChartsTitle(fontSize, layout, title, subtitle) {
     return title;
 }
 
-function getBarSeries(fontSize, layout, series) {
+function getBarSeries(fontSize, layout, series, areaconfig) {
     let s = [];
     const model = {
         type: 'bar',
         label: {
             normal: {
-                show: true,
-                position: 'top',
-                formatter: '{c}',
+                show: !areaconfig.hideLabel,
+                position: areaconfig.labelPosition || 'top',
+                distance: areaconfig.labelDistance ? Number(areaconfig.labelDistance) : 5,
+                formatter: areaconfig.labelFormatter || '{c}',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * .7
                 }
@@ -369,20 +388,39 @@ function getBarSeries(fontSize, layout, series) {
         },
         barGap: '10%'
     }
+    if(areaconfig.barMaxWidth) {
+        model.barMaxWidth = areaconfig.barMaxWidth;
+    }
+    if(areaconfig.barWidth) {
+        model.barWidth = areaconfig.barWidth;
+    }
+    if(areaconfig.barMinHeight) {
+        model.barMinHeight = areaconfig.barMinHeight;
+    }
+    if(areaconfig.barGap) {
+        model.barGap = areaconfig.barGap+"%";
+    }
     s = series.map((v, i) => {
         let m = Object.assign({}, model);
         m.name = v.name;
         m.data = v.data instanceof Array ? v.data : [v.data];
         return m;
     });
+    
     return s;
 }
 
-function getLineSeries(fontSize, series) {
+function getLineSeries(fontSize, series, areaconfig) {
     let s = [];
     const model = {
         type: 'line',
-        smooth: false,
+        smooth: areaconfig.smooth || false,
+        lineStyle: {
+            normal: {
+                width: areaconfig.lineWidth || 2,
+                type: areaconfig.lineType || 'solid'
+            }
+        },
         markLine: {
             symbol: '',
             label: {
@@ -396,11 +434,15 @@ function getLineSeries(fontSize, series) {
                 xAxis: ''
             }]
         },
+        symbol: areaconfig.symbol || 'circle',
+        symbolSize: areaconfig.symbolSize || 4,
+        showSymbol: !areaconfig.hideSymbol,
         label: {
             normal: {
-                show: true,
-                position: 'inside',
-                formatter: '{c}',
+                show: !areaconfig.hideLabel,
+                position: areaconfig.labelPosition || 'top',
+                distance: areaconfig.labelDistance ? Number(areaconfig.labelDistance) : 5,
+                formatter: areaconfig.labelFormatter || '{c}',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * .7
                 }
@@ -463,7 +505,7 @@ function getPieSeries(fontSize, layout, series, pieconfig) {
 function getPieLegend(fontSize, layout, series, legendconfig) {
     let hide = legendconfig.hide == 'true',
         top = legendconfig.top ? (legendconfig.top)+'%' : null,
-        right = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
+        left = legendconfig.left ? legendconfig.left+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -471,7 +513,7 @@ function getPieLegend(fontSize, layout, series, legendconfig) {
     let legend = {
         hide_: hide,
         top_: top,
-        right_: right,
+        left_: left,
         width: legendconfig.width,
         height: legendconfig.height,
         orient_: legendconfig.orient,

kanban-client/app/component/converter.js

@@ -112,14 +112,14 @@ function tableConfig(model) {
 
 function barConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, areaconfig, color } = config;
 
     legendconfig = parseObjectStr(legendconfig);
+    areaconfig = parseObjectStr(areaconfig);
     color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(',')),
         legendTop = legendconfig.top ? (legendconfig.top)+'%' : null,
-        legendRight = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -136,14 +136,18 @@ function barConfig(model) {
                     }
                 },
                 grid: {
+                    containLabel: true,
+                    top_: areaconfig.top ? areaconfig.top+'%' : null,
+                    bottom_: areaconfig.bottom ? areaconfig.bottom+'%' : null,
+                    left_: areaconfig.left ? areaconfig.left+'%' : null,
+                    right_: areaconfig.right ? areaconfig.right+'%' : null,
                     top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    show: !legendconfig.hide,
                     top_: legendTop,
                     top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-                    right: legendRight || '5%',
                     padding: 0,
                     orient: legendconfig.orient || 'horizontal',
                     itemGap: itemGap,
@@ -187,7 +191,7 @@ function barConfig(model) {
                         }
                     }
                 }],
-                series: getBarSeries(fontSize, layout, series)
+                series: getBarSeries(fontSize, layout, series, areaconfig)
             }
         },
         layout: getLayout(layout)
@@ -195,19 +199,24 @@ function barConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
+    if(Number(legendconfig.left) >= 0) {
+        o.config.option.legend.left = Number(legendconfig.left)+'%';
+    }else {
+        o.config.option.legend.right = '5%';
+    }
     return o;
 }
 
 function lineConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, areaconfig, color } = config;
     
     legendconfig = parseObjectStr(legendconfig);
+    areaconfig = parseObjectStr(areaconfig);
     color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(',')),
         legendTop = legendconfig.top ? (legendconfig.top)+'%' : null,
-        legendRight = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -221,14 +230,18 @@ function lineConfig(model) {
                     trigger: 'axis'
                 },
                 grid: {
+                    containLabel: true,
+                    top_: areaconfig.top ? areaconfig.top+'%' : null,
+                    bottom_: areaconfig.bottom ? areaconfig.bottom+'%' : null,
+                    left_: areaconfig.left ? areaconfig.left+'%' : null,
+                    right_: areaconfig.right ? areaconfig.right+'%' : null,
                     top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    show: !legendconfig.hide,
                     top_: legendTop,
                     top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-                    right: legendRight || '5%',
                     padding: 0,
                     orient: legendconfig.orient || 'horizontal',
                     itemGap: itemGap,
@@ -272,7 +285,7 @@ function lineConfig(model) {
                         }
                     }
                 }],
-                series: getLineSeries(fontSize, series),
+                series: getLineSeries(fontSize, series, areaconfig),
                 dataZoom: series.length > 0 ? [
                     {
                         type: 'slider',
@@ -289,6 +302,11 @@ function lineConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
+    if(Number(legendconfig.left) >= 0) {
+        o.config.option.legend.left = Number(legendconfig.left)+'%';
+    }else {
+        o.config.option.legend.right = '5%';
+    }
     return o;
 }
 
@@ -353,15 +371,16 @@ function getChartsTitle(fontSize, layout, title, subtitle) {
     return title;
 }
 
-function getBarSeries(fontSize, layout, series) {
+function getBarSeries(fontSize, layout, series, areaconfig) {
     let s = [];
     const model = {
         type: 'bar',
         label: {
             normal: {
-                show: true,
-                position: 'top',
-                formatter: '{c}',
+                show: !areaconfig.hideLabel,
+                position: areaconfig.labelPosition || 'top',
+                distance: areaconfig.labelDistance ? Number(areaconfig.labelDistance) : 5,
+                formatter: areaconfig.labelFormatter || '{c}',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * .7
                 }
@@ -369,20 +388,39 @@ function getBarSeries(fontSize, layout, series) {
         },
         barGap: '10%'
     }
+    if(areaconfig.barMaxWidth) {
+        model.barMaxWidth = areaconfig.barMaxWidth;
+    }
+    if(areaconfig.barWidth) {
+        model.barWidth = areaconfig.barWidth;
+    }
+    if(areaconfig.barMinHeight) {
+        model.barMinHeight = areaconfig.barMinHeight;
+    }
+    if(areaconfig.barGap) {
+        model.barGap = areaconfig.barGap+"%";
+    }
     s = series.map((v, i) => {
         let m = Object.assign({}, model);
         m.name = v.name;
         m.data = v.data instanceof Array ? v.data : [v.data];
         return m;
     });
+    
     return s;
 }
 
-function getLineSeries(fontSize, series) {
+function getLineSeries(fontSize, series, areaconfig) {
     let s = [];
     const model = {
         type: 'line',
-        smooth: false,
+        smooth: areaconfig.smooth || false,
+        lineStyle: {
+            normal: {
+                width: areaconfig.lineWidth || 2,
+                type: areaconfig.lineType || 'solid'
+            }
+        },
         markLine: {
             symbol: '',
             label: {
@@ -396,11 +434,15 @@ function getLineSeries(fontSize, series) {
                 xAxis: ''
             }]
         },
+        symbol: areaconfig.symbol || 'circle',
+        symbolSize: areaconfig.symbolSize || 4,
+        showSymbol: !areaconfig.hideSymbol,
         label: {
             normal: {
-                show: true,
-                position: 'inside',
-                formatter: '{c}',
+                show: !areaconfig.hideLabel,
+                position: areaconfig.labelPosition || 'top',
+                distance: areaconfig.labelDistance ? Number(areaconfig.labelDistance) : 5,
+                formatter: areaconfig.labelFormatter || '{c}',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * .7
                 }
@@ -419,6 +461,7 @@ function getLineSeries(fontSize, series) {
 function getPieSeries(fontSize, layout, series, pieconfig) {
     let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
 
+    
     const model = {
         type: 'pie',
         centerx: pieconfig.centerx,
@@ -462,7 +505,7 @@ function getPieSeries(fontSize, layout, series, pieconfig) {
 function getPieLegend(fontSize, layout, series, legendconfig) {
     let hide = legendconfig.hide == 'true',
         top = legendconfig.top ? (legendconfig.top)+'%' : null,
-        right = legendconfig.left ? (100 - legendconfig.left)+'%' : null,
+        left = legendconfig.left ? legendconfig.left+'%' : null,
         itemGap = legendconfig.itemGap ? Number(legendconfig.itemGap) : layout.w / 10,
         itemWidth = legendconfig.itemWidth ? Number(legendconfig.itemWidth) : 25,
         itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14;
@@ -470,7 +513,7 @@ function getPieLegend(fontSize, layout, series, legendconfig) {
     let legend = {
         hide_: hide,
         top_: top,
-        right_: right,
+        left_: left,
         width: legendconfig.width,
         height: legendconfig.height,
         orient_: legendconfig.orient,

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

@@ -16,8 +16,10 @@ export default function resetchart(option, node, sc) {
 
 function resetBarOption(option, node) {
     option.title.subtext = node.offsetHeight < 300 ? '' : option.title.subtext,
-    option.grid.top = node.offsetHeight < 310 ? '35%' : '28%';
-    option.grid.bottom = node.offsetHeight < 310 ? '20%' : '16%';
+    option.grid.top = option.grid.top_ ? option.grid.top_ : (node.offsetHeight < 310 ? '35%' : '28%');
+    option.grid.bottom = option.grid.bottom_ ? option.grid.bottom_ : (node.offsetHeight < 310 ? '20%' : '16%');
+    option.grid.left = option.grid.left_ ? option.grid.left_ : '10%';
+    option.grid.right = option.grid.right_ ? option.grid.right_ : '10%';
     option.legend.top = option.legend.top_ ? option.legend.top_ : (node.offsetHeight < 310 ? '20%' : '18%');
     if(node.offsetHeight >= 450 && node.offsetWidth / option.xAxis[0].data.length >= 80) {
         option.xAxis[0].nameLocation = 'middle';
@@ -29,8 +31,10 @@ function resetBarOption(option, node) {
 }
 
 function resetLineOption(option, node, sc) {
-    option.grid.top = node.offsetHeight < 310 ? '35%' : '28%';
-    option.grid.bottom = node.offsetHeight < 310 ? '20%' : '16%';
+    option.grid.top = option.grid.top_ ? option.grid.top_ : (node.offsetHeight < 310 ? '35%' : '28%');
+    option.grid.bottom = option.grid.bottom_ ? option.grid.bottom_ : (node.offsetHeight < 310 ? '20%' : '16%');
+    option.grid.left = option.grid.left_ ? option.grid.left_ : '10%';
+    option.grid.right = option.grid.right_ ? option.grid.right_ : '10%';
     option.legend.top = option.legend.top_ ? option.legend.top_ : (node.offsetHeight < 310 ? '20%' : '18%');
     if(node.offsetHeight >= 450 && node.offsetWidth / option.xAxis[0].data.length >= 80) {
         option.xAxis[0].nameLocation = 'middle';
@@ -44,9 +48,13 @@ function resetLineOption(option, node, sc) {
 
 function resetPieOption(option, node) {
     option.animation = true;
-    option.legend.show = option.legend.hide_ ? false : node.offsetHeight > 300;
+    option.legend.show = (option.legend.hide_ == true) ? false : node.offsetHeight > 300;
     option.legend.top = option.legend.top_ ? option.legend.top_ : (node.offsetHeight > 300 ? '20%' : '15%');
-    option.legend.right = option.legend.right_ ? option.legend.right_ : (node.offsetHeight > 300 ? 'auto' : '15%');
+    if(option.legend.left_) {
+        option.legend.left = option.legend.left_;
+    }else {
+        option.legend.right = node.offsetHeight > 300 ? 'auto' : '15%';
+    }
     option.legend.orient = option.legend.orient_ ? option.legend.orient_ : (node.offsetHeight > 300 ? 'horizontal' : 'vertical');