柱状图样式设置添加控制：显示0标注/deepAssign添加对function的替换

src/components/chartDesigner/sections/style/bar.jsx

@@ -231,25 +231,76 @@ class BarStyle extends React.Component {
                 />
             </FormItem>
             <Divider>标注</Divider>
-            <FormItem label='显示' {...formItemLayout}>
-                <Checkbox
-                    checked={!!barStyle.labelVisible}
-                    onChange={e => {
-                        let checked = e.target.checked;
-                        let seriesArr = [];
-                        for(let i = 0; i < chartOption.series.length; i++) {
-                            seriesArr.push({
-                                label: { normal: { show: checked } },
-                                labelLine: { normal: { show: checked } }
-                            });
-                        }
-                        dispatch({ type: 'chartDesigner/setFields', fields: [
-                            { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelVisible: checked } }) },
-                            { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
-                        ] });
-                    }}
-                />
-            </FormItem>
+            <Row>
+                <Col span={12}>
+                    <FormItem label='显示' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
+                        <Checkbox
+                            checked={!!barStyle.labelVisible}
+                            onChange={e => {
+                                let checked = e.target.checked;
+                                let seriesArr = [];
+                                for(let i = 0; i < chartOption.series.length; i++) {
+                                    seriesArr.push({
+                                        label: { normal: { show: checked } },
+                                        labelLine: { normal: { show: checked } }
+                                    });
+                                }
+                                dispatch({ type: 'chartDesigner/setFields', fields: [
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelVisible: checked } }) },
+                                    { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                                ] });
+                            }}
+                        />
+                    </FormItem>
+                </Col>
+                <Col span={12}>
+                    {!!barStyle.labelVisible && <FormItem label='显示0标注' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
+                        <Checkbox
+                            checked={!!barStyle.labelZeroVisible}
+                            onChange={e => {
+                                let checked = e.target.checked;
+                                let seriesArr = [];
+                                let labelFormatter = barStyle.labelFormatter;
+                                for(let i = 0; i < chartOption.series.length; i++) {
+                                    seriesArr.push({
+                                        label: { normal: {
+                                            formatterKey: checked,
+                                            formatter: !checked ? (params) => {
+                                                const { name : a, seriesName: b, value: c} = params;
+                                                // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
+                                                const obj = { a, b, c };
+                                                let str = labelFormatter || '{c}';
+                                                if(c === 0) {
+                                                    return '';
+                                                }else {
+                                                    let ss = `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
+                                                        let s;
+                                                        if(!Object.prototype.hasOwnProperty.call(obj, y)) {
+                                                            return x;
+                                                        }else {
+                                                            try {
+                                                                s = obj[y];
+                                                            }catch(e) {
+                                                                s = x;
+                                                            }
+                                                        }
+                                                        return s;
+                                                    })}`
+                                                    return ss;
+                                                }
+                                            } : ((labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter)
+                                        } },
+                                    });
+                                }
+                                dispatch({ type: 'chartDesigner/setFields', fields: [
+                                    { name: 'styleConfig', value: deepAssign(styleConfig, { bar: { labelZeroVisible: checked } }) },
+                                    { name: 'chartOption', value: deepAssign(chartOption, { series: seriesArr }) },
+                                ] });
+                            }}
+                        />
+                    </FormItem>}
+                </Col>
+            </Row>
             {!!barStyle.labelVisible && <FormItem label={<Tooltip title="{a}：系列名 {b}：数据名 {c}：数据值">格式化</Tooltip>} {...formItemLayout}>
                 <Input
                     defaultValue={barStyle.labelFormatter ? barStyle.labelFormatter : null}
@@ -257,11 +308,36 @@ class BarStyle extends React.Component {
                     onBlur={e => {
                         let value = e.target.value;
                         let seriesArr = [];
+                        let labelZeroVisible = barStyle.labelZeroVisible;
                         for(let i = 0; i < chartOption.series.length; i++) {
                             seriesArr.push({
-                                label: {
-                                    normal: { formatter: (value === '' || value === null || value === undefined) ? '{c}' : value }
-                                }
+                                label: { normal: {
+                                    formatterKey: value,
+                                    formatter: !labelZeroVisible ? (params) => {
+                                        const { name : a, seriesName: b, value: c} = params;
+                                        // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
+                                        const obj = { a, b, c };
+                                        let str = value || '{c}';
+                                        if(c === 0) {
+                                            return '';
+                                        }else {
+                                            let ss = `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
+                                                let s;
+                                                if(!Object.prototype.hasOwnProperty.call(obj, y)) {
+                                                    return x;
+                                                }else {
+                                                    try {
+                                                        s = obj[y];
+                                                    }catch(e) {
+                                                        s = x;
+                                                    }
+                                                }
+                                                return s;
+                                            })}`
+                                            return ss;
+                                        }
+                                    } : ((value === '' || value === null || value === undefined) ? '{c}' : value)
+                                } },
                             });
                         }
                         dispatch({ type: 'chartDesigner/setFields', fields: [

src/components/chartDesigner/sections/style/index.less

@@ -1,6 +1,5 @@
 .style-config {
     .ant-divider {
-        margin: 0;
         font-size: 12px;
     }
 }

src/models/parseChartOption.js

@@ -60,7 +60,7 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
     const { gridPosition, barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
         labelRotate, labelFormatter, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate,
         xLabelMargin, yNameLocation, yNameGap, yNameRotate, legendHidden, legendInPagination,
-        legendOrient : styleLegendOrient, legendPosition, legendFormatter } = styleConfig;
+        legendOrient : styleLegendOrient, legendPosition, legendFormatter, labelZeroVisible } = styleConfig;
     let xTitle = xAxis?`${xAxis.column.label}${xAxis.granularity.value?'('+xAxis.granularity.label+')':''}`:null
     let yTitle = yAxis?`${yAxis.column.label}${yAxis.gauge.value?'('+yAxis.gauge.label+')':''}`:null
     data.serieses = data.serieses || [];
@@ -205,7 +205,30 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
                         position: labelPosition || 'inside',
                         distance: (labelDistance === '' || labelDistance === null || labelDistance === undefined) ? 5 : Number(labelDistance),
                         rotate: (labelRotate === '' || labelRotate === null || labelRotate === undefined) ? 0 : Number(labelRotate),
-                        formatter: (labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter,
+                        // formatter: (labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter,
+                        formatter: !labelZeroVisible ? (params) => {
+                            const { name : a, seriesName: b, value: c} = params;
+                            // {a: 系列名 name} {b: 数据名 seriesName} {c: 数据值 value}
+                            const obj = { a, b, c };
+                            let str = labelFormatter || '{c}';
+                            if(c === 0) {
+                                return '';
+                            }else {
+                                return `${str.replace(/{([^{ ^}])+}/g, function(x, y) {
+                                    let s;
+                                    if(!Object.prototype.hasOwnProperty.call(obj, y)) {
+                                        return x;
+                                    }else {
+                                        try {
+                                            s = obj[y];
+                                        }catch(e) {
+                                            s = x;
+                                        }
+                                    }
+                                    return s;
+                                })}`
+                            }
+                        } : ((labelFormatter === '' || labelFormatter === null || labelFormatter === undefined) ? '{c}' : labelFormatter),
                     }
                 }
             }

src/utils/baseUtils.js

@@ -107,7 +107,12 @@ function getUrlParam(name) {
 }
 
 function hashcode(obj) {
-    let str = JSON.stringify(obj);
+    let str = JSON.stringify(obj, function(k, v) {
+        if(typeof v === 'function') {
+            return v.toString();
+        }
+        return v;
+    });
     let hash = 0,
         i, chr, len;
     if (str.length === 0) return hash;

src/utils/deepAssign.js

@@ -37,20 +37,24 @@ function assign(to, from) {
 		return to;
 	}
 
-	from = Object(from);
-
-	for (var key in from) {
-		if (hasOwnProperty.call(from, key)) {
-			assignKey(to, from, key);
+	if(typeof to === 'function' || typeof from === 'function') {
+		to = from;
+	}else {
+		from = Object(from);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				assignKey(to, from, key);
+			}
 		}
-	}
-
-	if (Object.getOwnPropertySymbols) {
-		var symbols = Object.getOwnPropertySymbols(from);
-
-		for (var i = 0; i < symbols.length; i++) {
-			if (propIsEnumerable.call(from, symbols[i])) {
-				assignKey(to, from, symbols[i]);
+	
+		if (Object.getOwnPropertySymbols) {
+			var symbols = Object.getOwnPropertySymbols(from);
+	
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					assignKey(to, from, symbols[i]);
+				}
 			}
 		}
 	}