diff --git a/data-room-ui/example/main.js b/data-room-ui/example/main.js index 8fdea1d3..95b0b66f 100644 --- a/data-room-ui/example/main.js +++ b/data-room-ui/example/main.js @@ -9,7 +9,8 @@ import store from './store' import router from './router' import 'element-ui/lib/theme-chalk/index.css' import '@/assets/styles/index.scss' -import * as $dataRoomAxios from 'data-room-ui/js/utils/http.js' +// import * as $dataRoomAxios from 'data-room-ui/js/utils/http.js' +import * as $dataRoomAxios from '../packages/js/utils/http.js' import { registerConfig } from '@gcpaas/data-room-ui' import remoteComponents from '@/remoteComponents/exports.js' import customDatasetComponents from '@/customDatasetComponents/exports.js' 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..37de01d6 Binary files /dev/null and b/data-room-ui/packages/G2Plots/images/componentLogo/基础桑基图.png differ diff --git a/data-room-ui/packages/G2Plots/plotList.js b/data-room-ui/packages/G2Plots/plotList.js index 610ea31b..8cf97d03 100644 --- a/data-room-ui/packages/G2Plots/plotList.js +++ b/data-room-ui/packages/G2Plots/plotList.js @@ -24,6 +24,7 @@ function getPlotList (files) { }) const plotList = [] for (const configMapKey in configMapList) { + console.log('sortList', sortList) const index = sortList.findIndex((item) => item === configMapKey) const config = configMapList[configMapKey] @@ -32,7 +33,7 @@ function getPlotList (files) { category: configMapKey, name: config.name, title: config.title, - border:{ type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [16, 16, 16, 16] }, + border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [16, 16, 16, 16] }, icon: null, img: require(`../G2Plots/images/componentLogo/${config.title}.png`), className: @@ -60,6 +61,7 @@ function getPlotList (files) { ...cloneDeep(dataConfig) } } + console.log('plotList', plotList) return plotList } export function getCustomPlots () { @@ -72,7 +74,7 @@ export function getCustomPlots () { category: config.category, name: config.name, title: config.title, - border:{ type: '', titleHeight: 60, fontSize: 16 , isTitle: true, padding: [16, 16, 16, 16] }, + border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [16, 16, 16, 16] }, icon: null, img: config.img, className: diff --git a/data-room-ui/packages/G2Plots/plotListSort.js b/data-room-ui/packages/G2Plots/plotListSort.js index 6e27e553..8f416b0a 100644 --- a/data-room-ui/packages/G2Plots/plotListSort.js +++ b/data-room-ui/packages/G2Plots/plotListSort.js @@ -8,7 +8,6 @@ export default [ '折线趋势填充图', '多阶梯折线图', - '迷你基础折线图', '迷你面积图', @@ -31,6 +30,8 @@ export default [ '基础玉珏图', + '基础桑基图', + '水波图', '矩形水波图', '钻石水波图', diff --git a/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js b/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js new file mode 100644 index 00000000..2f28869e --- /dev/null +++ b/data-room-ui/packages/G2Plots/桑基图/基础桑基图.js @@ -0,0 +1,597 @@ +/* + * @description: 桑基图 + * @Date: 2024-0625 + * @Author: liu.shiyi + */ + +// 配置版本号 +const version = '2023111501' +// 分类 +const category = 'Sankey' +// 标题 +const title = '基础桑基图' +// 类别, new Line() +const chartType = 'Sankey' +// 用于标识,唯一,和文件夹名称一致 +const name = 'JICHUSANGJITU' + +// 右侧配置项 +const setting = [ + { + label: '维度', + type: 'select', // 设置组件类型 + field: 'xField', // 字段 + optionField: 'xField', // 对应options中的字段 + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + { + label: '指标', + type: 'select', // 设置组件类型 + field: 'yField', // 字段 + optionField: 'yField', // 对应options中的字段 + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + /** 样式配置 **/ + // 图表 graph + { + label: '柱子颜色', + type: 'gradual', // 设置组件类型 + field: 'columnStyle_fill', // 字段 + optionField: 'columnStyle.fill', // 对应options中的字段 + value: 'l(90) 0:#6B74E4 1:#4391F4', + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据标签', + type: 'switch', // 设置组件类型 + field: 'label_style_opacity', // 字段 + optionField: 'label.style.opacity', // 对应options中的字段 + value: 0, + active: 1, + inactive: 0, + 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' + } + ], + 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: 10, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱最小宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'minColumnWidth', + // 对应options中的字段 + optionField: 'minColumnWidth', + value: 0, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱最大宽度', + // 设置组件类型 + type: 'inputNumber', + // 字段 + field: 'maxColumnWidth', + // 对应options中的字段 + optionField: 'maxColumnWidth', + value: 100, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '柱背景颜色', + type: 'colorPicker', + field: 'columnBackground_style_fill', + optionField: 'columnBackground.style.fill', + value: 'rgba(255,255,255,0)', + tabName: 'custom', + groupName: 'graph' + }, + // 网格线 grid + { + label: '虚线', + type: 'switch', + field: 'yAxis_grid_line_style_lineDash', + optionField: 'yAxis.grid.line.style.lineDash', + value: 0, + active: 5, + inactive: 0, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '宽度', + type: 'inputNumber', + field: 'yAxis_grid_line_style_lineWidth', + optionField: 'yAxis.grid.line.style.lineWidth', + value: 1, + tabName: 'custom', + groupName: 'grid' + }, + { + label: '颜色', + type: 'colorPicker', + field: 'yAxis_grid_line_style_stroke', + optionField: 'yAxis.grid.line.style.stroke', + value: '#E5E6EB10', + tabName: 'custom', + groupName: 'grid' + }, + // X轴 xAxis + { + label: '标题', + type: 'input', + field: 'xAxis_title_text', + optionField: 'xAxis.title.text', + value: '', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'xAxis_title_position', + optionField: 'xAxis.title.position', + value: 'end', + tabName: 'custom', + options: [ + { + label: '左', + value: 'start' + }, + { + label: '中', + value: 'center' + }, + { + label: '右', + value: 'end' + }], + groupName: 'xAxis' + }, + { + label: '标题字体大小', + type: 'inputNumber', + field: 'xAxis_title_style_fontSize', + optionField: 'xAxis.title.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'xAxis_title_style_fill', + optionField: 'xAxis.title.style.fill', + // 是否多选 + multiple: false, + value: '#e9e9e9', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签大小', + type: 'inputNumber', + field: 'xAxis_label_style_fontSize', + optionField: 'xAxis.label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'xAxis_label_style_fill', + optionField: 'xAxis.label.style.fill', + // 是否多选 + multiple: false, + value: '#e9e9e9', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线宽度', + type: 'inputNumber', + field: 'xAxis_line_style_lineWidth', + optionField: 'xAxis.line.style.lineWidth', + value: 1, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'xAxis_line_style_stroke', + optionField: 'xAxis.line.style.stroke', + // 是否多选 + multiple: false, + value: '#C9CDD4', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '刻度线宽度', + type: 'inputNumber', + field: 'xAxis_tickLine_style_lineWidth', + optionField: 'xAxis.tickLine.style.lineWidth', + value: 1, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '刻度线颜色', + type: 'colorPicker', + field: 'xAxis_tickLine_style_stroke', + optionField: 'xAxis.tickLine.style.stroke', + // 是否多选 + multiple: false, + value: '#C9CDD4', + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时隐藏', + type: 'switch', + field: 'xAxis_label_autoHide', + optionField: 'xAxis.label.autoHideEnable', + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签隐藏判定间隔', + type: 'inputNumber', + field: 'xAxis_label_autoHide_minGap', + optionField: 'xAxis.label.autoHideMinGap', + value: 0, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过多时旋转', + type: 'switch', + field: 'xAxis_label_autoRotate', + optionField: 'xAxis.label.autoRotate', + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'xAxis' + }, + { + label: '标签过长时省略', + type: 'switch', + field: 'xAxis_label_autoEllipsis', + optionField: 'xAxis.label.autoEllipsis', + value: true, + tabName: 'custom', + groupName: 'xAxis' + }, + // Y轴 yAxis + { + label: '标题', + type: 'input', + field: 'yAxis_title_text', + optionField: 'yAxis.title.text', + value: '', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题过长时旋转', + type: 'switch', + field: 'yAxis_title_autoRotate', + optionField: 'yAxis.title.autoRotate', + value: true, + active: true, + inactive: false, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题位置', + type: 'select', + field: 'yAxis_title_position', + optionField: 'yAxis.title.position', + value: 'end', + tabName: 'custom', + options: [ + { + label: '上', + value: 'end' + }, + { + label: '中', + value: 'center' + }, + { + label: '下', + value: 'start' + }], + groupName: 'yAxis' + }, + { + label: '标题字体大小', + type: 'inputNumber', + field: 'yAxis_title_style_fontSize', + optionField: 'yAxis.title.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标题颜色', + type: 'colorPicker', + field: 'yAxis_title_style_fill', + optionField: 'yAxis.title.style.fill', + // 是否多选 + multiple: false, + value: '#e9e9e9', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '显示标签', + type: 'switch', + field: 'yAxis_label_style_opacity', + optionField: 'yAxis.label.style.opacity', + value: 1, + active: 1, + inactive: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签字体大小', + type: 'inputNumber', + field: 'yAxis_label_style_fontSize', + optionField: 'yAxis.label.style.fontSize', + value: 12, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '标签颜色', + type: 'colorPicker', + field: 'yAxis_label_style_fill', + optionField: 'yAxis.label.style.fill', + // 是否多选 + multiple: false, + value: '#e9e9e9', + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线宽度', + type: 'inputNumber', + field: 'yAxis_line_lineWidth', + optionField: 'yAxis.line.style.lineWidth', + value: 0, + tabName: 'custom', + groupName: 'yAxis' + }, + { + label: '轴线颜色', + type: 'colorPicker', + field: 'yAxis_line_stroke', + optionField: 'yAxis.line.style.stroke', + // 是否多选 + multiple: false, + value: '#C9CDD4', + tabName: 'custom', + groupName: 'yAxis' + }, + // 内边距 appendPadding + { + label: '', + type: 'appendPadding', + field: 'appendPadding', + optionField: 'appendPadding', + value: [0, 0, 0, 0], + tabName: 'custom', + groupName: 'appendPadding' + } +] + +// 模拟数据 +const data = [ + { source: '首次打开', target: '首页 UV', value: 160 }, + { source: '结果页', target: '首页 UV', value: 40 }, + { source: '验证页', target: '首页 UV', value: 10 }, + { source: '我的', target: '首页 UV', value: 10 }, + { source: '朋友', target: '首页 UV', value: 8 }, + { source: '其他来源', target: '首页 UV', value: 27 }, + { source: '首页 UV', target: '理财', value: 30 }, + { source: '首页 UV', target: '扫一扫', value: 40 }, + { source: '首页 UV', target: '服务', value: 35 }, + { source: '首页 UV', target: '蚂蚁森林', value: 25 }, + { source: '首页 UV', target: '跳失', value: 10 }, + { source: '首页 UV', target: '借呗', value: 30 }, + { source: '首页 UV', target: '花呗', value: 40 }, + { source: '首页 UV', target: '其他流向', value: 45 }, +] +// 配置处理脚本 +const optionHandler = '' + +// 数据处理脚本 +const dataHandler = '' + +// 图表配置 new Line('domName', option) +const option = { + // 数据将要放入到哪个字段中 + dataKey: 'data', + // 图表内边距 + appendPadding: [0, 0, 0, 0], + data, + sourceField: 'source', + targetField: 'target', + weightField: 'value', + nodeWidthRatio: 0.008, + nodePaddingRatio: 0.03, + color: '', + label: { + offsetY: 13, + // 可手动配置 label 数据标签位置 + position: 'middle', // 'top', 'bottom', 'middle', + // 配置样式 + style: { + fill: '#8C8C8C', + opacity: 0, + fontSize: 12 + } + }, + xAxis: { + title: { + text: '', + position: 'end', + style: { + fill: '#e9e9e9', + fontSize: 12 + } + }, + label: { + autoRotate: false, + autoHide: true, + autoEllipsis: true, + autoHideEnable: true, + autoHideMinGap: 2, + style: { + fill: '#e9e9e9', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#C9CDD4', + lineWidth: 1 + } + }, + tickLine: { + style: { + stroke: '#C9CDD4', + lineWidth: 1 + } + } + }, + yAxis: { + title: { + text: '', + position: 'end', + autoRotate: false, + // rotation: Math.PI / 2, + style: { + fill: '#8C8C8C', + fontSize: 12 + } + }, + grid: { + line: { + style: { + stroke: '#E5E6EB10', + lineWidth: 1, + lineDash: [4, 5], + strokeOpacity: 0.7 + } + } + }, + label: { + formatter: (v) => { + if (v < 1e3) return v + // 数值格式化为千分位 + if (v >= 1e3 && v < 1e6) return `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`) + if (v >= 1e6 && v < 1e9) return `${(v / 1e6).toFixed(1)} M` + if (v >= 1e9 && v < 1e12) return `${(v / 1e9).toFixed(1)} B` + return `${(v / 10e8).toFixed(1)} B` + }, + style: { + fill: '#e9e9e9', + fontSize: 12, + opacity: 1 + } + }, + line: { + style: { + stroke: '#C9CDD4', + lineWidth: 0 + } + } + }, + // 背景图设置 + columnBackground: { + style: { + fill: 'rgba(255,255,255,0)' + } + }, + meta: { + type: { + alias: '类别' + }, + sales: { + alias: '销售额' + } + } +} +export default { + category, + version, + title, + chartType, + name, + option, + setting, + dataHandler, + optionHandler +}