diff --git a/data-room-ui/packages/G2Plots/折线图/基础折线图.js b/data-room-ui/packages/G2Plots/折线图/基础折线图.js index 6cf63c3d..222b0d23 100644 --- a/data-room-ui/packages/G2Plots/折线图/基础折线图.js +++ b/data-room-ui/packages/G2Plots/折线图/基础折线图.js @@ -4,7 +4,7 @@ * @Author: xing.heng */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -317,10 +317,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -328,10 +328,19 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, active: true, inactive: false, @@ -488,7 +497,20 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -544,9 +566,13 @@ const option = { } }, label: { + // 可使用函数 (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; autoRotate: false, autoHide: false, autoEllipsis: true, + // autoHide的类型详见@antv/component/src/axis/overlap/auto-hide.ts + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/基础折线点图.js b/data-room-ui/packages/G2Plots/折线图/基础折线点图.js index dd9ccf2c..bf73ad81 100644 --- a/data-room-ui/packages/G2Plots/折线图/基础折线点图.js +++ b/data-room-ui/packages/G2Plots/折线图/基础折线点图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -308,10 +308,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -319,10 +319,19 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, active: true, inactive: false, @@ -478,7 +487,21 @@ const data = [ { date: '2023年', value: 400 } ] // 配置处理脚本 -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` + // 数据处理脚本 const dataHandler = '' @@ -534,6 +557,8 @@ const option = { autoRotate: false, autoHide: false, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/基础曲线图.js b/data-room-ui/packages/G2Plots/折线图/基础曲线图.js index 7d7f35f4..0eb39885 100644 --- a/data-room-ui/packages/G2Plots/折线图/基础曲线图.js +++ b/data-room-ui/packages/G2Plots/折线图/基础曲线图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -208,10 +208,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -219,10 +219,19 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, active: true, inactive: false, @@ -379,7 +388,20 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -412,6 +434,8 @@ const option = { autoRotate: false, autoHide: false, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/多折线动画图.js b/data-room-ui/packages/G2Plots/折线图/多折线动画图.js index 466c9360..23d8708f 100644 --- a/data-room-ui/packages/G2Plots/折线图/多折线动画图.js +++ b/data-room-ui/packages/G2Plots/折线图/多折线动画图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -334,22 +334,31 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, - active: true, - inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -511,11 +520,24 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\n if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +} +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -545,6 +567,8 @@ const option = { autoRotate: true, autoHide: false, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/多折线图.js b/data-room-ui/packages/G2Plots/折线图/多折线图.js index d1b00071..1501be42 100644 --- a/data-room-ui/packages/G2Plots/折线图/多折线图.js +++ b/data-room-ui/packages/G2Plots/折线图/多折线图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -397,10 +397,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -408,11 +408,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -578,7 +589,17 @@ if (option.legendEnable) { option.legend.itemName = option.legendItemName } option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] -` +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -635,6 +656,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 0, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js b/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js index 5c34dcbb..9600a813 100644 --- a/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js +++ b/data-room-ui/packages/G2Plots/折线图/多阶梯折线图.js @@ -1,6 +1,6 @@ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -285,10 +285,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -296,11 +296,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -460,11 +471,25 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\n if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` + // 数据处理脚本 const dataHandler = '' @@ -506,6 +531,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 0, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js b/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js index 07004140..3a50b277 100644 --- a/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js +++ b/data-room-ui/packages/G2Plots/折线图/折线趋势填充图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Line' // 标题 @@ -350,10 +350,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -361,11 +361,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -525,11 +536,25 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\n if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` + // 数据处理脚本 const dataHandler = '' @@ -559,6 +584,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 0, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js b/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js index 927afef3..9d878863 100644 --- a/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/分组柱状图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Column' // 标题 @@ -327,10 +327,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -338,11 +338,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -498,11 +509,24 @@ const data = [ ] // 配置处理脚本 -const optionHandler = ' option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;\n' + - ' if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -551,6 +575,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js b/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js index 69968898..8cb95b08 100644 --- a/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/圆角柱状图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Column' // 标题 @@ -327,10 +327,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -338,11 +338,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -498,11 +509,24 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - ' if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -561,6 +585,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js index 2ea31ce2..4a126e2a 100644 --- a/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/基础柱状图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Column' // 标题 @@ -281,10 +281,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -292,11 +292,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -445,7 +456,20 @@ const data = [ { date: '2023年', value: 400 } ] // 配置处理脚本 -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -487,6 +511,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js b/data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js index 27abd9d3..7d4f2412 100644 --- a/data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js +++ b/data-room-ui/packages/G2Plots/柱状图/堆叠柱状图.js @@ -5,7 +5,7 @@ */ // 配置版本号 -const version = '2023111401' +const version = '2023111501' // 分类 const category = 'Column' // 标题 @@ -327,10 +327,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -338,11 +338,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -498,11 +509,24 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - ' if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -557,6 +581,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/面积图/基础面积图.js b/data-room-ui/packages/G2Plots/面积图/基础面积图.js index 304df407..42f62bea 100644 --- a/data-room-ui/packages/G2Plots/面积图/基础面积图.js +++ b/data-room-ui/packages/G2Plots/面积图/基础面积图.js @@ -349,10 +349,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -360,11 +360,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -516,16 +527,29 @@ const data = [ ] // 配置处理脚本 -const optionHandler = ' let pointEnable = setting.find(settingItem=>settingItem.field === \'point_shape\').value\n' + - ' if (pointEnable === false) {\n' + - ' option.point = false\n' + - ' } else {\n' + - ' option.point = {shape: pointEnable}\n' + - ' let pointColor = setting.find(settingItem=>settingItem.field === \'point_color\').value\n' + - ' option.point.color = pointColor\n' + - ' option.point.size = setting.find(settingItem=>settingItem.field === \'point_size\').value\n' + - '};' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +let pointEnable = setting.find(settingItem=>settingItem.field === \'point_shape\').value +if (pointEnable === false) { + option.point = false +} else { + option.point = {shape: pointEnable} + let pointColor = setting.find(settingItem=>settingItem.field === 'point_color').value + option.point.color = pointColor + option.point.size = setting.find(settingItem=>settingItem.field === 'point_size').value +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -574,6 +598,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js b/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js index 14d282ee..170cd74d 100644 --- a/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js +++ b/data-room-ui/packages/G2Plots/面积图/堆叠面积图.js @@ -395,10 +395,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -406,11 +406,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -570,11 +581,24 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\n if (option.legendEnable) {\n' + - ' option.legend.itemName = option.legendItemName\n' + - ' };' + - 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +if (option.legendEnable) { + option.legend.itemName = option.legendItemName +}; +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -627,6 +651,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12 diff --git a/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js b/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js index c695a73d..0b3dee6b 100644 --- a/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js +++ b/data-room-ui/packages/G2Plots/面积图/渐变色面积图.js @@ -348,10 +348,10 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时旋转', + label: '标签过多时隐藏', type: 'switch', - field: 'xAxis_label_autoRotate', - optionField: 'xAxis.label.autoRotate', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', value: true, active: true, inactive: false, @@ -359,11 +359,22 @@ const setting = [ groupName: 'xAxis' }, { - label: '标签过多时隐藏', + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', type: 'switch', - field: 'xAxis_label_autoHide', - optionField: 'xAxis.label.autoHide', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', value: true, + active: true, + inactive: false, tabName: 'custom', groupName: 'xAxis' }, @@ -513,7 +524,20 @@ const data = [ { date: '2022年', value: 300 }, { date: '2023年', value: 400 } ] -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' +const optionHandler = + ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value +if(autoHide){ + let minGap = option.xAxis.label.autoHideMinGap + option.xAxis.label.autoHide = { + type: 'equidistance', + cfg: { minGap: minGap } + } +} else { + option.xAxis.label.autoHide = false +} + ` // 数据处理脚本 const dataHandler = '' @@ -561,6 +585,8 @@ const option = { autoRotate: false, autoHide: true, autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, style: { fill: '#8C8C8C', fontSize: 12