连接后台请求

app/components/chartDesigner/charts/echartsView.jsx

@@ -1,26 +1,48 @@
 import React from 'react';
 import Echarts from 'echarts-for-react';
+import { connect } from 'dva';
+import chartDesigner from '../../../models/chartDesigner';
+import chartOption from '../../../data/charts/option/bar.json';
+import resolveChartOption from './resolveChartOption';
+import { hashcode } from '../../../utils/baseUtils';
 
-class EchartsView extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            option: props.option
-        }
-    }
-
-    componentDidMount() {
-    }
+const EchartsView = ({ chartDesigner, dispatch }) => {
+    const option = resolveChartOption(chartDesigner.chartOption);
+    console.log(option);
+    return <Echarts
+        key={hashcode(option)}
+        option={option}
+        className='rc-echarts'
+        style={{height: '100%'}}
+    />
+}
 
-    render() {
-        return (
-            <Echarts ref={(e) => { this.echarts_react = e; }}
-                option={this.state.option}
-                className='rc-echarts'
-                style={{height: '100%'}}
-             />
-        )
-    }
+function mapStateToProps({ present: { chartDesigner } }) {
+    return { chartDesigner: chartDesigner }
 }
 
-export default EchartsView;
+export default connect(mapStateToProps)(EchartsView);
+
+// class EchartsView extends React.Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             option: props.option
+//         }
+//     }
+
+//     componentDidMount() {
+//     }
+
+//     render() {
+//         return (
+//             <Echarts ref={(e) => { this.echarts_react = e; }}
+//                 option={this.state.option}
+//                 className='rc-echarts'
+//                 style={{height: '100%'}}
+//              />
+//         )
+//     }
+// }
+
+// export default EchartsView;

app/components/chartDesigner/charts/resolveChartOption.js

@@ -0,0 +1,46 @@
+export default (config) => {
+    const { viewType, data } = config;
+    let option = {}
+    switch(viewType) {
+        case 'bar': {
+            option = barConfig(data.data);
+            break;
+        }
+        default:{
+        }
+    }
+    return option;
+}
+
+function barConfig(data) {
+    const { xAxis, yAxis } = data;
+
+    let o = {
+        tooltip : {
+            trigger: "axis",
+            axisPointer: {
+                type: "cross",
+                label: {
+                    backgroundColor: "#6a7985"
+                }
+            }
+        },
+        legend: {
+            show: true
+        },
+        xAxis: [{
+            type: 'category',
+            data: xAxis,
+            name: '横轴',
+        }],
+        yAxis: [{
+            name: '纵轴',
+            type: 'value'
+        }],
+        series: [{
+            data: yAxis,
+            type: 'bar'
+        }]
+    }
+    return o;
+}

app/components/chartDesigner/content.jsx

@@ -42,7 +42,7 @@ class ChartDesignerContent extends React.Component {
             // chartView = (<EchartsView option={chartOption}/>);
         }else if(viewType.key == 'bar') {
             configForm = (<BarConfigForm formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView option={chartOption}/>);
+            chartView = (<EchartsView />);
         }else if(viewType.key == 'pie') {
             // configForm = (<LineConfigForm formItemLayout={formItemLayout}/>);
             // chartView = (<EchartsView option={chartOption}/>);

app/components/chartDesigner/sections/barConfigForm.jsx

@@ -50,7 +50,7 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 							label: c.label,
 							children: [{
 								value: 'sum',
-								label: '和计'
+								label: '累计'
 							}, {
 								value: 'avg',
 								label: '平均值'
@@ -78,14 +78,21 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 					displayRender={(label, selectedOptions) => {
 						let menu = selectedOptions.length > 0 ? <Menu>
 							{selectedOptions[0].children.map((c, i) => {
-								return <Menu.Item key={i}>{c.label}</Menu.Item>
+								return <Menu.Item  data-value={c.value} key={i} onClick={(e) => {
+									let value = e.domEvent.target.getAttribute('data-value');
+									dispatch({ type: 'chartDesigner/barConfig/setYAxis', yAxis: [chartDesigner.barConfig.yAxis[0], value] });
+									e.domEvent.stopPropagation();
+								}}>{c.label}</Menu.Item>
 							})}
 						</Menu>: [];
 						let tag = selectedOptions.length > 0 ? <Dropdown
-							trigger='click'
+							trigger={['click']}
 							overlay={menu}
+							onChange={(value, selectedOptions) => {
+								debugger;return;
+							}}
 						>
-							<Tag size='small'>{label[1]}</Tag>
+							<Tag size='small' onClick={(e) => {e.stopPropagation()}}>{label[1]}</Tag>
 						</Dropdown>
 						: null;
 
@@ -101,45 +108,6 @@ const barConfigForm = ({ chartDesigner, dispatch, formItemLayout }) => {
 	);
 }
 
-// class barConfigForm extends React.Component {
-// 	render() {
-// 		const props = this.props;
-//         const columns = props.chartDesigner.columns;
-// 		const { formItemLayout } = props;
-
-// 		return (
-// 			<Form hideRequiredMark={true}>
-// 				<FormItem label='横轴' {...formItemLayout}>
-// 					<Select
-// 						value={props.chartDesigner.barConfig.xAxis}
-// 						labelInValue={true}
-// 						onChange={(value) => {
-// 							props.dispatch({ type: 'chartDesigner/barConfig/setXAxis', xAxis: value});
-// 						}}
-// 					>
-// 						{columns.map((c, i)=>{
-// 							return (<Option key={i} value={c.name}>{c.label}</Option>)
-// 						})}
-// 					</Select>
-// 				</FormItem>
-// 				<FormItem label='纵轴' {...formItemLayout}>
-// 					<Select 
-// 						value={props.chartDesigner.barConfig.yAxis}
-// 						labelInValue={true}
-// 						onChange={(value) => {
-// 							props.dispatch({ type: 'chartDesigner/barConfig/setYAxis', yAxis: value});
-// 						}}
-// 					>
-// 						{columns.map((c, i)=>{
-// 							return (<Option key={i} value={c.name}>{c.label}</Option>)
-// 						})}
-// 					</Select>
-// 				</FormItem>
-// 			</Form>
-// 		);
-// 	}
-// }
-
 function mapStateToProps({ present: { chartDesigner } }) {
     return { chartDesigner: chartDesigner }
 }

app/components/chartDesigner/sections/barConfigForm.less

@@ -1,5 +1,6 @@
 .barconfig-yxais {
     .ant-cascader-picker-label {
         height: 100%;
+        padding: 0 6px;
     }
 }

app/components/chartDesigner/sections/toolbar.jsx

@@ -132,7 +132,7 @@ class Toolar extends React.Component {
                     maskClosable={false}
                     destroyOnClose={true}
                 >
-                    <FilterBox columns={columns}/>  
+                    <FilterBox columns={columns} filterData={filters}/>  
                 </Modal>
             </div>
         );

app/constants/url.js

@@ -0,0 +1,7 @@
+const BASE_URL = 'http://192.168.253.129:8080';
+
+/**后台接口地址 */
+const URLS = {
+    CHART_BAR_OPTION: BASE_URL + '/showHistogram', // 请求柱状图展示数据
+}
+export default URLS

app/data/charts/option/bar.json

@@ -9,7 +9,7 @@
         }
     },
     "legend": {
-        "data":["邮件营销","联盟广告","视频广告","直接访问","搜索引擎"]
+        "show": true
     },
     "toolbox": {
         "feature": {

app/models/chartDesigner.js

@@ -1,27 +1,32 @@
 import * as service from '../services/chartDesigner'
 import { delay } from '../utils/baseUtils'
 import deepAssign from '../utils/deepAssign';
+import URLS from '../constants/url';
 
 export default {
     namespace: 'chartDesigner',
     state: {
         columns: [{
-            label: '姓名',
-            name: 'c1',
-            type: 'string'
-        }, {
             label: '编号',
-            name: 'c2',
+            name: 'ID',
             type: 'number'
         }, {
-            label: '出生日期',
-            name: 'c3',
-            type: 'time'
+            label: 'A值',
+            name: 'AMONEY',
+            type: 'number'
         }, {
-            label: '权限',
-            name: 'c4',
+            label: 'B值',
+            name: 'BMONEY',
+            type: 'number'
+        }, {
+            label: '姓别',
+            name: 'GROUP_BY',
             type: 'categorical',
-            selection: ['查看', '新增', '删除', '修改', '提交', '审核']
+            selection: ['chen', 'he', 'wu']
+        }, {
+            label: '姓名',
+            name: 'WHO',
+            type: 'string'
         }],
         allPermission: [
 			{ value: 'owner', name: '创建人' },
@@ -63,13 +68,34 @@ export default {
         style: {
 
         },
-        filters: []
+        filters: [],
+        chartOption: {}
     },
     reducers: {
         setModel(state, action) {
+            const { model } = action;
+            // action = { model: { baseConfig: { dataSource: { key: 'd1'} } } }
+            function assign(p, c) {
+                for(let k in c) {
+                    if(p.hasOwnProperty(k)) {
+                        if(typeof c[k] == 'object') {
+                            Object.assign({}, p, assign(p, c[k]));
+                        }else {
+                            let obj = p[k];
+                            obj[k] = c[k];
+                            return Object.assign({}, p, obj);
+                        }
+                    }else {
+                        return Object.assign({}, p, c[k]);
+                    }
+                }
+            }
+            let p = {baseConfig: 1};
+            console.log(p);
+            console.log(assign(p, { baseConfig: { dataSource: { key: 'd1'} } } ));
+            return state;
         },
         setTitle(state, action) {
-            console.log(action);
             let newState = Object.assign({}, state, {
                 header: {
                     label: action.text
@@ -204,13 +230,27 @@ export default {
                 }
                 return f;
             }) } };
+        },
+        setOption(state, action) {
+            return { ...state, ...{ chartOption: action.chartOption } };
         }
     },
     effects: {
-        *['a'](action, { call, put }) {
-            const data = yield call(service.fetch);
-            console.log(data);
-            yield put({ type: 'setTitle', text: '和哈哈哈哈哈哈' });
+        *['a'](action, { select, call, put }) {
+            const chartDesigner = yield select(state => state.present.chartDesigner);
+            const { barConfig } = chartDesigner;
+            const data = yield call(service.fetch, {
+                url: URLS.CHART_BAR_OPTION,
+                body: {
+                    "tableName": "TEST_BI_DATA",
+                    "groups": [],
+                    "xAxis": barConfig.xAxis.key,
+                    "yAxis": barConfig.yAxis[0],
+                    "dataType": barConfig.yAxis[1]
+                }
+            });
+            data.viewType = 'bar';
+            yield put({ type: 'setOption', chartOption: data });
         },
         *test({payload:todo},{put,call}){
            

app/services/chartDesigner.js

@@ -1,7 +1,19 @@
 import request from '../utils/request'
 
-export function fetch() {
-  return request(`http://localhost:8001/api/users?_page=1&_limit=3`);
+export function fetch(option) {
+  // let client =  new XMLHttpRequest();
+  // client.open('POST', 'http://192.168.253.129:8080/showHistogram');
+  // client.setRequestHeader('Content-Type', 'application/json');
+  // client.send(JSON.stringify(values));
+  const { url, body } = option;
+  return request(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body)
+  });
+  // return request(`http://localhost:8001/api/users?_page=1&_limit=3`);
 }
 
 export function remove(id) {