| | |
| | | export function getOptionForm (card, columns) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | let shapes = [] |
| | | let shape = card.shape |
| | | |
| | | if (card.chartType === 'line') { |
| | | shapes = [ |
| | | { field: 'smooth', label: 'smooth(平滑线)' }, |
| | | { field: 'line', label: 'line(直线)' }, |
| | | { field: 'dot', label: 'dot(点状线)' }, |
| | | { field: 'dash', label: 'dash(虚线)' }, |
| | | { field: 'hv', label: 'hv(水平-垂直线)' }, |
| | | { field: 'vh', label: 'vh(垂直-水平线)' }, |
| | | { field: 'hvh', label: 'hvh(水平-垂直-水平线)' }, |
| | | { field: 'vhv', label: 'vhv(垂直-水平-垂直线)' } |
| | | { field: 'smooth', label: '平滑线' }, |
| | | { field: 'line', label: '直线' }, |
| | | { field: 'dot', label: '点状线' }, |
| | | { field: 'dash', label: '虚线' }, |
| | | { field: 'hv', label: '水平-垂直线' }, |
| | | { field: 'vh', label: '垂直-水平线' }, |
| | | { field: 'hvh', label: '水平-垂直-水平线' }, |
| | | { field: 'vhv', label: '垂直-水平-垂直线' } |
| | | ] |
| | | } else if (card.chartType === 'bar') { |
| | | shapes = [ |
| | | { field: 'rect', label: 'rect(矩形)' }, |
| | | { field: 'hollow-rect', label: 'hollow-rect(空心矩形)' }, |
| | | { field: 'rect', label: '矩形' }, |
| | | { field: 'hollow-rect', label: '空心矩形' }, |
| | | // { field: 'hollow', label: 'hollow(空心矩形)' }, |
| | | // { field: 'line', label: 'line(线条)' }, |
| | | // { field: 'tick', label: 'tick(波动)' }, |
| | | // { field: 'funnel', label: 'funnel(漏斗图)' }, |
| | | { field: 'pyramid', label: 'pyramid(金字塔)' } |
| | | { field: 'pyramid', label: '金字塔' }, |
| | | { field: 'barChart', label: '条形图' }, |
| | | { field: 'roseChart', label: '玫瑰图' }, |
| | | ] |
| | | |
| | | if (card.transpose === 'true') { |
| | | shape = 'barChart' |
| | | } else if (card.coordinate === 'polar') { |
| | | shape = 'roseChart' |
| | | } |
| | | } |
| | | |
| | | if (!shape) { |
| | | shape = shapes[0].field |
| | | } |
| | | |
| | | let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype)) |
| | |
| | | if (card.y_label !== 'hidden') { |
| | | tickVals.push('y_label') |
| | | } |
| | | |
| | | let datatype = card.datatype || 'query' |
| | | if (card.enabled === 'true') { |
| | | datatype = 'custom' |
| | | } |
| | | |
| | | return [ |
| | | { |
| | | type: 'radio', |
| | | field: 'datatype', |
| | | label: '数据类型', |
| | | initval: card.datatype || 'query', |
| | | label: '图形类型', |
| | | initval: datatype, |
| | | tooltip: '统计图表适用于展示数据类型为动态值。', |
| | | required: false, |
| | | $trans: true, |
| | | options: [ |
| | | { value: 'query', label: '查询' }, |
| | | { value: 'query', label: card.chartType !== 'line' ? '柱状图' : '折线图' }, |
| | | { value: 'custom', label: '自定义图形' }, |
| | | { value: 'statistics', label: '统计' } |
| | | ], |
| | | controlFields: [ |
| | | {field: 'InfoType', values: ['statistics']}, |
| | | {field: 'InfoValue', values: ['statistics']}, |
| | | {field: 'Yaxis', values: ['query']}, |
| | | {field: 'Yaxis', values: ['query', 'custom']}, |
| | | {field: 'adjust', values: ['query', 'statistics']}, |
| | | {field: 'area', values: ['query', 'statistics']}, |
| | | {field: 'show', values: ['query', 'statistics']}, |
| | | {field: 'selectColor', values: ['query']}, |
| | | {field: 'barSize', values: card.chartType !== 'line' ? ['query', 'custom', 'statistics'] : ['custom']}, |
| | | {field: 'mutilBar', values: ['custom']}, |
| | | ] |
| | | }, { |
| | | type: 'select', |
| | |
| | | options: yfields |
| | | }, { |
| | | type: 'select', |
| | | field: 'shape', |
| | | label: '形状', |
| | | initval: shape, |
| | | required: false, |
| | | options: shapes |
| | | }, { |
| | | type: 'multiselect', |
| | | field: 'Yaxis', |
| | | label: 'Y-轴', |
| | | initval: card.Yaxis || [], |
| | | required: true, |
| | | options: yfields |
| | | }, { |
| | | type: 'select', |
| | | field: 'legend', |
| | | label: '图例位置', |
| | | initval: card.legend || 'bottom', |
| | |
| | | { field: 'hidden', label: '隐藏' } |
| | | ] |
| | | }, { |
| | | type: 'multiselect', |
| | | field: 'Yaxis', |
| | | label: 'Y-轴', |
| | | initval: card.Yaxis || [], |
| | | required: true, |
| | | options: yfields |
| | | }, { |
| | | type: 'select', |
| | | field: 'shape', |
| | | label: '形状', |
| | | initval: card.shape || (shapes[0] && shapes[0].field), |
| | | required: false, |
| | | options: shapes |
| | | }, { |
| | | type: 'radio', |
| | | field: 'tooltip', |
| | | label: '悬浮提示', |
| | |
| | | value: 'false', |
| | | label: '隐藏' |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'point', |
| | | label: '点图', |
| | | initval: card.point || 'false', |
| | | required: false, |
| | | forbid: !['line'].includes(card.chartType), |
| | | options: [{ |
| | | value: 'true', |
| | | label: '显示' |
| | | }, { |
| | | value: 'false', |
| | | label: '隐藏' |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'transpose', |
| | | label: '变换', |
| | | initval: card.transpose || 'false', |
| | | tooltip: '横纵坐标轴交换', |
| | | forbid: card.chartType === 'line', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | label: '是' |
| | | }, { |
| | | value: 'false', |
| | | label: '否' |
| | | }] |
| | | // }, { |
| | | // type: 'radio', |
| | | // field: 'transpose', |
| | | // label: '变换', |
| | | // initval: card.transpose || 'false', |
| | | // tooltip: '横纵坐标轴交换', |
| | | // forbid: card.chartType === 'line', |
| | | // required: false, |
| | | // options: [{ |
| | | // value: 'true', |
| | | // label: '是' |
| | | // }, { |
| | | // value: 'false', |
| | | // label: '否' |
| | | // }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'show', |
| | | label: '显示', |
| | | initval: card.show || 'value', |
| | | tooltip: '当使用自定义设置时,可在显示(值/%)处单独设置显示类型。注:自定义为空时使用此处设置。', |
| | | // tooltip: '当使用自定义设置时,可在显示(值/%)处单独设置显示类型。注:自定义为空时使用此处设置。', |
| | | required: false, |
| | | options: [{ |
| | | value: 'value', |
| | |
| | | controlFields: [ |
| | | {field: 'labelColor', values: ['true']} |
| | | ] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'labelColor', |
| | | label: '标注颜色', |
| | | initval: card.labelColor || 'system', |
| | | tooltip: '使用系统色时,使用色系选项设置的系统颜色,使用自定义为颜色设置中定义的图形颜色。', |
| | | required: false, |
| | | options: [{ |
| | | value: 'system', |
| | | label: '系统' |
| | | }, { |
| | | value: 'custom', |
| | | label: '自定义' |
| | | }] |
| | | // }, { |
| | | // type: 'radio', |
| | | // field: 'labelColor', |
| | | // label: '标注颜色', |
| | | // initval: card.labelColor || 'system', |
| | | // tooltip: '使用系统色时,使用色系选项设置的系统颜色,使用自定义为颜色设置中定义的图形颜色。', |
| | | // required: false, |
| | | // options: [{ |
| | | // value: 'system', |
| | | // label: '系统' |
| | | // }, { |
| | | // value: 'custom', |
| | | // label: '自定义' |
| | | // }] |
| | | // }, { |
| | | // type: 'radio', |
| | | // field: 'labelValue', |
| | |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'mutilBar', |
| | | label: '多柱排列', |
| | | initval: card.mutilBar || 'dodge', |
| | | required: false, |
| | | options: [{ |
| | | value: 'dodge', |
| | | label: '分组' |
| | | }, { |
| | | value: 'stack', |
| | | label: '堆叠' |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'point', |
| | | label: '点图', |
| | | initval: card.point || 'false', |
| | | required: false, |
| | | forbid: card.chartType === 'bar', |
| | | options: [{ |
| | | value: 'true', |
| | | label: '显示' |
| | | }, { |
| | | value: 'false', |
| | | label: '隐藏' |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'area', |
| | | label: '面积图', |
| | | initval: card.area || 'false', |
| | | required: false, |
| | | forbid: ['bar'].includes(card.chartType), |
| | | forbid: card.chartType === 'bar', |
| | | options: [{ |
| | | value: 'true', |
| | | label: '显示' |
| | |
| | | value: 'false', |
| | | label: '不显示' |
| | | }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'coordinate', |
| | | label: '坐标', |
| | | initval: card.coordinate || 'angle', |
| | | required: false, |
| | | forbid: card.chartType === 'line', |
| | | options: [{ |
| | | value: 'angle', |
| | | label: '二维坐标' |
| | | }, { |
| | | value: 'polar', |
| | | label: '极坐标' |
| | | }] |
| | | // }, { |
| | | // type: 'radio', |
| | | // field: 'coordinate', |
| | | // label: '坐标', |
| | | // initval: card.coordinate || 'angle', |
| | | // required: false, |
| | | // forbid: card.chartType === 'line', |
| | | // options: [{ |
| | | // value: 'angle', |
| | | // label: '二维坐标' |
| | | // }, { |
| | | // value: 'polar', |
| | | // label: '极坐标' |
| | | // }] |
| | | }, { |
| | | type: 'checkbox', |
| | | field: 'axis', |
| | |
| | | // value: 'hidden', |
| | | // label: '隐藏' |
| | | // }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'download', |
| | | label: '导出图片', |
| | | initval: card.download || 'forbid', |
| | | required: false, |
| | | forbid: appType === 'mob', |
| | | options: [{ |
| | | value: 'forbid', |
| | | label: '禁用' |
| | | }, { |
| | | value: 'enable', |
| | | label: '启用' |
| | | }] |
| | | // }, { |
| | | // type: 'radio', |
| | | // field: 'download', |
| | | // label: '导出图片', |
| | | // initval: card.download || 'forbid', |
| | | // required: false, |
| | | // forbid: appType === 'mob', |
| | | // options: [{ |
| | | // value: 'forbid', |
| | | // label: '禁用' |
| | | // }, { |
| | | // value: 'enable', |
| | | // label: '启用' |
| | | // }] |
| | | }, { |
| | | type: 'radio', |
| | | field: 'empty', |
| | |
| | | max: 200, |
| | | precision: 0, |
| | | initval: card.barSize, |
| | | forbid: !['bar'].includes(card.chartType), |
| | | required: false |
| | | }, { |
| | | type: 'number', |
| | |
| | | max: 200, |
| | | precision: 0, |
| | | initval: card.barRadius || 0, |
| | | forbid: !['bar'].includes(card.chartType), |
| | | forbid: card.chartType === 'line', |
| | | required: false |
| | | }, { |
| | | type: 'number', |
| | |
| | | initval: card.rotate, |
| | | forbid: appType !== 'mob', |
| | | required: false |
| | | }, { |
| | | type: 'multiselect', |
| | | field: 'interaction', |
| | | label: '交互效果', |
| | | initval: card.interaction || [], |
| | | required: false, |
| | | forbid: appType === 'mob', |
| | | options: [ |
| | | { value: 'element-active', label: '元素聚焦' }, |
| | | { value: 'element-selected', label: '元素选中(多选)' }, |
| | | { value: 'element-single-selected', label: '元素选中(单选)' }, |
| | | { value: 'active-region', label: '背景框' }, |
| | | { value: 'view-zoom', label: '视图缩放' }, |
| | | { value: 'element-highlight', label: '元素高亮' }, |
| | | { value: 'element-highlight-by-color', label: '同色元素高亮' }, |
| | | { value: 'element-highlight-by-x', label: '同X轴元素高亮' }, |
| | | { value: 'legend-filter', label: '图例过滤' }, |
| | | { value: 'legend-active', label: '图例聚焦' }, |
| | | { value: 'legend-highlight', label: '图例高亮' }, |
| | | { value: 'brush', label: '选框过滤' }, |
| | | ], |
| | | controlFields: [ |
| | | {field: 'selectColor', values: ['element-selected', 'element-single-selected']}, |
| | | ] |
| | | // }, { |
| | | // type: 'multiselect', |
| | | // field: 'interaction', |
| | | // label: '交互效果', |
| | | // initval: card.interaction || [], |
| | | // required: false, |
| | | // forbid: appType === 'mob', |
| | | // options: [ |
| | | // { value: 'element-active', label: '元素聚焦' }, |
| | | // { value: 'element-selected', label: '元素选中(多选)' }, |
| | | // { value: 'element-single-selected', label: '元素选中(单选)' }, |
| | | // { value: 'active-region', label: '背景框' }, |
| | | // { value: 'view-zoom', label: '视图缩放' }, |
| | | // { value: 'element-highlight', label: '元素高亮' }, |
| | | // { value: 'element-highlight-by-color', label: '同色元素高亮' }, |
| | | // { value: 'element-highlight-by-x', label: '同X轴元素高亮' }, |
| | | // { value: 'legend-filter', label: '图例过滤' }, |
| | | // { value: 'legend-active', label: '图例聚焦' }, |
| | | // { value: 'legend-highlight', label: '图例高亮' }, |
| | | // { value: 'brush', label: '选框过滤' }, |
| | | // ], |
| | | // controlFields: [ |
| | | // {field: 'selectColor', values: ['element-selected', 'element-single-selected']}, |
| | | // ] |
| | | }, { |
| | | type: 'color', |
| | | field: 'selectColor', |
| | | label: '选中颜色', |
| | | initval: card.selectColor || '', |
| | | tooltip: '选中柱形图的颜色,启用自定义设置时无效。', |
| | | forbid: !['bar'].includes(card.chartType), |
| | | tooltip: '选中柱形图的颜色。', |
| | | forbid: card.chartType === 'line', |
| | | allowClear: true, |
| | | required: false |
| | | } |