折线图区域填充调整

kanban-client/app/component/converter.js

@@ -1,4 +1,4 @@
-function converter(data) {
+function converter(data, theme) {
     let { content } = data;
     let { title, items } = content;
     let itemsarr = items ? (items instanceof Array ? items : [items]) : [];
@@ -7,17 +7,17 @@ function converter(data) {
     let newItems = itemsarr.map(function (v, i) {
         let type = v.type;
         if (type == 'form') {
-            return formConfig(v);
+            return formConfig(v, theme);
         } else if (type == 'table') {
-            return tableConfig(v);
+            return tableConfig(v, theme);
         } else if (type == 'bar') {
-            return barConfig(v);
+            return barConfig(v, theme);
         } else if (type == 'line') {
-            return lineConfig(v);
+            return lineConfig(v, theme);
         } else if (type == 'pie') {
-            return pieConfig(v);
+            return pieConfig(v, theme);
         } else if(type == 'mixchart') {
-            return mixChartConfig(v);
+            return mixChartConfig(v, theme);
         } else {
 
         }
@@ -37,7 +37,7 @@ function titleConfig(title) {
     }
 }
 
-function formConfig(model) {
+function formConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, header, fieldStyle, valueStyle, columns, data } = config;
     data = data ? ( ( data instanceof Array ) ? data : [data] ) : [];
@@ -73,7 +73,7 @@ function formConfig(model) {
     return c;
 }
 
-function tableConfig(model) {
+function tableConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, title, cls, render, columns, data, pagesize, interval, headerrowsstyle, rowsstyle } = config;
     let allWidth = 0;
@@ -112,7 +112,7 @@ function tableConfig(model) {
     }
 }
 
-function barConfig(model) {
+function barConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, xconfig, ytitle, ytype, yfields, series, yconfig,
         legendconfig, areaconfig, barconfig, color } = config;
@@ -131,10 +131,14 @@ function barConfig(model) {
         areaTop = Number(areaconfig.top)>=0 ? areaconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%'),
         areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
     
+    let colors = getColors(color, theme);
+    let themeColor = getThemeColor(theme);
+
     let o = {
         type: 'charts',
         config: {
             option: {
+                color: colors,
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'axis',
@@ -192,14 +196,11 @@ function barConfig(model) {
         },
         layout: getLayout(layout)
     }
-    if(color && color.length > 0) {
-        o.config.option.color = color;
-    }
     
     return o;
 }
 
-function lineConfig(model) {
+function lineConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, xconfig, ytitle, ytype, yfields, yconfig,
         series, legendconfig, areaconfig, lineconfig, color } = config;
@@ -216,11 +217,15 @@ function lineConfig(model) {
         areaRight = Number(areaconfig.right)>=0 ? areaconfig.right+'%' : '5%',
         areaTop = Number(areaconfig.top)>=0 ? areaconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%'),
         areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
-        
+    
+    let colors = getColors(color, theme);
+    let themeColor = getThemeColor(theme);
+
     let o = {
         type: 'charts',
         config: {
             option: {
+                color: colors,
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'axis'
@@ -270,7 +275,7 @@ function lineConfig(model) {
                     max: yconfig.max || null,
                     min: yconfig.min || null
                 }],
-                series: getLineSeries(fontSize, series, lineconfig),
+                series: getLineSeries(fontSize, series, lineconfig, colors, themeColor),
                 dataZoom: series.length > 0 ? [
                     {
                         type: 'slider',
@@ -284,14 +289,11 @@ function lineConfig(model) {
         },
         layout: getLayout(layout)
     }
-    if(color && color.length > 0) {
-        o.config.option.color = color;
-    }
     
     return o;
 }
 
-function mixChartConfig(model) {
+function mixChartConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, xtitle, xtype, xfields, xconfig, ybar, yline, series, legendconfig,
         areaconfig, barconfig, lineconfig, barcolor, linecolor } = config;
@@ -316,6 +318,9 @@ function mixChartConfig(model) {
         areaTop = Number(areaconfig.top)>=0 ? areaconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%'),
         areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
         
+    let barcolors = getColors(barcolor, theme);
+    let linecolors = getColors(linecolor, theme);
+    
     var o = {
         type: 'charts',
         config: {
@@ -382,7 +387,7 @@ function mixChartConfig(model) {
                         }
                     }
                 }],
-                series: getMixChartSeries(fontSize, layout, series, barconfig, lineconfig, barcolor, linecolor)
+                series: getMixChartSeries(fontSize, layout, series, barconfig, lineconfig, barcolors, linecolors)
             }
         },
         layout: getLayout(layout)
@@ -391,7 +396,7 @@ function mixChartConfig(model) {
     return o;
 }
 
-function pieConfig(model) {
+function pieConfig(model, theme) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, series, color, legendconfig, pieconfig } = config;
     color = eval(color);
@@ -414,10 +419,15 @@ function pieConfig(model) {
         v.value = v.data;
         return v;
     });
+    
+    let colors = getColors(color, theme);
+    let themeColor = getThemeColor(theme);
+
     let o = {
         type: 'charts',
         config: {
             option: {
+                color: colors,
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'item',
@@ -430,9 +440,6 @@ function pieConfig(model) {
         },
         layout: getLayout(layout)
     }
-    if(color && color.length > 0) {
-        o.config.option.color = color;
-    }
     return o;
 }
 
@@ -523,16 +530,12 @@ function getBarLegend(fontSize, layout, series, legendconfig) {
     return legend;
 }
 
-function getLineSeries(fontSize, series, lineconfig) {
+function getLineSeries(fontSize, series, lineconfig, colors, themeColor) {
     let s = [],
-    areaStyleCfg = lineconfig.areaStyle || '{}';
+    areaStyleCfg = lineconfig.areaStyle || '[]';
 
     areaStyleCfg = JSON.parse(areaStyleCfg);
 
-    let { type, color, colors, opacity } = areaStyleCfg;
-    color = JSON.parse(color || '[]');
-    colors = JSON.parse(colors || '[]');
-
     const model = {
         type: 'line',
         smooth: lineconfig.smooth || false,
@@ -587,59 +590,61 @@ function getLineSeries(fontSize, series, lineconfig) {
         m.data = v.data instanceof Array ? v.data : [v.data];
         m.label.normal.offset = offset[i];
 
-
-        let areaStyle = null;
-        if(!type) { // 无填充效果
-            areaStyle = null;
-        }else if(type == 'null') { // 纯色
-            areaStyle = {
-                opacity: Number(opacity),
-                normal: {
-                    color: color[i]
+        let areaStyle = areaStyleCfg[i];
+        if(areaStyle && areaStyle.enable && areaStyle.enable == 'true') {
+            let gradient = areaStyle.gradient || 'null'; // 渐变
+            let color = areaStyle.color || colors[i]; // 颜色
+            let opacity = areaStyle.opacity || 1;
+            let cfg = null;
+
+            if(gradient == 'null') {
+                cfg = {
+                    opacity: opacity,
+                    normal: {
+                        color: color
+                    }
                 }
-            }
-        }else if(type == 'horizontal' && colors[i] && colors[i][0] && colors[i][1]) {
-            areaStyle = {
-                opacity: Number(opacity),
-                normal: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 1,
-                        x2: 1,
-                        y2: 1,
-                        colorStops: [{
-                            offset: 0, color: colors[i][0] // 0% 处的颜色
-                        }, {
-                            offset: 1, color: colors[i][1] // 100% 处的颜色
-                        }],
-                        globalCoord: false // 缺省为 false
+            }else if(gradient == 'horizontal') {
+                cfg = {
+                    opacity: opacity,
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 1,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: color // 0% 处的颜色
+                            }, {
+                                offset: 1, color: themeColor // 100% 处的颜色
+                            }],
+                            globalCoord: true // 缺省为 false
+                        }
                     }
                 }
-            }
-        }else if(type == 'vertical' && colors[i] && colors[i][0] && colors[i][1]) {
-            areaStyle = {
-                opacity: Number(opacity),
-                normal: {
-                    color: {
-                        type: 'linear',
-                        x: 1,
-                        y: 0,
-                        x2: 1,
-                        y2: 1,
-                        colorStops: [{
-                            offset: 0, color: colors[i][0] // 0% 处的颜色
-                        }, {
-                            offset: 1, color: colors[i][1] // 100% 处的颜色
-                        }],
-                        globalCoord: false // 缺省为 false
+            }else if(gradient == 'vertical') {
+                cfg = {
+                    opacity: opacity,
+                    normal: {
+                        color: {
+                            type: 'linear',
+                            x: 1,
+                            y: 0,
+                            x2: 1,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: color // 0% 处的颜色
+                            }, {
+                                offset: 1, color: themeColor // 100% 处的颜色
+                            }],
+                            globalCoord: true // 缺省为 false
+                        }
                     }
                 }
             }
+            m.areaStyle = cfg;
         }
-
-        m.areaStyle = areaStyle;
-
         return m;
     });
     return s;
@@ -762,7 +767,7 @@ function getPieLegend(fontSize, layout, series, legendconfig) {
     return legend;
 }
 
-function getMixChartSeries(fontSize, layout, series, barconfig, lineconfig, barcolor, linecolor) {
+function getMixChartSeries(fontSize, layout, series, barconfig, lineconfig, barcolors, linecolors) {
     let s = [];
     const barmodel = {
         type: 'bar',
@@ -912,6 +917,33 @@ function getFontSize() {
     return fontSize;
 }
 
+function getColors(color, theme) {
+    let c = getDefaultColors(theme);
+    if(typeof color == 'array') {
+        for(let i = 0; i < color.length; i++) {
+            c[i] = color[i];
+        }
+    }
+    return c;
+}
+
+function getDefaultColors(theme) {
+    if(theme == 'blue') {
+        return ["#2d8bf8", "#ebbb31", "#fe7d6b", "#46e4e8", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c4ccd3"
+        ]
+    }else if(theme == 'dark') {
+        return ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42']
+    }
+}
+
+function getThemeColor(theme) {
+    if(theme == 'blue') {
+        return 'rgba(33, 73, 153, 0.6)';
+    }else if(theme == 'dark') {
+        return '#2f2e2c';
+    }
+}
+
 /**
  * 获得文本展示后的高宽
  */

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

@@ -7,13 +7,13 @@ import URL from '../constants/url.dev.json';
 import 'whatwg-fetch';
 import { getThemeConfig, applyTheme } from './theme/applyTheme.js';
 
-import tempdata from '../data/temp.json';
+import tempdata from '../data/testline.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local';
+        this.dev = 'local ';
         this.theme = 'blue';
         
         this.index = 0;
@@ -51,14 +51,17 @@ class Factory extends React.Component {
                     instance: instance
                 }, me.setRefresh);
             }
-            return json.data[0];
-        }).then(function (modelconfig) {
+            return json;
+        }).then(function (json) {
+            let modelconfig = json.data[0];
+            let theme = json.theme;
+
             if(!modelconfig.content) {
                 throw {message: '该看板内容为空'}
             }
             me.setState({
                 msg: null,
-                model: converter(modelconfig),
+                model: converter(modelconfig, theme),
             });
         }).then(() => {
             applyTheme(me.state.theme);
@@ -135,7 +138,7 @@ class Factory extends React.Component {
             this.setState({
                 theme: tempdata.theme || 'dark',
                 themeConfig: getThemeConfig(tempdata.theme, tempdata.themeConfig),
-                model: converter(tempdata.data[0]),
+                model: converter(tempdata.data[0], tempdata.theme || 'dark'),
             });
             this.refreshNext = setInterval(function () {
                 if (this.index >= tempdata.data.length-1) {
@@ -144,7 +147,7 @@ class Factory extends React.Component {
                     this.index++;
                 }
                 this.setState({
-                    model: converter(tempdata.data[this.index]),
+                    model: converter(tempdata.data[this.index],  tempdata.theme || 'dark'),
                 });
             }.bind(this), 7000)
         }else {

kanban-client/app/component/factory.js

@@ -46,14 +46,17 @@ class Factory extends React.Component {
                     instance: instance
                 }, me.setRefresh);
             }
-            return json.data[0];
-        }).then(function (modelconfig) {
+            return json;
+        }).then(function (json) {
+            let modelconfig = json.data[0];
+            let theme = json.theme;
+
             if(!modelconfig.content) {
                 throw {message: '该看板内容为空'}
             }
             me.setState({
                 msg: null,
-                model: converter(modelconfig),
+                model: converter(modelconfig, theme),
             });
         }).then(() => {
             applyTheme(me.state.theme);

kanban-client/app/component/theme/blue.js

@@ -14,7 +14,7 @@ var blue = {
         // padding: '10px 0 0 10px'
     },
     items: {
-        background: 'rgba(33, 73, 153, 0.6)',
+        background: 'rgba(33, 73, 153, 0.6)', // 需要关联更改converter中的getThemeColor
         border: '1px solid #055CB6',
         boxShadow: 'inset 0 0 43px 0 rgba(79,166,255,0.62)',
         config: {

kanban-client/app/data/testline.json

@@ -1,4 +1,5 @@
 {
+    "theme": "blue",
     "instance": {
         "enabledKanbanCodes": ["63AE858DE2B"],
         "display": "AutoSwitch",
@@ -26,13 +27,10 @@
                     "ytype": "numeric",
                     "xconfig": "{\"position\":\"bottom\",\"nameLocation\":\"end\",\"nameGap\":\"40\",\"nameRotate\":\"30\",\"labelRotate\":\"45\"}",
                     "ytitle": "数量",
-                    "lineconfig": "{\"areaStyle\":\"{\\\"type\\\":\\\"horizontal\\\",\\\"colors\\\":\\\"[[\\\\\\\"#00FFFF\\\\\\\",\\\\\\\"#00FF00\\\\\\\"]]\\\",\\\"opacity\\\":\\\"1\\\"}\"}",
+                    "lineconfig": "{\"hideLabel\":true,\"areaStyle\":\"[{}]\"}",
                     "series": [{
                         "data": [9, 4, 4, 0, 0, 1, 0, 1, 2, 2, 0, 0, 7, 1, 8, 0, 1, 0, 5, 5, 9, 0, 0, 5, 0, 1, 0, 5, 3, 1, 0, 0, 2, 0, 0, 0, 1, 5, 0, 1, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0],
                         "name": "已启动"
-                    }, {
-                        "data": [0, 1, 0, 1, 1, 0, 1, 1, 2, 1, 1, 0, 9, 1, 5, 2, 0, 1, 1, 1, 2, 1, 0, 2, 10, 3, 1, 2, 1, 3, 1, 0, 0, 1, 1, 1, 0, 1, 5, 2, 1, 0, 4, 1, 1, 0, 2, 0, 0, 0, 1],
-                        "name": "未启动"
                     }],
                     "xtitle": "姓名"
                 }

kanban-client/app/main.dev.js

@@ -29,7 +29,7 @@ if (!window.Promise) {
 	window.Promise = Promise;  
 }  
 
-var code = 'AA2A1A7B2AA';
+var code = 'B9E84580644';
 var index = 0;
 
 ReactDOM.render(