饼图图例formatter

kanban-client/app/component/converter.js

@@ -129,13 +129,8 @@ function barConfig(model) {
         areaLeft = Number(areaconfig.left)>=0 ? areaconfig.left+'%' : '5%',
         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%'),
-        
-        legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
-        legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-        itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
-        itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
-        itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
+        areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
+    
     let o = {
         type: 'charts',
         config: {
@@ -154,21 +149,7 @@ function barConfig(model) {
                     top: areaTop,
                     bottom: areaBottom
                 },
-                legend: {
-                    show: !legendconfig.hide,
-                    top: legendTop,
-                    padding: 0,
-                    orient: legendconfig.orient || 'horizontal',
-                    itemGap: itemGap,
-                    itemWidth: itemWidth,
-                    itemHeight: itemHeight,
-                    textStyle: {
-                        fontSize: getFontSize() * 0.7
-                    },
-                    data: series.map((v, i) => {
-                        return v.name
-                    })
-                },
+                legend: getBarLegend(fontSize, layout, series, legendconfig),
                 xAxis: [{
                     type: xtype,
                     data: xf,
@@ -214,7 +195,7 @@ function barConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
-    legendLeft ? (o.config.option.legend.left = legendLeft) : (o.config.option.legend.right = '5%');
+    
     return o;
 }
 
@@ -234,14 +215,8 @@ function lineConfig(model) {
         areaLeft = Number(areaconfig.left)>=0 ? areaconfig.left+'%' : '5%',
         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%'),
+        areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
         
-        legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
-        legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-        itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
-        itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
-        itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
-
     let o = {
         type: 'charts',
         config: {
@@ -257,21 +232,7 @@ function lineConfig(model) {
                     top: areaTop,
                     bottom: areaBottom
                 },
-                legend: {
-                    show: !legendconfig.hide,
-                    top: legendTop,
-                    padding: 0,
-                    orient: legendconfig.orient || 'horizontal',
-                    itemGap: itemGap,
-                    itemWidth: itemWidth,
-                    itemHeight: itemHeight,
-                    textStyle: {
-                        fontSize: fontSize || getFontSize() * 0.7
-                    },
-                    data: series.map((v, i) => {
-                        return v.name
-                    })
-                },
+                legend: getLineLegend(fontSize, layout, series, legendconfig),
                 xAxis: [{
                     type: xtype,
                     data: xf,
@@ -326,7 +287,7 @@ function lineConfig(model) {
     if(color && color.length > 0) {
         o.config.option.color = color;
     }
-    legendLeft ? (o.config.option.legend.left = legendLeft) : (o.config.option.legend.right = '5%');
+    
     return o;
 }
 
@@ -353,13 +314,8 @@ function mixChartConfig(model) {
         areaLeft = Number(areaconfig.left)>=0 ? areaconfig.left+'%' : '5%',
         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%'),
+        areaBottom = Number(areaconfig.bottom)>=0 ? areaconfig.bottom+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '16%');
         
-        legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
-        legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
-        itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
-        itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
-        itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
     var o = {
         type: 'charts',
         config: {
@@ -368,21 +324,7 @@ function mixChartConfig(model) {
                 tooltip: {
                     trigger: 'axis'
                 },
-                legend: {
-                    show: !legendconfig.hide,
-                    top: legendTop,
-                    padding: 0,
-                    orient: legendconfig.orient || 'horizontal',
-                    itemGap: itemGap,
-                    itemWidth: itemWidth,
-                    itemHeight: itemHeight,
-                    textStyle: {
-                        fontSize: fontSize || getFontSize() * 0.7
-                    },
-                    data: series.map((v, i) => {
-                        return v.name
-                    })
-                },
+                legend: getMixChartLegend(),
                 grid: {
                     containLabel: true,
                     top: areaTop,
@@ -445,7 +387,6 @@ function mixChartConfig(model) {
         },
         layout: getLayout(layout)
     };
-    legendLeft ? (o.config.option.legend.left = legendLeft) : (o.config.option.legend.right = '5%');
 
     return o;
 }
@@ -554,6 +495,34 @@ function getBarSeries(fontSize, layout, series, barconfig) {
     return s;
 }
 
+function getBarLegend(fontSize, layout, series, legendconfig) {
+    let legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
+    legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+    itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
+    itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
+    itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
+
+    let legend = {
+        show: !legendconfig.hide,
+        top: legendTop,
+        padding: 0,
+        orient: legendconfig.orient || 'horizontal',
+        itemGap: itemGap,
+        itemWidth: itemWidth,
+        itemHeight: itemHeight,
+        textStyle: {
+            fontSize: getFontSize() * 0.7
+        },
+        data: series.map((v, i) => {
+            return v.name
+        })
+    };
+
+    legendLeft ? (legend.left = legendLeft) : (legend.right = '5%');
+
+    return legend;
+}
+
 function getLineSeries(fontSize, series, lineconfig) {
     let s = [],
     areaStyleCfg = lineconfig.areaStyle || '{}';
@@ -676,6 +645,34 @@ function getLineSeries(fontSize, series, lineconfig) {
     return s;
 }
 
+function getLineLegend(fontSize, layout, series, legendconfig) {
+    let legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
+    legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+    itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
+    itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
+    itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
+
+    let legend = {
+        show: !legendconfig.hide,
+        top: legendTop,
+        padding: 0,
+        orient: legendconfig.orient || 'horizontal',
+        itemGap: itemGap,
+        itemWidth: itemWidth,
+        itemHeight: itemHeight,
+        textStyle: {
+            fontSize: fontSize || getFontSize() * 0.7
+        },
+        data: series.map((v, i) => {
+            return v.name
+        })
+    }
+
+    legendLeft ? (legend.left = legendLeft) : (legend.right = '5%');
+
+    return legend;
+}
+
 function getPieSeries(fontSize, layout, series, pieconfig) {
     let data = series.length > 0 ? series : [{name: '无数据', value: 0}];
 
@@ -726,7 +723,13 @@ function getPieLegend(fontSize, layout, series, legendconfig) {
         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;
+        itemHeight = legendconfig.itemHeight ? Number(legendconfig.itemHeight) : 14,
+        formatter = legendconfig.formatter || '{name}';
+
+    let dataMap = {};
+    series.map(function(s) {
+        dataMap[s.name] = s.value;
+    });
 
     let legend = {
         show: !hide,
@@ -744,7 +747,14 @@ function getPieLegend(fontSize, layout, series, legendconfig) {
         },
         data: series.map((v, i) => {
             return v.name || 'Unkonw';
-        })
+        }),
+        formatter: function(name) {
+            let value = dataMap[name],
+            label = '';
+
+            label = formatter.replace('{name}', name).replace('{value}', value);
+            return label;
+        }
     }
     if(series.length == 0) {
         legend.data = ['无数据']
@@ -825,6 +835,34 @@ function getMixChartSeries(fontSize, layout, series, barconfig, lineconfig, barc
     return s;
 }
 
+function getMixChartLegend(fontSize, layout, series, legendconfig) {
+    let legendLeft = Number(legendconfig.left)>=0 ? legendconfig.left+'%' : null,
+    legendTop = Number(legendconfig.top)>=0 ? legendconfig.top+'%' : (layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%'),
+    itemGap = Number(legendconfig.itemGap)>=0 ? Number(legendconfig.itemGap) : layout.w / 10,
+    itemWidth = Number(legendconfig.itemWidth)>=0 ? Number(legendconfig.itemWidth) : 25,
+    itemHeight = Number(legendconfig.itemHeight)>=0 ? Number(legendconfig.itemHeight) : 14;
+
+    let legend = {
+        show: !legendconfig.hide,
+        top: legendTop,
+        padding: 0,
+        orient: legendconfig.orient || 'horizontal',
+        itemGap: itemGap,
+        itemWidth: itemWidth,
+        itemHeight: itemHeight,
+        textStyle: {
+            fontSize: fontSize || getFontSize() * 0.7
+        },
+        data: series.map((v, i) => {
+            return v.name
+        })
+    };
+
+    legendLeft ? (legend.left = legendLeft) : (legend.right = '5%');
+
+    return legend;
+}
+
 function getLayout(layout) {
     let l = {};
     for (let k in layout) {

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/主题测试1.json';
+import tempdata from '../data/testbar.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
-        this.dev = 'local ';
+        this.dev = 'local';
         this.theme = 'blue';
         
         this.index = 0;

kanban-client/app/data/testbar.json

@@ -1,10 +1,32 @@
 {
     "instance": {
-        "enabledKanbanCodes": ["712DCC77A16"],
+        "enabledKanbanCodes": ["A54FDEAEE22"],
         "display": "AutoSwitch",
-        "switchFrequency": 3,
-        "refreshFrequency": 3,
-        "parameters": []
+        "switchFrequency": "10",
+        "refreshFrequency": "10",
+        "parameters": [{
+            "code": "5F32C4F0011",
+            "createTime": 1508754603776,
+            "inputMode": "DropDownBox",
+            "lastModified": 1508754603776,
+            "name": "测试下拉框值",
+            "optionalValues": ["AAAA", "BBB"],
+            "panelCode": "5F1BEAF081B",
+            "type": "String",
+            "value": "AAAA",
+            "version": 1
+        }, {
+            "code": "5F3476A6216",
+            "createTime": 1508756380258,
+            "inputMode": "DropDownBox",
+            "lastModified": 1527664464641,
+            "name": "测试新增",
+            "optionalValues": ["rr"],
+            "panelCode": "5F1BEAF081B",
+            "type": "String",
+            "value": "rr",
+            "version": 9
+        }]
     },
     "data": [{
         "content": {
@@ -15,28 +37,23 @@
                     "h": 100,
                     "y": 0
                 },
-                "type": "bar",
+                "type": "line",
                 "config": {
-                    "xfields": "[null, 王五, 张三, TEST0821, 晓兰, EMR01, 陈梦, 吴雨骁, 粟宇, 周兵, TX03, lptest, 黄俊, 陈炜, 赵六, 龙震坤, 测试人员, 刘萌冰, 卫立煌, 廖耀湘, 张玲萍, 李剑辉, 史晨如, 黄信, 詹国胜, 群, 熊志新, 陈庆之, 张文, 刘娇, 顾群2, 测试0103, EMR02, 张荣, 余慧, 陈劲松, 吴雨骁test, 黎旦阳, 陈虎, 顾群, 杨若楠]",
+                    "xfields": "[章政, 祝通鸿, 祝通鸿, 丁英琳, 肖舒婷, 曹尚宇, 曹尚宇, 刘金龙, 陈炜, 何炎, 雷超琳, 郑冰聪, 李嘉, 黄耀鹏, 靳深洋, 李剑辉, 顾群, 顾群, 周袁, 吴炳, 周兵, 黄子焘, 饶猛, 方龙海, 刘金龙, 刘金龙, 贺骎伟, 黄耀鹏, 祝通鸿]",
                     "xtype": "category",
-                    "color": "[\"#CC99FF\",\"#FF0000\",\"#0000FF\",\"#99CC00\"]",
-                    "yconfig": "{\"position\":\"left\",\"nameLocation\":\"middle\"}",
-                    "title": "BAR标题",
+                    "legendconfig": "{\"formatter\":\"{name}{value}\" }",
+                    "title": "今日打卡数据",
                     "ytype": "numeric",
-                    "xconfig": "{\"position\":\"bottom\"}",
-                    "ytitle": "数量",
-                    "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],
-                        "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],
-                        "name": "未启动"
-                    }],
-                    "subtitle": "假装写个副标题",
-                    "xtitle": "姓名",
-                    "barconfig": "{\"hideLabel\":true}"
+                    "ytitle": "距离",
+                    "lineconfig": "{\"areaStyle\":\"{\\\"type\\\":\\\"null\\\",\\\"opacity\\\":\\\"0.7\\\"}\",\"hideLabel\":true}",
+                    "series": {
+                        "data": [415.92, 420.67, 420.67, 453.14, 420, 463.55, 463.55, 271, 427.57, 412.61, 17.33, 277.97, 39.85, 205, 49.6, 86.86, 403, 403, 427, 67.34, 155, 326.86, 425.4, 37.35, 12, 103.33, 109, 83, 214.47],
+                        "name": "距离"
+                    },
+                    "xtitle": "姓名"
                 }
             }
         }
-    }]
+    }],
+    "theme": "blue"
 }