diff --git a/data-room-ui/packages/G2Plots/images/componentLogo/基础玉珏图.png b/data-room-ui/packages/G2Plots/images/componentLogo/基础玉珏图.png new file mode 100644 index 00000000..d771816f Binary files /dev/null and b/data-room-ui/packages/G2Plots/images/componentLogo/基础玉珏图.png differ diff --git a/data-room-ui/packages/G2Plots/plotListSort.js b/data-room-ui/packages/G2Plots/plotListSort.js index f4ffb465..ecb7214b 100644 --- a/data-room-ui/packages/G2Plots/plotListSort.js +++ b/data-room-ui/packages/G2Plots/plotListSort.js @@ -26,6 +26,9 @@ export default [ '基础饼图', '基础环图', '玫瑰图', + + '基础玉珏图', + '水波图', '矩形水波图', '钻石水波图', diff --git a/data-room-ui/packages/G2Plots/条形图/基础条形图.js b/data-room-ui/packages/G2Plots/条形图/基础条形图.js index e47d9e22..f38b0ea1 100644 --- a/data-room-ui/packages/G2Plots/条形图/基础条形图.js +++ b/data-room-ui/packages/G2Plots/条形图/基础条形图.js @@ -119,6 +119,39 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '数据标签位置', + type: 'select', // 设置组件类型 + field: 'label_position', // 字段 + optionField: 'label.position', // 对应options中的字段 + // 是否多选 + multiple: false, + value: 'middle', + tabName: 'custom', + options: [ + { + label: '顶部', + value: 'top' + }, + { + label: '居中', + value: 'middle' + }, + { + label: '底部', + value: 'bottom' + }, + { + label: '左侧', + value: 'left' + }, + { + label: '右侧', + value: 'right' + } + ], + groupName: 'graph' + }, { label: '条形颜色', // 设置组件类型 @@ -131,6 +164,41 @@ const setting = [ tabName: 'custom', groupName: 'graph' }, + { + label: '条形背景颜色', + type: 'colorPicker', + field: 'barBackground_style_fill', + optionField: 'barBackground.style.fill', + // 是否多选 + multiple: false, + value: 'rgba(0,0,0,0)', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '条形最小宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'minBarWidth', + // 对应options中的字段 + optionField: 'minBarWidth', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '条形最大宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'maxBarWidth', + // 对应options中的字段 + optionField: 'maxBarWidth', + value: 100, + tabName: 'custom', + groupName: 'graph' + }, // 网格线 grid { label: '虚线', @@ -492,15 +560,19 @@ const data = [ ] // 配置处理脚本 -const optionHandler = 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]' + - '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' + - '\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0]' +const optionHandler = ` +option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value] +option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false; +const radiusNum = setting.find(settingItem=>settingItem.field === 'radiusNum').value; +option.barStyle.radius = [radiusNum,radiusNum,0,0] +const yFieldValue = setting.find(settingItem=>settingItem.field === 'yField').value +if (yFieldValue) { + option.seriesField = yFieldValue +} +` // 数据处理脚本 -const dataHandler = 'const yFieldValue = setting.find(settingItem=>settingItem.field === \'yField\').value\n' + - 'if (yFieldValue) {\n' + - ' option.seriesField = yFieldValue\n' + - '}' +const dataHandler = `` // 图表配置 new Line('domName', option) const option = { @@ -510,6 +582,8 @@ const option = { data, xField: 'value', yField: 'year', + minBarWidth: 0, + maxBarWidth: 100, // shape: 'default', // 条形图形状 seriesField: 'year', color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], @@ -527,6 +601,11 @@ const option = { barStyle: { radius: [10, 10, 0, 0]// 设置条形图的圆角 }, + barBackground: { + style: { + fill: 'rgba(0,0,0,0)', + }, + }, label: { position: 'middle', layout:{}, diff --git a/data-room-ui/packages/G2Plots/玉珏图/基础玉珏图.js b/data-room-ui/packages/G2Plots/玉珏图/基础玉珏图.js new file mode 100644 index 00000000..3a209bc7 --- /dev/null +++ b/data-room-ui/packages/G2Plots/玉珏图/基础玉珏图.js @@ -0,0 +1,224 @@ + +const version = '20231107' +// 分类 +const category = 'RadialBar' +// 标题 +const title = '基础玉珏图' +// 类别 +const chartType = 'RadialBar' +// 用于标识,唯一,title的中文转拼音 +const name = 'JiChuYuJueTu' + +// 右侧配置项 +const setting = [ + { + // 在右侧设置中显示的名称 + label: "维度", + // 设置组件类型, select/input/inputNumber/colorPicker/ColorMultipleSelect/radio/switch + type: "select", + // 字段, 用于设置option中的字段, 若option中的字段是对象,使用_连接,比如:point_style_stroke, 若option中的字段是单个单词,直接使用 + field: "xField", + // 对应options中的字段,若指向option中的对象,使用.连接,比如:point.style.stroke + optionField: "xField", // 对应options中的字段 + // 是否多选,仅对select有效 + multiple: false, + // 绑定的值 + value: '', + // tab页。 data: 数据, custom: 自定义,自定义的配置将会显示在其他的tab + tabName:'data', + // 当type为select 且tabName为custom时,options为下拉框的选项;若tab为data, options数据来源为数据集中的数据 + options: [ + { + label: '年份', + value: 'year' + } + ] + }, + { + label: "指标", + // 设置组件类型 + type: "select", + // 字段 + field: "yField", + // 对应options中的字段 + optionField: "yField", + // 是否多选 + multiple: false, + // 绑定的值 + value: '', + // tab页。 data: 数据, custom: 自定义,自定义的配置将会显示在其他的tab + tabName:'data' + }, + // 图表配置 + { + label: '颜色配置', + // 设置组件类型(这里的colorSelect为封装过的组件) + type: 'colorSelect', + // 字段 + field: 'color', + // 对应options中的字段 + optionField: 'color', + // 是否多选 + multiple: false, + value: ["#5B8FF9", "#5AD8A6", "#5D7092", "#F6BD16", "#E8684A", "#6DC8EC", "#9270CA", "#FF9D4D", "#269A99", "#FF99C3"], + tabName: 'custom', + groupName: 'graph' + }, + { + label: '玉珏类型', + type: 'select', + field: 'barStyle_lineCap', + optionField: 'barStyle.lineCap', + value: 'round', + options: [ { label: '圆角', value: 'round' }, { label: '直角', value: 'square' } ], + tabName: 'custom', + groupName: 'graph' + }, + { + label: '最大旋转角度', + type: 'inputNumber', + field: 'maxAngle', + optionField: 'maxAngle', + value: 270, + min: 45, + max: 360, + step: 15, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '最小宽度', + type: 'inputNumber', + field: 'minBarWidth', + optionField: 'minBarWidth', + value: 10, + min: 0, + step: 1, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '最大宽度', + type: 'inputNumber', + field: 'maxBarWidth', + optionField: 'maxBarWidth', + value: 100, + min: 0, + step: 1, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '背景色', + type: 'colorPicker', + field: 'backgroundStyle_fill', + optionField: 'barBackground.style.fill', + value: 'rgba(0,0,0,0)', + tabName: 'custom', + groupName: 'graph' + }, + // x轴配置 + { + label: '标签颜色', + type: 'colorPicker', + field: 'xAxis_labelStyle_fill', + optionField: 'xAxis.label.style.fill', + value: '#595959', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签字体大小', + type: 'inputNumber', + field: 'xAxis_labelStyle_fontSize', + optionField: 'xAxis.label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签字体粗细', + type: 'inputNumber', + field: 'xAxis_labelStyle_fontWeight', + optionField: 'xAxis.label.style.fontWeight', + value: 600, + min: 100, + step: 100, + max: 900, + tabName: 'custom', + groupName: 'xAxis' + + } +] + +// 模拟数据 +const data = [ + { name: 'X6', star: 297 }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, +] + +const optionHandler = ` +const xFieldValue = setting.find(settingItem=>settingItem.field === 'xField').value +if (xFieldValue) { + option.seriesField = xFieldValue +} +` + +// 数据处理脚本 可以处理data数据和option配置,若要处理,直接赋值即可,比如 data = data[0]; option.style.stroke = 'red' +const dataHandler = `` + +// 图表配置 new Line('domName', option), 此处的option就是https://g2plot.antv.antgroup.com/examples 中的对应配置,复制后粘贴即可 +const option = { + // 数据将要放入到哪个字段中 + dataKey: 'data', + data, + xField: 'name', + yField: 'star', + startAngle: - Math.PI / 2, // 起始角度 + maxAngle: 270, //最大旋转角度, + radius: 0.8, + color: [], + colorField: 'name', + innerRadius: 0.2, + barStyle: { + lineCap: 'round', // 可选项:round 和 square + }, + minBarWidth: 10, + maxBarWidth: 100, + barBackground: { + style: { + fill: 'rgba(0,0,0,0)' + } + }, + xAxis: { + label: { + style: { + fill: '#ffffff', + fontSize: 12, + fontWeight: 600, + } + } + } + // tooltip: { + // formatter: (datum) => { + // return { name: 'star数', value: datum.star }; + // }, + // }, +} + +export default { + category, + version, + title, + chartType, + name, + option, + setting, + dataHandler +} diff --git a/data-room-ui/packages/G2Plots/雷达图/基础雷达图.js b/data-room-ui/packages/G2Plots/雷达图/基础雷达图.js index 24028705..d21344be 100644 --- a/data-room-ui/packages/G2Plots/雷达图/基础雷达图.js +++ b/data-room-ui/packages/G2Plots/雷达图/基础雷达图.js @@ -41,15 +41,6 @@ const setting = [ }, /** 样式配置 **/ // 图表 graph - { - label: '底色', - type: 'colorPicker', // 设置组件类型 - field: 'yAxis_grid_alternateColor', // 字段 - optionField: 'yAxis.grid.alternateColor', // 对应options中的字段 - value: 'rgba(0, 0, 0, 0.04)', - tabName: 'custom', - groupName: 'graph' - }, { label: '面积填充', type: 'switch', // 设置组件类型 @@ -159,8 +150,70 @@ const setting = [ value: 2, tabName: 'custom', groupName: 'graph' - } - // 边距 padding + }, + { + label: '数据标签', + type: 'switch', // 设置组件类型 + field: 'label_style_opacity', // 字段 + optionField: 'label.style.opacity', // 对应options中的字段 + value: 0, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签颜色', + type: 'colorPicker', // 设置组件类型 + field: 'label_style_fill', // 字段 + optionField: 'label.style.fill', // 对应options中的字段 + value: '#ffffff', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签大小', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'label_style_fontSize', + // 对应options中的字段 + optionField: 'label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'graph' + }, + + // x轴 xAxis + { + label: '显示外层圆圈', + type: 'switch', + field: 'xAxis_lineEnabled', + optionField: 'xAxis.lineEnabled', + value: false, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '奇数圈底色', + type: 'colorPicker', // 设置组件类型 + field: 'yAxis_grid_alternateColor1', // 字段 + optionField: 'yAxis.grid.alternateColor1', // 对应options中的字段 + value: 'rgba(0, 0, 0, 0.04)', + tabName: 'custom', + groupName: 'grid' + }, + { + label: '偶数圈底色', + type: 'colorPicker', // 设置组件类型 + field: 'yAxis_grid_alternateColor2', // 字段 + optionField: 'yAxis.grid.alternateColor2', // 对应options中的字段 + value: 'rgba(0, 0, 0, 0.04)', + tabName: 'custom', + groupName: 'grid' + }, ] // 模拟数据 @@ -174,6 +227,17 @@ const data = [ { name: 'G2Plot', star: 1626 } ] +// 配置处理脚本 +const optionHandler = ` +if (option.xAxis.lineEnabled) { + option.xAxis.line = {} +} else { + option.xAxis.line = null +} +option.yAxis.grid.alternateColor = [option.yAxis.grid.alternateColor1, option.yAxis.grid.alternateColor2] +` + + // 数据处理脚本 const dataHandler = '' @@ -192,17 +256,28 @@ const option = { } }, meta: { - star: { - alias: 'star 数量', + value: { + alias: '数据', min: 0, nice: true, formatter: (v) => Number(v).toFixed(2) } }, xAxis: { - tickLine: null + lineEnabled: false, + line: {}, + tickLine: null, + grid: { + line: { + style: { + lineDash: null, + }, + }, + }, }, yAxis: { + // line: null, + tickLine: null, label: false, grid: { line: { @@ -211,8 +286,10 @@ const option = { lineDash: null, }, }, - alternateColor: 'rgba(0, 0, 0, 0.04)' - } + alternateColor1: 'rgba(0, 0, 0, 0.04)', + alternateColor2: 'rgba(0, 0, 0, 0.04)', + alternateColor: ['rgba(0, 0, 0, 0.04)','rgba(0, 0, 0, 0.04)'], + }, }, // 开启辅助点 point: { @@ -222,7 +299,15 @@ const option = { shape: '', size: 2 }, - area: 1 + area: 1, + label: { + autoRotate: false, + style: { + fill: '#ffffff', + opacity: 1, + fontSize: 12 + } + } } export default { @@ -233,5 +318,6 @@ export default { name, option, setting, - dataHandler + dataHandler, + optionHandler }