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..e5d56425 Binary files /dev/null and b/data-room-ui/packages/G2Plots/images/componentLogo/进度指标环图.png differ diff --git a/data-room-ui/packages/G2Plots/images/componentLogo/进度环图.png b/data-room-ui/packages/G2Plots/images/componentLogo/进度环图.png index 290c71b5..470575ed 100644 Binary files a/data-room-ui/packages/G2Plots/images/componentLogo/进度环图.png 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 38d1f065..9e6c1be4 100644 --- a/data-room-ui/packages/G2Plots/plotListSort.js +++ b/data-room-ui/packages/G2Plots/plotListSort.js @@ -33,6 +33,7 @@ export default [ '进度条', '圆角进度条', '进度环图', + '进度指标环图', '词云图', '基础矩形树图', diff --git a/data-room-ui/packages/G2Plots/进度图/进度指标环图.js b/data-room-ui/packages/G2Plots/进度图/进度指标环图.js new file mode 100644 index 00000000..84f8ba80 --- /dev/null +++ b/data-room-ui/packages/G2Plots/进度图/进度指标环图.js @@ -0,0 +1,187 @@ +// 配置版本号 +const version = '2023071001' +// 分类 +const category = 'RingProgress' +// 标题 +const title = '进度指标环图' +// 类别, new Gauge() +const chartType = 'RingProgress' +// 用于标识,唯一,和文件夹名称一致 +const name = 'JinDuZhiBiaoHuanTu' + +// 右侧配置项 +const setting = [ + { + label: '指标', + // 设置组件类型 + type: 'select', + // 字段 + field: 'percent', + // 对应options中的字段 + optionField: 'percent', + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + /** 样式配置 **/ + // 图表 graph + { + label: '进度条背景色', + // 设置组件类型 + type: 'colorPicker', + // 字段 + field: 'color2', + // 对应options中的字段 + optionField: 'color2', + value: 'rgba(238, 238, 238, 1)', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '进度条颜色', + // 设置组件类型 + type: 'gradual', + // 字段 + field: 'color1', + // 对应options中的字段 + optionField: 'color1', + value: 'l(0) 0:#6B74E3 1:#38BBE5', + tabName: 'custom', + groupName: 'graph' + }, + // { + // label: '标签文本', + // // 设置组件类型 + // type: 'input', + // // 字段 + // field: 'statistic_title_content', + // // 对应options中的字段 + // optionField: 'statistic.title.content', + // value: '进度', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '标签字体颜色', + // // 设置组件类型 + // type: 'colorPicker', + // // 字段 + // field: 'statistic_title_style_fill', + // // 对应options中的字段 + // optionField: 'statistic.title.style.fill', + // value: 'rgba(133, 133, 133, 1)', + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '标签字体大小', + // // 设置组件类型 + // type: 'inputNumber', + // // 字段 + // field: 'statistic_title_style_fontSize', + // // 对应options中的字段 + // optionField: 'statistic.title.style.fontSize', + // value: 20, + // tabName: 'custom', + // groupName: 'graph' + // }, + // { + // label: '标签位置', + // // 设置组件类型 + // type: 'inputNumber', + // // 字段 + // field: 'statistic_title_style_offsetY', + // // 对应options中的字段 + // optionField: 'statistic.title.offsetY', + // value: 0, + // min: -100, + // tabName: 'custom', + // groupName: 'graph' + // }, + { + label: '指标字体颜色', + // 设置组件类型 + type: 'colorPicker', + // 字段 + field: 'statistic_content_style_fill', + // 对应options中的字段 + optionField: 'statistic.content.style.fill', + value: 'rgba(133, 133, 133, 1)', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '指标字体大小', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'statistic_content_style_fontSize', + // 对应options中的字段 + optionField: 'statistic.content.style.fontSize', + value: 24, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '指标位置', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'statistic_content_style_offsetY', + // 对应options中的字段 + optionField: 'statistic.content.offsetY', + value: 0, + min: -100, + tabName: 'custom', + groupName: 'graph' + } + // 边距 padding +] + +// 配置处理脚本 +const optionHandler = 'option.color = [option.color1, option.color2]' +const data = [ + { + percent: 0.6 + } +] +// 数据处理脚本 +const dataHandler = + "option.percent = data[0][setting.filter(settingItem=>settingItem.field === 'percent')[0].value]" + +// 图表配置 new Gauge('domName', option) +const option = { + // 数据将要放入到哪个字段中 + dataKey: 'percent', + data, + color1: 'l(0) 0:#6B74E3 1:#38BBE5', + color2: '#d0d0d0', + autoFit: true, + percent: 0.6, + color: ['l(0) 0:#6B74E3 1:#38BBE5', '#d0d0d0'], + innerRadius: 0.85, + radius: 0.98, + statistic: { + // title: { + // style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 }, + // content: '进度', + // offsetY: 0 + // }, + content: { + style: { fill: '#fafafa', fontSize: 28, lineHeight: 2 }, + offsetY: 0 + } + } +} +export default { + category, + version, + title, + chartType, + name, + option, + setting, + optionHandler, + dataHandler +}