图表option深拷贝替换/图表柱状图x轴时间类型字符替换

src/components/chart/resolveChartOption.js

@@ -51,7 +51,43 @@ export default (option, silent, thumbnail) => {
         containLabel: !thumbnail
     }
     // 图形
-    if(viewType ==='bar' || viewType === 'line') { // 柱状图
+    if(viewType ==='bar') { // 柱状图
+        _option.series = _option.series.map(s => ({
+            ...s, showSymbol: !thumbnail, silent,
+        }));
+        // x轴
+        _option.xAxis ? (_option.xAxis.length > 0 ? (
+            _option.xAxis[0].axisLabel = {
+                ..._option.xAxis[0].axisLabel,
+                show: !thumbnail,
+            }
+        ) : (
+            _option.xAxis.axisLabel = {
+                ..._option.xAxis.axisLabel,
+                show: !thumbnail,
+            }
+        )) : _option.xAxis = {
+            axisLabel: {
+                show: !thumbnail,
+            } 
+        };
+        // y轴
+        _option.yAxis ? (_option.yAxis.length > 0 ? (
+            _option.yAxis[0].axisLabel = {
+                ..._option.yAxis[0].axisLabel,
+                show: !thumbnail,
+            }
+        ) : (
+            _option.yAxis.axisLabel = {
+                ..._option.yAxis.axisLabel,
+                show: !thumbnail,
+            }
+        )) : _option.yAxis = {
+            axisLabel: {
+                show: !thumbnail,
+            } 
+        };
+    }else if(viewType === 'line') { // 折线图
         _option.series = _option.series.map(s => ({
             ...s, showSymbol: !thumbnail, silent
         }));

src/components/chartDesigner/charts/echartsView.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import Echarts from 'echarts-for-react'
 import { connect } from 'dva'
-import { hashcode } from '../../../utils/baseUtils'
+import { deepAssign, hashcode } from '../../../utils/baseUtils'
 import EmptyContent from '../../common/emptyContent'
 
 const EchartsView = ({ chartDesigner, dispatch, optionConfig }) => {
     const { chartOption } = chartDesigner;
-    const option = { ...chartOption, ...optionConfig };
+    const option = deepAssign(chartOption, optionConfig);
+    // console.log(deepAssign({a: {b: 10}}, {b: 20}, {a: {c: 30}}, { a: { b: 20 }}));
     if(!option.series) {
         return <EmptyContent />
     }else {

src/components/chartDesigner/content.jsx

@@ -74,10 +74,11 @@ class ChartDesignerContent extends React.Component {
             chartView = (<TableView inPage={true}/>);
         }else if(viewType === 'line') {
             configForm = (<LineConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
+            // optionConfig 可以用来放替换属性(已做深拷贝替换)
             chartView = (<EchartsView optionConfig={{ animation }}/>);
         }else if(viewType === 'bar') {
             configForm = (<BarConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView optionConfig={{ animation }}/>);
+            chartView = (<EchartsView optionConfig={{ animation, barMaxWidth: '50%' }}/>);
         }else if(viewType === 'pie') {
             configForm = (<PieConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
             chartView = (<EchartsView optionConfig={{ animation }}/>);

src/models/parseChartOption.js

@@ -69,7 +69,23 @@ function barOption(data, barConfig) {
         },
         xAxis: [{
             type: 'category',
-            data: data.xAxis,
+            data: data.xAxis.map(d => {
+                let gv= barConfig.xAxis.granularity.value;
+                let xv = d;
+                if(gv === 'halfYear') {
+                    let arr = d.split('-H');
+                    xv = arr[0] + ['上半年', '下半年'][arr[1] - 1]
+                }else if(gv === 'month') {
+                    xv = d.replace('-M', '-');
+                }else if(gv === 'quarter') {
+                    let arr = d.split('-Q');
+                    xv = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
+                }else if(gv === 'week') {
+                    let arr = d.split('-W');
+                    xv = arr[0] + '-' + arr[1] + '周'
+                }
+                return xv;
+            }),
             name: xTitle || '横轴',
         }],
         yAxis: [{

src/utils/baseUtils.js

@@ -1,3 +1,4 @@
+import deepAssign from './deepAssign'
 /**
  * 删除数组某个值
  * @param {*} arr 
@@ -187,4 +188,4 @@ function ArrayEquals(arr1, arr2) {
     return true;
 }
 
-export { remove, isEqual, getUrlParam, hashcode, delay, dateFormat, arrayToTree, ArrayEquals };
+export { remove, isEqual, getUrlParam, hashcode, delay, dateFormat, arrayToTree, ArrayEquals, deepAssign };

src/utils/deepAssign.js

@@ -0,0 +1,69 @@
+'use strict';
+var isObj = require('is-obj');
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Cannot convert undefined or null to object');
+	}
+
+	return Object(val);
+}
+
+function assignKey(to, from, key) {
+	var val = from[key];
+
+	if (val === undefined || val === null) {
+		return;
+	}
+
+	if (hasOwnProperty.call(to, key)) {
+		if (to[key] === undefined || to[key] === null) {
+			throw new TypeError('Cannot convert undefined or null to object (' + key + ')');
+		}
+	}
+
+	if (!hasOwnProperty.call(to, key) || !isObj(val)) {
+		to[key] = val;
+	} else {
+		to[key] = assign(Object(to[key]), from[key]);
+	}
+}
+
+function assign(to, from) {
+	if (to === from) {
+		return to;
+	}
+
+	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]);
+			}
+		}
+	}
+
+	return to;
+}
+
+module.exports = function deepAssign(target) {
+	target = toObject(target);
+
+	for (var s = 1; s < arguments.length; s++) {
+		assign(target, arguments[s]);
+	}
+
+	return target;
+};