pie chart 支持更多的配置项

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

@@ -1,5 +1,4 @@
 function converter(data) {
-    console.log(data);
     let { content } = data;
     let { title, items } = content;
     let itemsarr = items ? (items instanceof Array ? items : [items]) : [];
@@ -43,27 +42,27 @@ function formConfig(model) {
     data = data.map((d) => {
         d.field = {
             text: d.field.text,
-            style: parseStyleStr(d.field.style),
+            style: parseObjectStr(d.field.style),
             width: d.field.width
         };
         d.value = {
             text: d.value.text,
-            style: parseStyleStr(d.value.style),
+            style: parseObjectStr(d.value.style),
             width: d.value.width
         };
         d.render = renderFunction(d.render);
         return d;
     });
     if(header) {
-        header.style = parseStyleStr(header.style || '{}');
+        header.style = parseObjectStr(header.style || '{}');
     }
     let c = {
         type: 'form',
         config: {
             fontSize: fontSize || getFontSize(),
             header: header,
-            fieldStyle: parseStyleStr(fieldStyle),
-            valueStyle: parseStyleStr(valueStyle),
+            fieldStyle: parseObjectStr(fieldStyle),
+            valueStyle: parseObjectStr(valueStyle),
             columns,
             data
         },
@@ -80,7 +79,7 @@ function tableConfig(model) {
     columns.map((c, i) => allWidth += (c.width || 100));
     data = data ? ( ( data instanceof Array ) ? data : [data] ) : [];
     if(title) {
-        title.style = parseStyleStr(title.style || '{}');
+        title.style = parseObjectStr(title.style || '{}');
     }
     return {
         type: 'table',
@@ -94,8 +93,8 @@ function tableConfig(model) {
                 v.key = i;
                 v.width ? v.width = getScreenSize().width * (layout.w/100) * (v.width/ allWidth) : '';
                 v.render = renderFunction(v.render);
-                v.headerRowStyle = parseStyleStr(v.headerrowstyle);
-                v.rowStyle = parseStyleStr(v.rowstyle);
+                v.headerRowStyle = parseObjectStr(v.headerrowstyle);
+                v.rowStyle = parseObjectStr(v.rowstyle);
                 return v;
             }),
             data: data.map( (v, i) => {
@@ -104,8 +103,8 @@ function tableConfig(model) {
                 }
                 return v || {};
             } ),
-            headerRowsStyle: parseStyleStr(headerrowsstyle),
-            rowsStyle: parseStyleStr(rowsstyle),
+            headerRowsStyle: parseObjectStr(headerrowsstyle),
+            rowsStyle: parseObjectStr(rowsstyle),
         },
         layout: getLayout(layout)
     }
@@ -113,10 +112,19 @@ function tableConfig(model) {
 
 function barConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+
+    legendconfig = parseObjectStr(legendconfig);
+    color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
-    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
-    return {
+    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;
+    
+    let o = {
         type: 'charts',
         config: {
             option: {
@@ -132,11 +140,18 @@ function barConfig(model) {
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
-                    right: '5%',
+                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    top_: legendTop,
+                    top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+                    right: legendRight || '5%',
                     padding: 0,
-                    orient: 'horizontal',
-                    itemGap: layout.w,
+                    orient: legendconfig.orient || 'horizontal',
+                    itemGap: itemGap,
+                    itemWidth: itemWidth,
+                    itemHeight: itemHeight,
+                    textStyle: {
+                        fontSize: getFontSize() * 0.7
+                    },
                     data: series.map((v, i) => {
                         return v.name
                     })
@@ -148,29 +163,56 @@ function barConfig(model) {
                     nameGap: 5,
                     nameRotate: 270,
                     nameLocation: 'end',
+                    nameTextStyle: {
+                        fontSize: getFontSize() * .7
+                    },
                     axisLabel: {
                         rotate: getScreenSize().width * layout.w / xf.length / 100 < 80 ? 45 : 0,
-                        interval: 0
+                        interval: 0,
+                        textStyle: {
+                            fontSize: getFontSize() * .7
+                        }
                     }
                 }],
                 yAxis: [{
                     name: ytitle,
                     nameRotate: .1,
                     type: ytype == 'numeric' ? 'value' : ytype,
+                    nameTextStyle: {
+                        fontSize: getFontSize() * .7
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: getFontSize() * .7
+                        }
+                    }
                 }],
                 series: getBarSeries(fontSize, layout, series)
             }
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function lineConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    
+    legendconfig = parseObjectStr(legendconfig);
+    color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
-    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
-    return {
+    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;
+
+    let o = {
         type: 'charts',
         config: {
             option: {
@@ -183,11 +225,18 @@ function lineConfig(model) {
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
-                    right: '5%',
+                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    top_: legendTop,
+                    top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+                    right: legendRight || '5%',
                     padding: 0,
-                    orient: 'horizontal',
-                    itemGap: layout.w,
+                    orient: legendconfig.orient || 'horizontal',
+                    itemGap: itemGap,
+                    itemWidth: itemWidth,
+                    itemHeight: itemHeight,
+                    textStyle: {
+                        fontSize: fontSize || getFontSize() * 0.7
+                    },
                     data: series.map((v, i) => {
                         return v.name
                     })
@@ -199,15 +248,29 @@ function lineConfig(model) {
                     nameRotate: 270,
                     nameLocation: 'end',
                     nameGap: 5,
+                    nameTextStyle: {
+                        fontSize: fontSize || getFontSize() * .7
+                    },
                     axisLabel: {
                         rotate: getScreenSize().width * layout.w / xf.length / 100 < 80 ? 45 : 0,
-                        interval: 0
+                        interval: 0,
+                        textStyle: {
+                            fontSize: fontSize || getFontSize() * .7
+                        }
                     }
                 }],
                 yAxis: [{
                     name: ytitle,
                     nameRotate: .1,
-                    type: ytype == 'numeric' ? 'value' : ytype
+                    type: ytype == 'numeric' ? 'value' : ytype,
+                    nameTextStyle: {
+                        fontSize: fontSize || getFontSize() * .7
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: fontSize || getFontSize() * .7
+                        }
+                    }
                 }],
                 series: getLineSeries(fontSize, series),
                 dataZoom: series.length > 0 ? [
@@ -223,17 +286,24 @@ function lineConfig(model) {
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function pieConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, series } = config;
+    let { fontSize, title, subtitle, series, color, legendconfig, pieconfig } = config;
+    color = eval(color);
+    legendconfig = parseObjectStr(legendconfig);
+    pieconfig = parseObjectStr(pieconfig);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     series = series.map((v, i) => {
         v.value = v.data;
         return v;
     });
-    return {
+    let o = {
         type: 'charts',
         config: {
             option: {
@@ -242,12 +312,17 @@ function pieConfig(model) {
                     trigger: 'item',
                     formatter: '{b} : {c} ({d}%)'
                 },
-                legend: getPieLegend(fontSize, layout, series),
-                series: getPieSeries(fontSize, layout, series)
+                legend: getPieLegend(fontSize, layout, series, legendconfig),
+                series: getPieSeries(fontSize, layout, series, pieconfig),
+                animation: !pieconfig.centerx && !pieconfig.centery
             }
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function renderFunction(funcStr) {
@@ -263,10 +338,12 @@ function getChartsTitle(fontSize, layout, title, subtitle) {
         subtext: layout.h * getScreenSize().height / 100 < 300 ? '' : subtitle,
         textAlign: 'center',
         textStyle: {
-            verticalAlign: 'top'
+            verticalAlign: 'top',
+            fontSize: fontSize || getFontSize() * 1
         },
         subtextStyle: {
-            verticalAlign: 'top'
+            verticalAlign: 'top',
+            fontSize: fontSize || getFontSize() * 0.75
         },
         left: '50%',
         right: '50%',
@@ -285,6 +362,9 @@ function getBarSeries(fontSize, layout, series) {
                 show: true,
                 position: 'top',
                 formatter: '{c}',
+                textStyle: {
+                    fontSize: fontSize || getFontSize() * .7
+                }
             }
         },
         barGap: '10%'
@@ -320,7 +400,10 @@ function getLineSeries(fontSize, series) {
             normal: {
                 show: true,
                 position: 'inside',
-                formatter: '{c}'
+                formatter: '{c}',
+                textStyle: {
+                    fontSize: fontSize || getFontSize() * .7
+                }
             }
         }
     }
@@ -333,15 +416,22 @@ function getLineSeries(fontSize, series) {
     return s;
 }
 
-function getPieSeries(fontSize, layout, series) {
+function getPieSeries(fontSize, layout, series, pieconfig) {
     let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
+
+    
     const model = {
         type: 'pie',
-        markPoint: {
-            symbol: 'circle'
-        },
+        centerx: pieconfig.centerx,
+        centery: pieconfig.centery,
+        radius1: pieconfig.radius1,
+        radius2: pieconfig.radius2,
         label: {
             normal: {
+                show: !pieconfig.hideLabel,
+                textStyle: {
+                    fontSize: fontSize || getFontSize() * 0.7
+                },
                 formatter: '{b}:  {c} \n {d}%'
             }
         }
@@ -370,11 +460,28 @@ function getPieSeries(fontSize, layout, series) {
     return [s];
 }
 
-function getPieLegend(fontSize, layout, series) {
+function getPieLegend(fontSize, layout, series, legendconfig) {
+    let hide = legendconfig.hide == 'true',
+        top = legendconfig.top ? (legendconfig.top)+'%' : null,
+        right = 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;
+
     let legend = {
+        hide_: hide,
+        top_: top,
+        right_: right,
+        width: legendconfig.width,
+        height: legendconfig.height,
+        orient_: legendconfig.orient,
+        itemGap: itemGap,
+        itemWidth: itemWidth,
+        itemHeight : itemHeight,
         padding: 0,
-        type: 'scroll',
-        itemGap: layout.w / 10,
+        textStyle: {
+            fontSize: fontSize || getFontSize() * 0.7
+        },
         data: series.map((v, i) => {
             return v.name || 'Unkonw';
         })
@@ -393,7 +500,7 @@ function getLayout(layout) {
     return l;
 }
 
-function parseStyleStr(str) {
+function parseObjectStr(str) {
     if (!str) {
         return {};
     }

kanban-client/app/component/converter.js

@@ -42,27 +42,27 @@ function formConfig(model) {
     data = data.map((d) => {
         d.field = {
             text: d.field.text,
-            style: parseStyleStr(d.field.style),
+            style: parseObjectStr(d.field.style),
             width: d.field.width
         };
         d.value = {
             text: d.value.text,
-            style: parseStyleStr(d.value.style),
+            style: parseObjectStr(d.value.style),
             width: d.value.width
         };
         d.render = renderFunction(d.render);
         return d;
     });
     if(header) {
-        header.style = parseStyleStr(header.style || '{}');
+        header.style = parseObjectStr(header.style || '{}');
     }
     let c = {
         type: 'form',
         config: {
             fontSize: fontSize || getFontSize(),
             header: header,
-            fieldStyle: parseStyleStr(fieldStyle),
-            valueStyle: parseStyleStr(valueStyle),
+            fieldStyle: parseObjectStr(fieldStyle),
+            valueStyle: parseObjectStr(valueStyle),
             columns,
             data
         },
@@ -79,7 +79,7 @@ function tableConfig(model) {
     columns.map((c, i) => allWidth += (c.width || 100));
     data = data ? ( ( data instanceof Array ) ? data : [data] ) : [];
     if(title) {
-        title.style = parseStyleStr(title.style || '{}');
+        title.style = parseObjectStr(title.style || '{}');
     }
     return {
         type: 'table',
@@ -93,8 +93,8 @@ function tableConfig(model) {
                 v.key = i;
                 v.width ? v.width = getScreenSize().width * (layout.w/100) * (v.width/ allWidth) : '';
                 v.render = renderFunction(v.render);
-                v.headerRowStyle = parseStyleStr(v.headerrowstyle);
-                v.rowStyle = parseStyleStr(v.rowstyle);
+                v.headerRowStyle = parseObjectStr(v.headerrowstyle);
+                v.rowStyle = parseObjectStr(v.rowstyle);
                 return v;
             }),
             data: data.map( (v, i) => {
@@ -103,8 +103,8 @@ function tableConfig(model) {
                 }
                 return v || {};
             } ),
-            headerRowsStyle: parseStyleStr(headerrowsstyle),
-            rowsStyle: parseStyleStr(rowsstyle),
+            headerRowsStyle: parseObjectStr(headerrowsstyle),
+            rowsStyle: parseObjectStr(rowsstyle),
         },
         layout: getLayout(layout)
     }
@@ -112,10 +112,19 @@ function tableConfig(model) {
 
 function barConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
-    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+
+    legendconfig = parseObjectStr(legendconfig);
+    color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
-    return {
+    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;
+    
+    let o = {
         type: 'charts',
         config: {
             option: {
@@ -131,11 +140,15 @@ function barConfig(model) {
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
-                    right: '5%',
+                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    top_: legendTop,
+                    top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+                    right: legendRight || '5%',
                     padding: 0,
-                    orient: 'horizontal',
-                    itemGap: layout.w,
+                    orient: legendconfig.orient || 'horizontal',
+                    itemGap: itemGap,
+                    itemWidth: itemWidth,
+                    itemHeight: itemHeight,
                     textStyle: {
                         fontSize: getFontSize() * 0.7
                     },
@@ -179,14 +192,27 @@ function barConfig(model) {
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function lineConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series } = config;
-    let xf = (xfields instanceof Array) ? xfields : (xfields.replace(['['], '').replace([']'], '').split(','));
+    let { fontSize, title, subtitle, xtitle, xtype, xfields, ytitle, ytype, yfields, series, legendconfig, color } = config;
+    
+    legendconfig = parseObjectStr(legendconfig);
+    color = eval(color);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
-    return {
+    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;
+
+    let o = {
         type: 'charts',
         config: {
             option: {
@@ -199,11 +225,15 @@ function lineConfig(model) {
                     bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%',
                 },
                 legend: {
-                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
-                    right: '5%',
+                    show: legendconfig.hide ? (legendconfig.hide == 'false') : true,
+                    top_: legendTop,
+                    top: (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+                    right: legendRight || '5%',
                     padding: 0,
-                    orient: 'horizontal',
-                    itemGap: layout.w,
+                    orient: legendconfig.orient || 'horizontal',
+                    itemGap: itemGap,
+                    itemWidth: itemWidth,
+                    itemHeight: itemHeight,
                     textStyle: {
                         fontSize: fontSize || getFontSize() * 0.7
                     },
@@ -256,31 +286,43 @@ function lineConfig(model) {
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function pieConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, subtitle, series } = config;
+    let { fontSize, title, subtitle, series, color, legendconfig, pieconfig } = config;
+    color = eval(color);
+    legendconfig = parseObjectStr(legendconfig);
+    pieconfig = parseObjectStr(pieconfig);
     series = series ? ((series instanceof Array) ? series : [series]) : [];
     series = series.map((v, i) => {
         v.value = v.data;
         return v;
     });
-    return {
+    let o = {
         type: 'charts',
         config: {
             option: {
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'item',
-                    formatter: '{a} <br/>{b} : {c} ({d}%)'
+                    formatter: '{b} : {c} ({d}%)'
                 },
-                legend: getPieLegend(fontSize, layout, series),
-                series: getPieSeries(fontSize, layout, series)
+                legend: getPieLegend(fontSize, layout, series, legendconfig),
+                series: getPieSeries(fontSize, layout, series, pieconfig),
+                animation: !pieconfig.centerx && !pieconfig.centery
             }
         },
         layout: getLayout(layout)
     }
+    if(color && color.length > 0) {
+        o.config.option.color = color;
+    }
+    return o;
 }
 
 function renderFunction(funcStr) {
@@ -374,12 +416,18 @@ function getLineSeries(fontSize, series) {
     return s;
 }
 
-function getPieSeries(fontSize, layout, series) {
+function getPieSeries(fontSize, layout, series, pieconfig) {
     let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
+
     const model = {
         type: 'pie',
+        centerx: pieconfig.centerx,
+        centery: pieconfig.centery,
+        radius1: pieconfig.radius1,
+        radius2: pieconfig.radius2,
         label: {
             normal: {
+                show: !pieconfig.hideLabel,
                 textStyle: {
                     fontSize: fontSize || getFontSize() * 0.7
                 },
@@ -411,10 +459,25 @@ function getPieSeries(fontSize, layout, series) {
     return [s];
 }
 
-function getPieLegend(fontSize, layout, series) {
+function getPieLegend(fontSize, layout, series, legendconfig) {
+    let hide = legendconfig.hide == 'true',
+        top = legendconfig.top ? (legendconfig.top)+'%' : null,
+        right = 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;
+
     let legend = {
+        hide_: hide,
+        top_: top,
+        right_: right,
+        width: legendconfig.width,
+        height: legendconfig.height,
+        orient_: legendconfig.orient,
+        itemGap: itemGap,
+        itemWidth: itemWidth,
+        itemHeight : itemHeight,
         padding: 0,
-        itemGap: layout.w / 10,
         textStyle: {
             fontSize: fontSize || getFontSize() * 0.7
         },
@@ -436,7 +499,7 @@ function getLayout(layout) {
     return l;
 }
 
-function parseStyleStr(str) {
+function parseObjectStr(str) {
     if (!str) {
         return {};
     }
@@ -473,7 +536,8 @@ function getScreenSize() {
 
 function getFontSize() {
     let { height, width } = getScreenSize();
-    return width / 300 * 2 + 16 + Math.round(width / 1000) * 2;
+    let fontSize = width / 300 * 2 + 16 + Math.round(width / 1000) * 2;
+    return fontSize;
 }
 
 export { converter };

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

@@ -5,7 +5,7 @@ import MessageBox from '../src/MsgBox/MessageBox.jsx';
 import { converter } from './converter.dev.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/refreshBug.json';
+import tempdata from '../data/bug1.json';
 
 class Factory extends React.Component {
 

kanban-client/app/data/testbar.json

@@ -10,6 +10,8 @@
                         "x": 0
                     },
                     "config": {
+                        "color": "[\"#CC99FF\",\"#FF0000\",\"#0000FF\",\"#99CC00\"]",
+                        "legendconfig": "{\"top\":\"50\",\"orient\":\"vertical\",\"itemWidth\":\"20\"}",
                         "series": [
                             {
                                 "name": "已启动",

kanban-client/app/data/testline.json

@@ -11,6 +11,7 @@
                             "x": 0
                         },
                         "config": {
+                            "color": "[\"#CC99FF\",\"#FF0000\",\"#0000FF\",\"#99CC00\"]",
                             "series": [
                                 {
                                     "name": "投入",

kanban-client/app/src/Charts/ECharts.dev.js

@@ -71,14 +71,16 @@ export class ReactEchart extends React.Component {
 
     componentDidMount() {
         let { option } = this.state;
-        if(option.series[0].type == 'line') {
-            this.splitData();
-            if(this.maxCount > this.showCount + 1) {
-                this.fullData();
-                this.RK = window.setInterval(this.scroll.bind(this), 1000);
+        if(option.series.length > 0) {
+            if(option.series[0].type == 'line') {
+                this.splitData();
+                if(this.maxCount > this.showCount + 1) {
+                    this.fullData();
+                    this.RK = window.setInterval(this.scroll.bind(this), 1000);
+                }
             }
+            this.reset();
         }
-        this.reset();
     }
 
     componentDidUpdate() {

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

@@ -64,14 +64,16 @@ export class ReactEchart extends React.Component {
 
     componentDidMount() {
         let { option } = this.state;
-        if(option.series[0].type == 'line') {
-            this.setShowCount();
-            if(this.maxCount > this.showCount + 1) {
-                this.fullData();
-                this.RK = window.setInterval(this.scroll.bind(this), 1000);
+        if(option.series.length > 0) {
+            if(option.series[0].type == 'line') {
+                this.setShowCount();
+                if(this.maxCount > this.showCount + 1) {
+                    this.fullData();
+                    this.RK = window.setInterval(this.scroll.bind(this), 1000);
+                }
             }
+            this.reset();
         }
-        this.reset();
     }
 
     componentDidUpdate() {

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

@@ -1,5 +1,7 @@
 export default function resetchart(option, node, sc) {
-    
+    if(option.series.length == 0) {
+        return option;
+    }
     let type = option.series[0].type;
     if(type == 'bar') {
         return resetBarOption(option, node);
@@ -16,7 +18,7 @@ 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.legend.top = node.offsetHeight < 310 ? '20%' : '18%';
+    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';
         option.xAxis[0].nameRotate = 0;
@@ -29,7 +31,7 @@ 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.legend.top = node.offsetHeight < 310 ? '20%' : '18%';
+    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';
         option.xAxis[0].nameRotate = 0;
@@ -41,11 +43,19 @@ function resetLineOption(option, node, sc) {
 }
 
 function resetPieOption(option, node) {
-    option.legend.show = node.offsetHeight > 300;
-    option.legend.top = (node.offsetHeight > 300 ? '20%' : '15%');
-    option.legend.right = (node.offsetHeight > 300 ? 'auto' : '5%');
-    option.legend.orient = (node.offsetHeight > 300 ? 'horizontal' : 'vertical');
-    option.series[0].radius = `${node.offsetHeight/5 > 60 ? 60 : node.offsetHeight/5}%`;
-    option.series[0].center = node.offsetHeight > 300 ? ['50%', '65%'] : ['50%', '55%'] ;
+    option.animation = true;
+    option.legend.show = option.legend.hide_ ? 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%');
+    option.legend.orient = option.legend.orient_ ? option.legend.orient_ : (node.offsetHeight > 300 ? 'horizontal' : 'vertical');
+
+
+    let cx = option.series[0].centerx ? option.series[0].centerx : '50%',
+        cy = option.series[0].centery ? option.series[0].centery : (node.offsetHeight > 300 ? '65%' : '55%'),
+        r1 = option.series[0].radius1 ? option.series[0].radius1 : 0,
+        r2 = option.series[0].radius2 ? option.series[0].radius2 : (`${node.offsetHeight/5 > 60 ? 60 : node.offsetHeight/5}%`);
+
+    option.series[0].radius = [r1, r2];
+    option.series[0].center = [cx, cy];
     return option;
 }