折线图区域填充效果

kanban-client/README.md

@@ -76,6 +76,8 @@ columns[i].rowStyle---------------指定列数据列样式
 * 看板多画面展示接口调整
 ##### 20180611
 * 消息提示框字段调整
+##### 20190108
+* 折线图区域填充实现
 
 #### 已知小bug
 * 多模板看板第一次进入需要多等待一个刷新时才会切换到下一个模板。

kanban-client/app/component/converter.js

@@ -555,7 +555,15 @@ function getBarSeries(fontSize, layout, series, barconfig) {
 }
 
 function getLineSeries(fontSize, series, lineconfig) {
-    let s = [];
+    let s = [],
+    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,
@@ -609,6 +617,60 @@ function getLineSeries(fontSize, series, lineconfig) {
         m.name = v.name;
         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]
+                }
+            }
+        }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(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
+                    }
+                }
+            }
+        }
+
+        m.areaStyle = areaStyle;
+
         return m;
     });
     return s;

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

@@ -6,13 +6,13 @@ import { converter } from './converter.js';
 import URL from '../constants/url.dev.json';
 import 'whatwg-fetch';
 
-import tempdata from '../data/testAll.json';
+import tempdata from '../data/testline.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local ';
+        this.dev = 'local';
         this.index = 0;
         this.state = {
             titleHeight: 0,

kanban-client/app/data/testline.json

@@ -26,7 +26,7 @@
                     "ytype": "numeric",
                     "xconfig": "{\"position\":\"bottom\",\"nameLocation\":\"end\",\"nameGap\":\"40\",\"nameRotate\":\"30\",\"labelRotate\":\"45\"}",
                     "ytitle": "数量",
-                    "lineconfig": "{\"smooth\":true,\"hideLabel\":true,\"labelFormatter\":\"{b}:{c}\"}",
+                    "lineconfig": "{\"areaStyle\":\"{\\\"type\\\":\\\"horizontal\\\",\\\"colors\\\":\\\"[[\\\\\\\"#00FFFF\\\\\\\",\\\\\\\"#00FF00\\\\\\\"]]\\\",\\\"opacity\\\":\\\"1\\\"}\"}",
                     "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": "已启动"