总体/个体统计图完善

src/components/chart/chooseDataSourceBox.jsx

@@ -13,11 +13,6 @@ class ChooseDataSourceBox extends React.Component {
         }
     }
 
-    componentDidMount() {
-        const { dispatch } = this.props;
-        dispatch({ type: 'dataSource/fetchList' });
-    }
-
     changeSelected = (record) => {
         this.setState({
             selectedRecord: Object.assign({}, record)

src/components/chart/list.jsx

@@ -7,6 +7,7 @@ import { dateFormat } from '../../utils/baseUtils'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 import 'ant-design-pro/dist/ant-design-pro.css'
 import GroupSelector from '../datasource/groupSelector'
+import Thumbnail from './thumbnail'
 const { Content } = Layout
 const { Search } = Input
 const CardGrid = Card.Grid
@@ -97,21 +98,19 @@ class ChartList extends React.Component {
                 <Card
                     title={
                         <Row type='flex' justify='space-between'>
-                            <Col>
-                                <span>
-                                    { filterLabel ?
-                                        (l.name.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
-                                        }
-                                        )) : l.name
+                            <Col span={21} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }} >
+                                { filterLabel ?
+                                    (l.name.split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                        return (
+                                            fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                            fragment
+                                        )
                                     }
-                                </span>
+                                    )) : l.name
+                                }
                             </Col>
-                            <Col style={{ textAlign: 'right' }}>
+                            <Col style={{ textAlign: 'right' }} span={3} >
                                 <Icon type='star-o'/>
                             </Col>
                         </Row>
@@ -122,7 +121,8 @@ class ChartList extends React.Component {
                                 dispatch({ type: 'chartDesigner/reset' });
                                 dispatch({ type: 'main/redirect', path: '/chart/' + l.code });
                             }}>
-                                <img alt='' style={{ height: '100px', marginTop: '10%' }} src='https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/master_a_20180711/images/chart/empty_column_chart.svg'></img>
+                                {/* <img alt='' style={{ height: '100px', marginTop: '10%' }} src='https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/master_a_20180711/images/chart/empty_column_chart.svg'></img> */}
+                                <Thumbnail />
                             </Row>
                             <Row className='desc'>
                                 <Ellipsis tooltip={l.description.length > 16} lines={2}>{

src/components/chart/list.less

@@ -55,6 +55,9 @@
                     padding: 10px;
                     .thumb {
                         height: 132px;
+                        div {
+                            height: 100%;
+                        }
                     }
                     .desc {
                         text-align: left;

src/components/chart/thumbnail.jsx

@@ -0,0 +1,179 @@
+import React from 'react'
+import Echarts from 'echarts-for-react'
+
+const Thumbnail = () => {
+    let option1 = {
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一','周二','周三','周四','周五','周六','周日'],
+            show: false
+        },
+        grid: {
+            left: 0,
+            right: 0,
+            top: 0, 
+            bottom: 0,
+            containLabel: false
+        },
+        yAxis: {
+            show: false,
+            type: 'value'
+        },
+        series: [
+            {
+                name:'邮件营销',
+                type:'line',
+                data:[120, 132, 101, 134, 90, 230, 210],
+                showSymbol: false
+            },
+            {
+                name:'联盟广告',
+                type:'line',
+                data:[220, 182, 191, 234, 290, 330, 310],
+                showSymbol: false
+            },
+            {
+                name:'视频广告',
+                type:'line',
+                data:[150, 232, 201, 154, 190, 330, 410],
+                showSymbol: false
+            },
+            {
+                name:'直接访问',
+                type:'line',
+                data:[320, 332, 301, 334, 390, 330, 320],
+                showSymbol: false
+            },
+            {
+                name:'搜索引擎',
+                type:'line',
+                data:[820, 932, 901, 934, 1290, 1330, 1320],
+                showSymbol: false
+            }
+        ]
+    };
+    let option2 = {
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一','周二','周三','周四','周五','周六','周日'],
+            show: false
+        },
+        grid: {
+            left: 0,
+            right: 0,
+            top: 0, 
+            bottom: 0,
+            containLabel: false
+        },
+        yAxis: {
+            show: false,
+            type: 'value'
+        },
+        series: [
+            {
+                name:'邮件营销',
+                type:'bar',
+                data:[120, 132, 101, 134, 90, 230, 210],
+                showSymbol: false,
+                silent: true
+            },
+            {
+                name:'联盟广告',
+                type:'bar',
+                data:[220, 182, 191, 234, 290, 330, 310],
+                showSymbol: false,
+                silent: true
+            },
+            {
+                name:'视频广告',
+                type:'bar',
+                data:[150, 232, 201, 154, 190, 330, 410],
+                showSymbol: false,
+                silent: true
+            },
+            {
+                name:'直接访问',
+                type:'bar',
+                data:[320, 332, 301, 334, 390, 330, 320],
+                showSymbol: false,
+                silent: true
+            },
+            {
+                name:'搜索引擎',
+                type:'bar',
+                data:[820, 932, 901, 934, 1290, 1330, 1320],
+                showSymbol: false,
+                silent: true
+            }
+        ]
+    };
+    let option3 = {
+        series : [
+            {
+                name: '访问来源',
+                type: 'pie',
+                data:[
+                    {value:335, name:'直接访问'},
+                    {value:310, name:'邮件营销'},
+                    {value:234, name:'联盟广告'},
+                    {value:135, name:'视频广告'},
+                    {value:1548, name:'搜索引擎'}
+                ],
+                label: {
+                    show: false
+                },
+                labelLine: {
+                    show: false
+                },
+                silent: true
+            }
+        ]
+    };
+    let option4 = {
+        xAxis: {
+            show: true
+        },
+        yAxis: {
+            show: true
+        },
+        grid: {
+            left: 0,
+            right: 0,
+            top: 0, 
+            bottom: 0,
+            containLabel: false
+        },
+        series: [{
+            data: [
+                [10.0, 8.04],
+                [8.0, 6.95],
+                [13.0, 7.58],
+                [9.0, 8.81],
+                [11.0, 8.33],
+                [14.0, 9.96],
+                [6.0, 7.24],
+                [4.0, 4.26],
+                [12.0, 10.84],
+                [7.0, 4.82],
+                [5.0, 5.68]
+            ],
+            type: 'scatter',
+            silent: true
+        }]
+    };
+    let option = [option1, option2, option3, option4]
+    return (
+        <div style={{ width: '100%', height: '100%' }}>
+            <Echarts
+                key={Math.random()}
+                option={option[Math.ceil(Math.random()*option.length)-1]}
+                className='rc-echarts'
+                style={{height: '100%'}}
+            />
+        </div>
+    );
+}
+
+export default Thumbnail;

src/components/chartDesigner/charts/resolveChartOption.js

@@ -19,7 +19,10 @@ export default (config) => {
             break;
         }
         case 'aggregateTable': {
-            o = aggregateTableConfig(option);
+            o = tableConfig(option);
+            break;
+        }case 'dataView' : {
+            o = tableConfig(option);
             break;
         }
         default:{
@@ -185,7 +188,7 @@ function scatterConfig(option) {
     return o;
 }
 
-function aggregateTableConfig(option) {
+function tableConfig(option) {
     const { columns, data } = option;
     let o = {
         columns,

src/components/chartDesigner/sections/ScatterConfigForm.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Form, Select, Tag, Cascader, Dropdown, Menu } from 'antd'
 import { connect } from 'dva'
-import '../../../models/chartDesigner'
 import GAUGE from './gauge.json'
 const FormItem = Form.Item
 const { Option } = Select
@@ -125,9 +124,9 @@ const ScatterConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					placeholder='请选择...'
 					onChange={(value) => {
 						// value = value.splice(-1);
-						dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });
+						dispatch({ type: 'chartDesigner/changeField', name: 'scatterConfig', value: { ...chartDesigner.scatterConfig, groupBy: value } });
 					}}
-					value={chartDesigner.preparing.groupBy}
+					value={chartDesigner.scatterConfig.groupBy}
 				>
 					{columns.filter(c => c.type === 'categorical').map((c, i)=>{
 						return (<Option key={i} value={c.name}>{c.label}</Option>)

src/components/chartDesigner/sections/aggregateTableConfigForm.jsx

@@ -47,9 +47,9 @@ class AggregateTableConfigForm extends React.Component {
 						placeholder='请选择...'
 						allowClear={true}
 						onChange={(value) => {
-							dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });
+							dispatch({ type: 'chartDesigner/changeField', name: 'aggregateTableConfig', value: { ...props.chartDesigner.aggregateTableConfig, groupBy: value } });
 						}}
-						value={chartDesigner.preparing.groupBy}
+						value={chartDesigner.aggregateTableConfig.groupBy}
 					>
 						{columns.filter(c => c.type === 'categorical').map((c, i)=>{
 							return (<Option key={i} value={c.name}>{c.label}</Option>)

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -126,9 +126,9 @@ const BarConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					allowClear={true}
 					onChange={(value) => {
 						// value = value.splice(-1);
-						dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...chartDesigner.barConfig, groupBy: value } });
 					}}
-					value={chartDesigner.preparing.groupBy}
+					value={chartDesigner.barConfig.groupBy}
 				>
 					{columns.filter(c => c.type === 'categorical').map((c, i)=>{
 						return (<Option key={i} value={c.name}>{c.label}</Option>)

src/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -8,7 +8,7 @@ class DataViewConfigForm extends React.Component {
 	render() {
 		const { dispatch, chartDesigner, formItemLayout } = this.props;
 		const columns = chartDesigner.columns;
-        
+        console.log(chartDesigner.dataViewConfig);
 		return (
             <Form layout='horizontal'>
 				<FormItem label="展示列" {...formItemLayout}>
@@ -16,6 +16,7 @@ class DataViewConfigForm extends React.Component {
 						mode='multiple'
 						allowClear
 						value={chartDesigner.dataViewConfig.viewColumns}
+						labelInValue={true}
 						onChange={(value) => {
 							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, viewColumns: value }});
 						}}
@@ -29,11 +30,12 @@ class DataViewConfigForm extends React.Component {
 					<Select
 						allowClear
 						value={chartDesigner.dataViewConfig.sortColumn}
+						labelInValue={true}
 						onChange={(value) => {
 							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, sortColumn: value }});
 						}}
 					>
-						{columns.filter(c => chartDesigner.dataViewConfig.viewColumns.indexOf(c.name) !== -1 ).map((c, i)=>{
+						{columns.filter(c => chartDesigner.dataViewConfig.viewColumns.map(c => c.key).indexOf(c.name) !== -1 ).map((c, i)=>{
 							return <Option key={i} value={c.name}>{c.label}</Option>
 						})}
 					</Select>

src/components/chartDesigner/sections/lineConfigForm.jsx

@@ -125,9 +125,9 @@ const LineConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					placeholder='请选择...'
 					onChange={(value) => {
 						// value = value.splice(-1);
-						dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...chartDesigner.preparing, groupBy: value } });
+						dispatch({ type: 'chartDesigner/changeField', name: 'lineConfig', value: { ...chartDesigner.lineConfig, groupBy: value } });
 					}}
-					value={chartDesigner.preparing.groupBy}
+					value={chartDesigner.lineConfig.groupBy}
 				>
 					{columns.filter(c => c.type === 'categorical').map((c, i)=>{
 						return (<Option key={i} value={c.name}>{c.label}</Option>)

src/components/chartDesigner/sections/preparingForm.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { Form, Select } from 'antd'
-import { connect } from 'dva'
-import '../../../models/chartDesigner'
-const FormItem = Form.Item
-const { Option } = Select
-
-class PreparingForm extends React.Component {
-	render() {
-		const props = this.props;
-		const columns = props.chartDesigner.columns;
-		const { formItemLayout } = props
-		
-		return (
-			<Form layout='horizontal'>
-				<FormItem label='分组' {...formItemLayout}>
-					<Select
-						mode="multiple"
-						labelInValue={true}
-						placeholder='请选择...'
-						onChange={(value) => {
-							props.dispatch({ type: 'chartDesigner/changeField', name: 'preparing', value: { ...props.chartDesigner.preparing, groupBy: value } });
-						}}
-						value={props.chartDesigner.preparing.groupBy}
-					>
-						{columns.filterBy(c => {console.log(c.type); return c.type === 'categorical'}).map((c, i)=>{
-							return (<Option key={i} value={c.name}>{c.label}</Option>)
-						})}
-					</Select>
-				</FormItem>
-			</Form>
-		);
-	}
-};
-
-function mapStateToProps({ present: { chartDesigner } }) {
-    return { chartDesigner: chartDesigner }
-}
-
-export default connect(mapStateToProps)(PreparingForm);

src/models/chart.js

@@ -118,6 +118,17 @@ export default {
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_LIST
                 });
+                // let res = {data: {code:1,data: [
+                //     {
+                //         chartId:1,
+                //         chartName:'唱啊和你嘎哈噶沙发范德萨发生大发',
+                //         chartType: 'bar',
+                //         createBy:'azzz',
+                //         describes: '124132134111',
+                //         createDate:new Date(),
+                //         chartsGroup: -1
+                //     }
+                // ]}}
                 if(!res.err && res.data.code > 0) {
                     let list = res.data.data.map(d => {
                         return {
@@ -175,12 +186,6 @@ export default {
                     let otherConfig = JSON.parse(resData.otherConfig || '{}');
                     let viewType = getViewType(resData.chartType);
 
-                    let g = groupBy.map(g => {
-                        return {
-                            key: g.columnName.toLowerCase(),
-                            label: g.columnRename
-                        }
-                    })
                     let data = {
                         code: resData.chartId,
                         header: {
@@ -196,27 +201,35 @@ export default {
                     }
 
                     if(viewType === 'bar') {
-                        data.barConfig = chartConfig;
-                        data.preparing = {
-                            groupBy: g[0]
-                        };
+                        data.barConfig = { ...chartConfig, groupBy: groupBy.map(g => {
+                            return {
+                                key: g.columnName.toLowerCase(),
+                                label: g.columnRename
+                            }
+                        })[0] };
                     }else if(viewType === 'pie') {
                         data.pieConfig = chartConfig;
                     }else if(viewType === 'line') {
-                        data.lineConfig = chartConfig;
-                        data.preparing = {
-                            groupBy: g[0]
-                        };
+                        data.lineConfig = { ...chartConfig, groupBy: groupBy.map(g => {
+                            return {
+                                key: g.columnName.toLowerCase(),
+                                label: g.columnRename
+                            }
+                        })[0] };
                     }else if(viewType === 'scatter') {
-                        data.scatterConfig = chartConfig;
-                        data.preparing = {
-                            groupBy: g[0]
-                        };
+                        data.scatterConfig = { ...chartConfig, groupBy: groupBy.map(g => {
+                            return {
+                                key: g.columnName.toLowerCase(),
+                                label: g.columnRename
+                            }
+                        })[0] };
                     }else if(viewType === 'aggregateTable') {
-                        data.aggregateTableConfig = chartConfig;
-                        data.preparing = {
-                            groupBy: g
-                        };
+                        data.aggregateTableConfig = { ...chartConfig, groupBy: groupBy.map(g => {
+                            return {
+                                key: g.columnName.toLowerCase(),
+                                label: g.columnRename
+                            }
+                        }) };
                     }else if(viewType === 'dataView') {
                         data.dataViewConfig = chartConfig;
                     }
@@ -246,38 +259,60 @@ export default {
         *remoteAdd(action, { select, call, put }) {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { header, baseConfig, preparing, barConfig, pieConfig, lineConfig, otherConfig, description } = chartDesigner;
-
+                const { header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig,
+                    barConfig, scatterConfig, otherConfig, description, group } = chartDesigner;
                 let body = {
                     chartName: header.label,
                     dataId: baseConfig.dataSource,
-                    groupBy: preparing.groupBy && preparing.groupBy.key ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRename: preparing.groupBy.label
-                    }] : [],
                     createBy: 'zhuth',
                     describes: description,
                     style: '',
                     otherConfig: JSON.stringify(otherConfig),
-
+                    chartsGroup: group ? group : '-1'
                 }; // 基本属性
                 if(baseConfig.viewType === 'bar') {
                     body.chartType = 'Histogram';
                     body.chartConfig = JSON.stringify(barConfig);
+                    body.groupBy = barConfig.groupBy.key ? [{
+                        columnName: barConfig.groupBy.key,
+                        columnRename: barConfig.groupBy.label
+                    }] : []
                 }else if(baseConfig.viewType === 'pie') {
                     body.chartType = 'Pie';
                     body.chartConfig = JSON.stringify(pieConfig);
                 }else if(baseConfig.viewType === 'line') {
                     body.chartType = 'Line';
                     body.chartConfig = JSON.stringify(lineConfig);
+                    body.groupBy = lineConfig.groupBy.key ? [{
+                        columnName: lineConfig.groupBy.key,
+                        columnRename: lineConfig.groupBy.label
+                    }] : []
+                }else if(baseConfig.viewType === 'scatter') {
+                    body.chartType = 'scatter';
+                    body.chartConfig = JSON.stringify(scatterConfig);
+                    body.groupBy = scatterConfig.groupBy.key ? [{
+                        columnName: scatterConfig.groupBy.key,
+                        columnRename: scatterConfig.groupBy.label
+                    }] : []
+                }else if(baseConfig.viewType === 'aggregateTable') {
+                    body.chartType = 'population';
+                    body.chartConfig = JSON.stringify(aggregateTableConfig);
+                    body.groupBy = aggregateTableConfig.groupBy && aggregateTableConfig.groupBy.length > 0 ? aggregateTableConfig.groupBy.map(g => {
+                        return {
+                            columnName: g.key,
+                            columnRename: g.label
+                        }
+                    }) : []
+                }else if(baseConfig.viewType === 'dataView') {
+                    body.chartType = 'individual';
+                    body.chartConfig = JSON.stringify(dataViewConfig);
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_ADD,
                     body: body
                 })
                 if(!res.err && res.data.code > 0) {
-                    message.success('新增成功!');
-                    // yield put({ type: 'silentSetField', name: 'code', value: code });
+                    message.success('新增成功');
                     yield put({ type: 'fetchList', mandatory: true });
                 }else {
                     message.error('新增失败');
@@ -290,7 +325,7 @@ export default {
         *remoteModify(action, { select, call, put }) {
             try{
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig, preparing,
+                const { code, header, baseConfig, pieConfig, lineConfig, aggregateTableConfig, dataViewConfig,
                     barConfig, scatterConfig, otherConfig, description, group } = chartDesigner;
                 let body = {
                     chartId: code,
@@ -305,9 +340,9 @@ export default {
                 if(baseConfig.viewType === 'bar') {
                     body.chartType = 'Histogram';
                     body.chartConfig = JSON.stringify(barConfig);
-                    body.groupBy = preparing.groupBy ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRename: preparing.groupBy.label
+                    body.groupBy = barConfig.groupBy && barConfig.groupBy.key ? [{
+                        columnName: barConfig.groupBy.key,
+                        columnRename: barConfig.groupBy.label
                     }] : []
                 }else if(baseConfig.viewType === 'pie') {
                     body.chartType = 'Pie';
@@ -315,30 +350,26 @@ export default {
                 }else if(baseConfig.viewType === 'line') {
                     body.chartType = 'Line';
                     body.chartConfig = JSON.stringify(lineConfig);
-                    body.groupBy = preparing.groupBy ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRename: preparing.groupBy.label
+                    body.groupBy = lineConfig.groupBy && lineConfig.groupBy.key ? [{
+                        columnName: lineConfig.groupBy.key,
+                        columnRename: lineConfig.groupBy.label
                     }] : []
                 }else if(baseConfig.viewType === 'scatter') {
                     body.chartType = 'scatter';
                     body.chartConfig = JSON.stringify(scatterConfig);
-                    body.groupBy = preparing.groupBy ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRename: preparing.groupBy.label
+                    body.groupBy = scatterConfig.groupBy && scatterConfig.groupBy.key ? [{
+                        columnName: scatterConfig.groupBy.key,
+                        columnRename: scatterConfig.groupBy.label
                     }] : []
                 }else if(baseConfig.viewType === 'aggregateTable') {
                     body.chartType = 'population';
                     body.chartConfig = JSON.stringify(aggregateTableConfig);
-                    body.groupBy = preparing.groupBy && preparing.groupBy.length > 0 ? preparing.groupBy.map(g => {
+                    body.groupBy = aggregateTableConfig.groupBy && aggregateTableConfig.groupBy.length > 0 ? aggregateTableConfig.groupBy.map(g => {
                         return {
                             columnName: g.key,
                             columnRename: g.label
                         }
                     }) : []
-                    // body.groupBy = preparing.groupBy ? [{
-                    //     columnName: preparing.groupBy.key,
-                    //     columnRename: preparing.groupBy.label
-                    // }] : [],
                 }else if(baseConfig.viewType === 'dataView') {
                     body.chartType = 'individual';
                     body.chartConfig = JSON.stringify(dataViewConfig);

src/models/chartDesigner.js

@@ -10,13 +10,12 @@ export default {
             code: null,
             header: { label: '未命名' },
             baseConfig: { dataSource: '', viewType: '' },
-            preparing: { groupBy: {} },
-            aggregateTableConfig: { targetColumn: {}, statistics: [] },
-            dataViewConfig: {},
-            barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
-            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
+            aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },
+            dataViewConfig: { viewColumns: [], sortColumn: {}, sortType: 'asc' },
+            barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
+            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
-            scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
+            scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
             style: {},
             filters: [],
             chartOption: {},
@@ -27,71 +26,19 @@ export default {
 			{ value: 'owner', name: '创建人' },
 			{ value: 'anyone', name: '所有人' }
         ],
-        header: {
-            label: '标题'
-        },
+        header: { label: '标题' },
         baseConfig: {
             dataSource: '',
             viewType: ''
         },
-        preparing: {
-            groupBy: []
-        },
-        aggregateTableConfig: {
-            targetColumn: {},
-            statistics: []
-        },
-        dataViewConfig: {
-            viewColumns: [],
-            sortColumn: {
-                
-            }
-        },
-        barConfig: {
-            xAxis: {
-                column: {},
-                granularity: {}
-            },
-            yAxis: {
-                column: {},
-                gauge: {}
-            }
-        },
-        lineConfig: {
-            xAxis: {
-                column: {},
-                granularity: {}
-            },
-            yAxis: {
-                column: {},
-                gauge: {}
-            }
-        },
-        pieConfig: {
-            xAxis: {
-                column: {},
-                granularity: {}
-            },
-            yAxis: {
-                column: {},
-                gauge: {}
-            }
-        },
-        scatterConfig: {
-            xAxis: {
-                column: {},
-                granularity: {}
-            },
-            yAxis: {
-                column: {},
-                gauge: {}
-            }
-        },
-        styleConfig: {
-
-        },
-        otherConfig:{
-        },
+        aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },
+        dataViewConfig: { viewColumns: [], sortColumn: {}, sortType: 'asc' },
+        barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
+        lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
+        pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
+        scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {} },
+        styleConfig: { },
+        otherConfig:{ },
         description: '',
         filters: [],
         chartOption: {},
@@ -210,14 +157,14 @@ export default {
                     { name: 'baseConfig', value: { dataSource: dataSource.code, viewType: '' } }
                 ] });
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { baseConfig, preparing } = chartDesigner;
+                const { baseConfig } = chartDesigner;
 
                 let body = {
                     chartName: dataSource.name + '(未命名)',
                     dataId: baseConfig.dataSource,
-                    groupBy: preparing.groupBy && preparing.groupBy.key ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRamane: preparing.groupBy.label
+                    groupBy: baseConfig.groupBy && baseConfig.groupBy.key ? [{
+                        columnName: baseConfig.groupBy.key,
+                        columnRamane: baseConfig.groupBy.label
                     }] : [],
                     createBy: 'zhuth',
                     describes: '',
@@ -249,15 +196,11 @@ export default {
                 yield put({ type: 'chart/remoteModify' });
                 const { newHeaderLabel } = action;
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { baseConfig, pieConfig, lineConfig, preparing,
-                    barConfig, scatterConfig, aggregateTableConfig, dataViewConfig, otherConfig, description, group } = chartDesigner;
+                const { baseConfig, pieConfig, lineConfig, barConfig, scatterConfig, aggregateTableConfig,
+                    dataViewConfig, otherConfig, description, group } = chartDesigner;
                 let body = {
                     chartName: newHeaderLabel,
                     dataId: baseConfig.dataSource,
-                    groupBy: preparing.groupBy ? [{
-                        columnName: preparing.groupBy.key,
-                        columnRamane: preparing.groupBy.label
-                    }] : [],
                     createBy: 'zhuth',
                     describes: description || '',
                     style: '',
@@ -267,21 +210,39 @@ export default {
                 if(baseConfig.viewType === 'bar') {
                     body.chartType = 'Histogram';
                     body.chartConfig = JSON.stringify(barConfig);
+                    body.groupBy = barConfig.groupBy ? [{
+                        columnName: barConfig.groupBy.key,
+                        columnRamane: barConfig.groupBy.label
+                    }] : [];
                 }else if(baseConfig.viewType === 'pie') {
                     body.chartType = 'Pie';
                     body.chartConfig = JSON.stringify(pieConfig);
                 }else if(baseConfig.viewType === 'line') {
                     body.chartType = 'Line';
                     body.chartConfig = JSON.stringify(lineConfig);
+                    body.groupBy = lineConfig.groupBy ? [{
+                        columnName: lineConfig.groupBy.key,
+                        columnRamane: lineConfig.groupBy.label
+                    }] : [];
                 }else if(baseConfig.viewType === 'scatter') {
                     body.chartType = 'scatter';
                     body.chartConfig = JSON.stringify(scatterConfig);
+                    body.groupBy = scatterConfig.groupBy ? [{
+                        columnName: scatterConfig.groupBy.key,
+                        columnRamane: scatterConfig.groupBy.label
+                    }] : [];
                 }else if(baseConfig.viewType === 'aggregateTable') {
                     body.chartType = 'population';
                     body.chartConfig = JSON.stringify(aggregateTableConfig);
+                    body.groupBy = aggregateTableConfig.groupBy && aggregateTableConfig.groupBy.length > 0 ? aggregateTableConfig.groupBy.map(g => {
+                        return {
+                            columnName: g.key,
+                            columnRamane: g.label
+                        }
+                    }) : [];
                 }else if(baseConfig.viewType === 'dataView') {
                     body.chartType = 'individual';
-                    body.chartConfig = JSON.stringify(dataViewConfig);
+                    body.chartConfig = JSON.stringify(dataViewConfig);;
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_ADD,
@@ -306,7 +267,7 @@ export default {
                     url: URLS.DATASOURCE_QUERY_DATACOLUMNS,
                     body: code
                 });
-                console.log('获得图表管理数据源列数据', code, res);
+                console.log('获得图表关联数据源列数据', code, res);
                 if(!res.err && res.data.code > 0) {
                     let resData = res.data.data;
 
@@ -353,10 +314,10 @@ export default {
         *fetchBarData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, barConfig, preparing } = chartDesigner;
+                const { code, barConfig } = chartDesigner;
                 const body = {
                     id: code,
-                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
+                    groups: barConfig.groupBy && barConfig.groupBy.key ? [barConfig.groupBy.key] : [],
                     xAxis: {
                         columnRename: barConfig.xAxis.column.value,
                         columnType: barConfig.xAxis.column.type,
@@ -425,7 +386,7 @@ export default {
                         option: {
                             xAxis: res.data.data.xAxis,
                             columnName: columnName,
-                            serieses: res.data.data.serieses
+                            serieses: res.data.data.serieses || []
                         }
                     }
                     yield put({ type: 'silentSetField', name: 'chartOption', value: config });
@@ -440,7 +401,7 @@ export default {
         *fetchLineData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, lineConfig, preparing } = chartDesigner;
+                const { code, lineConfig } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -451,7 +412,7 @@ export default {
                         columnRename: lineConfig.yAxis.column.value,
                         showDataType: lineConfig.yAxis.gauge.value
                     },
-                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
+                    groups: lineConfig.groupBy && lineConfig.groupBy.key ? [lineConfig.groupBy.key] : [],
                 };
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_LINE_OPTION,
@@ -482,7 +443,7 @@ export default {
         *fetchScatterData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, scatterConfig, preparing } = chartDesigner;
+                const { code, scatterConfig } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -493,7 +454,7 @@ export default {
                         columnRename: scatterConfig.yAxis.column.value,
                         showDataType: scatterConfig.yAxis.gauge.value
                     },
-                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
+                    groups: scatterConfig.groupBy && scatterConfig.groupBy.key ? [scatterConfig.groupBy.key] : [],
                 };
                 console.log(body);
                 let res = yield call(service.fetch, {
@@ -529,13 +490,42 @@ export default {
                 const { code, dataViewConfig } = chartDesigner;
                 const body = {
                     id: code,
-                    columnName: dataViewConfig.targetColumn,
-                    columnListName: dataViewConfig.viewColumns,
-                    sort: "desc",
-                    showLine: dataViewConfig.maxRows,
-                    operation: ''
+                    columnListName: dataViewConfig.viewColumns.map(c => c.key),
+                    sortColumn: dataViewConfig.sortColumn.key,
+                    sort: dataViewConfig.sortType,
+                    showLine: '20'
                 };
-                console.log(body);return;
+                let res = yield call(service.fetch, {
+                    url: URLS.CHART_DATAVIEW_OPTION,
+                    body: body
+                });
+                console.log('请求个体统计数据', body, res);
+                if(!res.err && res.data.code > 0) {
+                    const resData = res.data.data;
+
+                    let columns = dataViewConfig.viewColumns.map(c => {
+                        return {
+                            title: c.label,
+                            dataIndex: c.key
+                        }
+                    })
+                    let dataSource = [];
+                    dataSource = resData.map(data => {
+                        let d = {};
+                        columns.map(c => {
+                            return d[c.dataIndex] = data[c.dataIndex.toUpperCase()]
+                        });
+                        return d
+                    });
+                    let config = {
+                        viewType: 'dataView',
+                        option: {
+                            columns: columns,
+                            data: dataSource
+                        }
+                    }
+                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
+                }
             }catch(e) {
                 console.error(e);
                 yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
@@ -544,15 +534,14 @@ export default {
         *fetchAggregateTableData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, aggregateTableConfig, preparing } = chartDesigner;
+                const { code, aggregateTableConfig } = chartDesigner;
                 const { targetColumn, statistics } = aggregateTableConfig;
-                const { groupBy } = preparing;
 
                 const body = {
                     id: code,
                     columnName: targetColumn.name,
                     operatorList: statistics,
-                    groupByList: groupBy && groupBy.length > 0 ? groupBy.map(g => g.key) : [],
+                    groupByList: aggregateTableConfig.groupBy && aggregateTableConfig.groupBy.length > 0 ? aggregateTableConfig.groupBy.map(g => g.key) : [],
                 };
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_AGGREGATETABLE_OPTION,
@@ -572,8 +561,8 @@ export default {
                     let columns = [column];
                     let dataSource = [data]
 
-                    if(groupBy && groupBy.length > 0) {
-                        columns = columns.concat(groupBy.map(g => {
+                    if(aggregateTableConfig.groupBy && aggregateTableConfig.groupBy.length > 0) {
+                        columns = columns.concat(aggregateTableConfig.groupBy.map(g => {
                             return {
                                 title: g.label,
                                 dataIndex: g.key
@@ -587,7 +576,7 @@ export default {
                         dataSource = resData.map(d => {
                             let obj = {};
                             stypes.map(st => obj[st.value] = d[st.value.toUpperCase()]);
-                            groupBy.map(g => obj[g.key] = d[g.key])
+                            aggregateTableConfig.groupBy.map(g => obj[g.key] = d[g.key])
                             return { ...data, ...obj };
                         });
                     }else {
@@ -610,7 +599,6 @@ export default {
                             data: dataSource
                         }
                     }
-                    console.log(config);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                 }else {
                     yield put({ type: 'silentSetField', name: 'chartOption', value: {} });