引入echarts主题：dark

kanban-client/README.md

@@ -4,7 +4,7 @@
 * 数据刷新测试
 ##### 20170822
 * 将props的修改绑定到state实现全局刷新。
-* 
+* 14:38 引入ecarts主题“dark”
 #### 运行
 * 本地运行
 ```

kanban-client/app/data/BoardConfig.json

@@ -3,10 +3,17 @@
     "config": {
         "option": {
             "title": {
-                "text": "直通率1\nFirst Pass Yield(FPY)",
+                "text": "直通率1",
+                "subtext": "First Pass Yield(FPY)",
                 "textAlign": "center",
                 "left": "50%",
-                "right": "50%"
+                "right": "50%",
+                "itemGap": 0,
+                "padding": 0
+            },
+            "grid": {
+                "show": true,
+                "top": "20%"
             },
             "tooltip": {
                 "trigger": "axis",
@@ -19,14 +26,19 @@
                 "orient": "vertical",
                 "show": true,
                 "data": [
-                    {"name": "直通率","textStyle": {"color": "red"}}, 
+                    {"name": "直通率"}, 
                     {"name": "收益率"}
                 ]
             },
             "xAxis": [{
                 "type": "category",
                 "data": ["08:00~08:59", "09:00~09:59", "10:00~10:59", "11:00~11:59"],
-                "fetch": "xaixsFetch"
+                "fetch": "xaixsFetch",
+                "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
+                }
             }],
             "yAxis": [{
                 "type": "value",
@@ -34,6 +46,11 @@
                 "max": 1,
                 "axisLabel": {
                     "formatter": "perRender"
+                },
+                "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
                 }
             }],
             "series": [{
@@ -43,10 +60,7 @@
                     "normal": {
                         "show": true,
                         "position": "inside",
-                        "formatter": "{c}",
-                        "textStyle": {
-                            "color": "black"
-                        }
+                        "formatter": "{c}"
                     }
                 },
                 "data":[0.938, 1, 1],
@@ -58,10 +72,7 @@
                     "normal": {
                         "show": true,
                         "position": "inside",
-                        "formatter": "{c}",
-                        "textStyle": {
-                            "color": "black"
-                        }
+                        "formatter": "{c}"
                     }
                 },
                 "data":[0.913, 0.986, 0.929, 1],
@@ -78,10 +89,13 @@
         "option": {
           "title":{
             "show": true,
-            "text": "投入/产出柱状图\nInput/outPut Histogram",
+            "text": "投入/产出柱状图",
+            "subtext": "Input/outPut Histogram",
             "textAlign": "center",
             "left": "50%",
-            "right": "50%"
+            "right": "50%",
+            "itemGap": 0,
+            "padding": 0
           },
           "color": ["#6395EC", "#FFFE03"],
           "tooltip" : {
@@ -100,19 +114,33 @@
             ]
           },
           "xAxis" : [
+            {
+                "type": "category",
+                "data": [
+                    "08:00~08:59",
+                    "09:00~09:59",
+                    "10:00~10:59"
+                ],
+                "axisTick": {
+                    "alignWithLabel": true
+                },
+                "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
+                }
+            }
+        ],
+        "yAxis" : [
               {
-                  "type" : "category",
-                  "data" : ["08:00~08:59", "09:00~09:59", "10:00~10:59"],
-                  "axisTick": {
-                      "alignWithLabel": true
+                  "type" : "value",
+                  "axisLine": {
+                      "lineStyle": {
+                          "color": "white"
+                      }
                   }
               }
           ],
-          "yAxis" : [
-              {
-                  "type" : "value"
-              }
-          ],
           "series" : [
               {
                   "name":"投入",
@@ -156,11 +184,14 @@
     "config": {
         "option": {
             "title": {
-                "text": "前五大不良代码\nTop 5 Error code",
+                "text": "前五大不良代码",
+                "subtext": "Top 5 Error code",
                 "textAlign": "center",
                 "top": "5",
                 "left": "50%",
-                "right": "50%"
+                "right": "50%",
+                "itemGap": 0,
+                "padding": 0
             },
             "tooltip" : {
                 "trigger": "item",

kanban-client/app/data/BoardConfig2.json

@@ -3,10 +3,13 @@
     "config": {
         "option": {
             "title": {
-                "text": "直通率2\nFirst Pass Yield(FPY)",
+                "text": "直通率2",
+                "subtext": "First Pass Yield(FPY)",
                 "textAlign": "center",
                 "left": "50%",
-                "right": "50%"
+                "right": "50%",
+                "itemGap": 0,
+                "padding": 0
             },
             "tooltip": {
                 "trigger": "axis",
@@ -19,14 +22,19 @@
                 "orient": "vertical",
                 "show": true,
                 "data": [
-                    {"name": "直通率","textStyle": {"color": "red"}}, 
+                    {"name": "直通率"}, 
                     {"name": "收益率"}
                 ]
             },
             "xAxis": [{
                 "type": "category",
                 "data": ["12:00~12:59", "13:00~13:59", "14:00~14:59", "15:00~15:59"],
-                "fetch": "xaixsFetch"
+                "fetch": "xaixsFetch",
+                "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
+                }
             }],
             "yAxis": [{
                 "type": "value",
@@ -34,6 +42,11 @@
                 "max": 1,
                 "axisLabel": {
                     "formatter": "perRender"
+                },
+                "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
                 }
             }],
             "series": [{
@@ -43,10 +56,7 @@
                     "normal": {
                         "show": true,
                         "position": "inside",
-                        "formatter": "{c}",
-                        "textStyle": {
-                            "color": "black"
-                        }
+                        "formatter": "{c}"
                     }
                 },
                 "data":[0.738, 1, 0.564, 0.900],
@@ -58,10 +68,7 @@
                     "normal": {
                         "show": true,
                         "position": "inside",
-                        "formatter": "{c}",
-                        "textStyle": {
-                            "color": "black"
-                        }
+                        "formatter": "{c}"
                     }
                 },
                 "data":[0.683, 0.965, 0.789, 0.911],
@@ -78,10 +85,13 @@
         "option": {
           "title":{
             "show": true,
-            "text": "投入/产出柱状图\nInput/outPut Histogram",
+            "text": "投入/产出柱状图",
+            "subtext": "Input/outPut Histogram",
             "textAlign": "center",
             "left": "50%",
-            "right": "50%"
+            "right": "50%",
+            "itemGap": 0,
+            "padding": 0
           },
           "color": ["#6395EC", "#FFFE03"],
           "tooltip" : {
@@ -105,12 +115,22 @@
                   "data" : ["11:00~11:59", "12:00~12:59", "13:00~13:59"],
                   "axisTick": {
                       "alignWithLabel": true
-                  }
+                  },
+                  "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
+                }
               }
           ],
           "yAxis" : [
               {
-                  "type" : "value"
+                  "type" : "value",
+                  "axisLine": {
+                    "lineStyle": {
+                        "color": "white"
+                    }
+                }
               }
           ],
           "series" : [
@@ -156,11 +176,14 @@
     "config": {
         "option": {
             "title": {
-                "text": "前五大不良代码\nTop 5 Error code",
+                "text": "前五大不良代码",
+                "subtext": "Top 5 Error code",
                 "textAlign": "center",
                 "top": "5",
                 "left": "50%",
-                "right": "50%"
+                "right": "50%",
+                "itemGap": 0,
+                "padding": 0
             },
             "tooltip" : {
                 "trigger": "item",

kanban-client/src/Charts/ECharts.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import RenderUtils from '../../app/utils/RenderUtils.js';
-
 // 导入echarts
 import ReactEcharts from 'echarts-for-react';
+import './dark.js';
 
 export class ReactEchart extends React.Component {
     constructor(props) {
@@ -48,6 +48,7 @@ export class ReactEchart extends React.Component {
         const { option } = this.newProps;
         let opts = Object.assign({},option);
         this.initOption(opts, 'option_');
+        
         return opts;
     }
 
@@ -95,7 +96,9 @@ export class ReactEchart extends React.Component {
             <ReactEcharts
             option={this.state.option}
             style={{height: '100%', width: '100%'}}
-            className='react-echarts' />
+            className='react-echarts'
+            theme='dark'
+             />
         )
     }
 }

kanban-client/src/Charts/dark.js

@@ -0,0 +1,147 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    var contrastColor = '#eee';
+    var axisCommon = function () {
+        return {
+            axisLine: {
+                lineStyle: {
+                    color: contrastColor
+                }
+            },
+            axisTick: {
+                lineStyle: {
+                    color: contrastColor
+                }
+            },
+            axisLabel: {
+                textStyle: {
+                    color: contrastColor
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#aaa'
+                }
+            },
+            splitArea: {
+                areaStyle: {
+                    color: contrastColor
+                }
+            }
+        };
+    };
+
+    var colorPalette = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'];
+    var theme = {
+        color: colorPalette,
+        backgroundColor: '#333',
+        tooltip: {
+            axisPointer: {
+                lineStyle: {
+                    color: contrastColor
+                },
+                crossStyle: {
+                    color: contrastColor
+                }
+            }
+        },
+        legend: {
+            textStyle: {
+                color: contrastColor
+            }
+        },
+        textStyle: {
+            color: contrastColor
+        },
+        title: {
+            textStyle: {
+                color: contrastColor
+            }
+        },
+        toolbox: {
+            iconStyle: {
+                normal: {
+                    borderColor: contrastColor
+                }
+            }
+        },
+        dataZoom: {
+            textStyle: {
+                color: contrastColor
+            }
+        },
+        timeline: {
+            lineStyle: {
+                color: contrastColor
+            },
+            itemStyle: {
+                normal: {
+                    color: colorPalette[1]
+                }
+            },
+            label: {
+                normal: {
+                    textStyle: {
+                        color: contrastColor
+                    }
+                }
+            },
+            controlStyle: {
+                normal: {
+                    color: contrastColor,
+                    borderColor: contrastColor
+                }
+            }
+        },
+        timeAxis: axisCommon(),
+        logAxis: axisCommon(),
+        valueAxis: axisCommon(),
+        categoryAxis: axisCommon(),
+
+        line: {
+            symbol: 'circle'
+        },
+        graph: {
+            color: colorPalette
+        },
+        gauge: {
+            title: {
+                textStyle: {
+                    color: contrastColor
+                }
+            }
+        },
+        candlestick: {
+            itemStyle: {
+                normal: {
+                    color: '#FD1050',
+                    color0: '#0CF49B',
+                    borderColor: '#FD1050',
+                    borderColor0: '#0CF49B'
+                }
+            }
+        }
+    };
+    theme.categoryAxis.splitLine.show = false;
+    echarts.registerTheme('dark', theme);
+}));