解决图表钻取的部分问题

src/components/chartDesigner/charts/drillDownBar.jsx

@@ -16,7 +16,7 @@ class DrillDownBar extends Component {
                     onClick={( drillDown.length!==index+1 )?this.itemClick:null }
                     className={( drillDown.length!==index+1 )?'linkItem':'lastItem'}
                 >
-                    <span data-index={index}>{( index===0 && drillDown.length!==index+1 )?g.field:g.value}</span>
+                    <span data-index={index}>{( index===0 && drillDown.length!==index+1 )?g.label:g.value}</span>
                 </Breadcrumb.Item>
             ))}
             </Breadcrumb> 

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -23,6 +23,7 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: {
 							...barConfig,
 							xAxis: { column, granularity },
+							drillable: false,
 							drillList: [{ column, granularity }] 
 						}, autoRefresh });
 					}}

src/components/chartDesigner/sections/drillList.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { Button, Row, Col, Icon, message }  from 'antd';
+import { Row, Col, Icon, message }  from 'antd';
 import XAxisItem from './xAxisItem';
 import './drillList.less'
 
 const DrillList = ({ className, list, value, onChange }) => {
     let newValue = value.map(v => v);
+    const nOptions = list.filter(l => l.type === 'time' || !value.find(vi => vi.column.value === l.name));
     return <div className={`drill-list ${className || ''}`}>
         {value.map((v, i) => {
             const options = list.filter(l => l.type === 'time' || !value.find(vi => vi.column.value !== v.column.value && vi.column.value === l.name));
             return <Row key={i}>
                 <Col span={20}>
-                    <XAxisItem value={v} disabled={i === 0} options={options} onChange={v => {
+                    <XAxisItem value={v} allowClear={false} disabled={i === 0} options={options} onChange={v => {
                         let idx = value.findIndex(t => t.column.value === v.column.value && t.granularity.value === v.granularity.value);
                         if(idx > -1) {
                             message.error('不可添加重复层级');
@@ -31,17 +32,14 @@ const DrillList = ({ className, list, value, onChange }) => {
                 </Col>
             </Row>
         })}
-        <Button className='btn-add' onClick={() => {
-            if(newValue.length > 6) {
-                message.error('钻取层级最多允许添加6层');
+        {newValue.length < 6 && <XAxisItem allowClear={false} options={nOptions} onChange={v => {
+            if(newValue.length > 5) {
+                message.error('钻取层级最多为6层');
                 return;
             }
-            newValue.push({
-                column: {},
-                granularity: {}
-            });
+            newValue.push(v);
             onChange(newValue);
-        }}>添加</Button>
+        }} placeholder='选择新增'/>}
     </div>
 };
 

src/components/chartDesigner/sections/lineConfigForm.jsx

@@ -22,6 +22,7 @@ const LineConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: {
 							...lineConfig,
 							xAxis: { column, granularity },
+							drillable: false,
 							drillList: [{ column, granularity }] 
 						}, autoRefresh });
 					}}

src/components/chartDesigner/sections/pieConfigForm.jsx

@@ -22,6 +22,7 @@ const PieConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 						dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: {
 							...pieConfig,
 							xAxis: { column, granularity },
+							drillable: false,
 							drillList: [{ column, granularity }] 
 						}, autoRefresh });
 					}}

src/components/chartDesigner/sections/xAxisItem.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { Cascader } from 'antd';
 import GRANULARITY from './granularity.json';
 
-const XAxisItem = ({ value: _propsValue, disabled, options, onChange }) => {
+const XAxisItem = ({ value: _propsValue, allowClear, disabled, options, onChange, placeholder }) => {
     return <Cascader
-        value={[_propsValue.column.value, _propsValue.granularity.value]}
+        value={_propsValue ? [_propsValue.column.value, _propsValue.granularity.value] : []}
         disabled={disabled}
-        allowClear={true}
+        allowClear={allowClear === undefined || allowClear}
+        placeholder={null}
         showSearch={{
             filter: (inputValue, path) => {
                 let p0 = path[0].label.toLowerCase();
@@ -59,7 +60,7 @@ const XAxisItem = ({ value: _propsValue, disabled, options, onChange }) => {
                 }
             }else {
                 className += ' empty-label';
-                text = '请选择...';
+                text = placeholder || '请选择...';
             }
             return <div className={className}>{text}</div>;
         }}

src/models/chartDesigner.js

@@ -429,7 +429,6 @@ export default {
                         yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                     }
                 }else if(viewType === 'line') {
-                    console.log(chartDesigner);
                     const { lineConfig } = chartDesigner;
                     if(lineConfig.xAxis.column.value && lineConfig.yAxis.column.value &&
                         (lineConfig.drillable?lineConfig.drillList.filter(item=>{
@@ -1137,7 +1136,6 @@ export default {
                                 });
                             }
                         }
-                        console.log(columns, dataSource);
                         break;
                     }
                     case 'indicator': {

src/models/parseChartOption.js

@@ -62,6 +62,11 @@ export default function(viewType, data, chartConfig, themeName, styleConfig, dri
 }
 
 function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
+    if(!data) {
+        return {
+            drillDown
+        };
+    }
     const { xAxis, yAxis, groupBy } = barConfig;
     const { barMaxWidth, barMinHeight, barGap, stack, labelVisible, labelPosition, labelDistance,
         labelRotate, xNameLocation, xNameGap, xNameRotate, xLabelHiddenCover, xLabelRotate, dataZoomVisible,
@@ -76,9 +81,11 @@ function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
     //钻取逻辑
     if(drillDown){
         let curDrillDown = drillDown.slice(-1)[0];
-        xTitle = xAxis?`${curDrillDown.label}`:null
+        xTitle = xAxis?`${curDrillDown.label}`:null;
         if(curDrillDown.type==='time'){
             xGranularityV = curDrillDown.showDataType
+        }else {
+            xGranularityV = null;
         }
     }
 
@@ -175,6 +182,11 @@ function barOption(data, barConfig, themeConfig, styleConfig, drillDown) {
 }
 
 function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
+    if(!data) {
+        return {
+            drillDown
+        };
+    }
     const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin, xLabelHiddenCover,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
         lineSmooth, labelSymbolSize, dataZoomVisible } = styleConfig;
@@ -192,6 +204,8 @@ function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
         xTitle = xAxis?`${curDrillDown.label}`:null
         if(curDrillDown.type==='time'){
             xGranularityV = curDrillDown.showDataType
+        }else {
+            xGranularityV = null;
         }
     }
 
@@ -285,6 +299,11 @@ function lineOption(data, lineConfig, themeConfig, styleConfig, drillDown) {
 }
 
 function pieOption(data, pieConfig, themeConfig, styleConfig, drillDown) {
+    if(!data) {
+        return {
+            drillDown
+        };
+    }
     let { labelHidden } = styleConfig;
     let { xAxis, yAxis } = pieConfig;
     let { tooMany } = data;
@@ -297,6 +316,8 @@ function pieOption(data, pieConfig, themeConfig, styleConfig, drillDown) {
         let curDrillDown = drillDown.slice(-1)[0];
         if(curDrillDown.type==='time'){
             xGranularityV = curDrillDown.showDataType
+        }else {
+            xGranularityV = null;
         }
     }