Browse Source

折线图数据解析逻辑更新

zhuth 6 years ago
parent
commit
a412ebc150

+ 17 - 0
src/components/chartDesigner/sections/style/line.jsx

@@ -319,6 +319,23 @@ class LineStyle extends React.Component {
                 />
             </FormItem>
             <Divider>横轴标签</Divider>
+            <FormItem label={<Tooltip title="当横轴标签文本全部显示会相互覆盖时可以隐藏部分标签文本">隐藏重叠标签</Tooltip>} {...formItemLayout}>
+                <Checkbox
+                    checked={lineStyle.xLabelHiddenCover === undefined ? true : lineStyle.xLabelHiddenCover}
+                    onChange={e => {
+                        let checked = e.target.checked;
+                        let fields = [{ name: 'styleConfig', value: deepAssign(styleConfig, { line: { xLabelHiddenCover: checked } }) }];
+                        if(!!chartOption.baseOption) {
+                            fields.push({ name: 'chartOption', value: deepAssign(chartOption, { baseOption: { xAxis: { 0: {
+                                axisLabel: {
+                                    interval: checked ? 'auto' : 0
+                                }
+                            } } } }) });
+                        }
+                        dispatch({ type: 'chartDesigner/setFields', fields });
+                    }}
+                />
+            </FormItem>
             <FormItem label={<Tooltip title="横轴标签与横轴之间的距离">位置距离</Tooltip>} {...formItemLayout}>
                 <InputNumber
                     defaultValue={(lineStyle.xLabelMargin === '' || lineStyle.xLabelMargin === null || lineStyle.xLabelMargin === undefined) ? null : lineStyle.xLabelMargin}

+ 33 - 43
src/models/parseChartOption.js

@@ -95,10 +95,10 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
                 }else if(gv === 'month') {
                     xv = d.replace('-M', '-');
                 }else if(gv === 'quarter') {
-                    let arr = d.split('-Q');
+                    let arr = d.split('-');
                     xv = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
                 }else if(gv === 'week') {
-                    let arr = d.split('-W');
+                    let arr = d.split('-');
                     xv = arr[0] + '-' + arr[1] + '周'
                 }
                 return xv;
@@ -149,35 +149,53 @@ function barOption(data, barConfig, themeConfig, styleConfig) {
 }
 
 function lineOption(data, lineConfig, themeConfig, styleConfig) {
-    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin,
+    const { labelSymbol, xNameLocation, xNameGap, xNameRotate, xLabelRotate, xLabelMargin, xLabelHiddenCover,
         yNameLocation, yNameGap, yNameRotate, stack, labelVisible, labelPosition, labelDistance, labelRotate,
         lineSmooth, labelSymbolSize, dataZoomVisible } = styleConfig;
     const { xAxis, yAxis, groupBy } = lineConfig;
     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
-    let legendVisible = !!groupBy && !!groupBy.key
+    let legendVisible = !!groupBy && !!groupBy.key;
     data.serieses = data.serieses || [];
 
     let option = deepAssign({
-        tooltip: {
-            trigger: 'axis',
+        tooltip : {
+            trigger: "axis",
             axisPointer: {
-                type: 'cross'
+                type: "cross"
             }
         },
         legend: {
             show: legendVisible
         },
-        xAxis:  [{
+        xAxis: [{
             name: xTitle || '横轴',
-            type: 'time',
+            type: 'category',
             nameLocation: (xNameLocation === '' || xNameLocation === null || xNameLocation === undefined) ? 'end' : xNameLocation,
             nameGap: (xNameGap === '' || xNameGap === null || xNameGap === undefined) ? 15 : Number(xNameGap),
             nameRotate: (xNameRotate === '' || xNameRotate === null || xNameRotate === undefined) ? 0 : Number(xNameRotate),
             axisLabel: {
+                interval: xLabelHiddenCover === undefined ? 'auto' : (!!xLabelHiddenCover ? 'auto' : 0),
                 rotate: (xLabelRotate === '' || xLabelRotate === null || xLabelRotate === undefined) ? 0 : Number(xLabelRotate),
                 margin: (xLabelMargin === '' || xLabelMargin === null || xLabelMargin === undefined) ? 8 : Number(xLabelMargin),
             },
+            data: data.xAxis.map(d => {
+                let gv= 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('-');
+                    xv = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
+                }else if(gv === 'week') {
+                    let arr = d.split('-');
+                    xv = arr[0] + '-' + arr[1] + '周'
+                }
+                return xv;
+            }),
         }],
         yAxis: [{
             name: yTitle || '纵轴',
@@ -186,11 +204,11 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
             nameGap: (yNameGap === '' || yNameGap === null || yNameGap === undefined) ? 15 : Number(yNameGap),
             nameRotate: (yNameRotate === '' || yNameRotate === null || yNameRotate === undefined) ? 0 : Number(yNameRotate),
         }],
-        
         series: data.serieses.map(s => {
             return {
-                name: s.name,
+                name: groupBy ? s.name : (yAxis.column.label || s.name),
                 type: 'line',
+                data: s.value.map(v => numberFormat(v)),
                 stack: !!groupBy && !!groupBy.key && !!stack,
                 label: {
                     normal: {
@@ -198,23 +216,18 @@ function lineOption(data, lineConfig, themeConfig, styleConfig) {
                         position: labelPosition || 'inside',
                         distance: (labelDistance === '' || labelDistance === null || labelDistance === undefined) ? 5 : Number(labelDistance),
                         rotate: (labelRotate === '' || labelRotate === null || labelRotate === undefined) ? 0 : Number(labelRotate),
-                        formatter: function(params) {
-                            return params.value[1]
-                        }
-                    },
+                        formatter: '{c}'
+                    }
                 },
                 symbol: !labelSymbol ? 'emptyCircle' : labelSymbol,
                 symbolSize: (labelSymbolSize === '' || labelSymbolSize === null || labelSymbolSize === undefined) ? 4 : Number(labelSymbolSize),
                 smooth: !!lineSmooth,
-                data: s.mdata.map(m => {
-                    return m ? [m.date, numberFormat(m.value)] : [null, 0]
-                }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
             }
         }),
         dataZoom: {
             show: !!dataZoomVisible
         }
-    }, themeConfig, styleConfig);
+    }, themeConfig);
 
     let mediaOption = {
         baseOption: option,
@@ -233,30 +246,6 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
-        legend: {
-            data: data.xAxis.map(d => {
-                let gv= pieConfig.xAxis.granularity.value;
-                let xv = d;
-                if(!d) {
-                    xv = '空';
-                }else {
-                    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;
-            }),
-        },
         grid: {
             left: 50,
             right: 50,
@@ -442,6 +431,7 @@ function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleCon
                     o[group2Name] = g;
                     statistics.forEach(s => {
                         let v = list.find(l => l[group2Name] === g);
+                        console.log(v);
                         o[s.name] = v ? (typeof v[s.name] === 'number' ? numberFormat(v[s.name]) : '') : '';
                     });
                     return o;

+ 6 - 1
src/services/index.js

@@ -48,7 +48,12 @@ export function fetch(option) {
                 }
             }
 
-            return request(url, opt, timeout).then(data => {
+            return request(url, opt, timeout).then(data=> {
+                if(!data) {
+                    throw new Error('请求异常');
+                }
+                return data;
+            }).then(data => {
                 if(requestType === 'file') {
                     let blob = data.blob().then(blob => {
                         if (window.navigator.msSaveOrOpenBlob) {