diff --git a/data-room-ui/example/customPlots/plots/散点图.js b/data-room-ui/example/customPlots/plots/散点图.js new file mode 100644 index 00000000..49dd2f3f --- /dev/null +++ b/data-room-ui/example/customPlots/plots/散点图.js @@ -0,0 +1,314 @@ + +// 配置版本号 +const version = '2023092201' +// 分类 +const category = '散点图' +// 标题 +const title = '散点图' +// 类别, new Line() +const chartType = 'Scatter' +// 用于标识,唯一,和文件夹名称一致 +const name = 'SanDianTu' + +// 右侧配置项 +const setting = [ + { + label: '维度', + type: 'select', // 设置组件类型 + field: 'size', // 字段 + optionField: 'size', // 对应options中的字段 + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + { + label: '指标', + type: 'select', // 设置组件类型 + field: 'sets', // 字段 + optionField: 'sets', // 对应options中的字段 + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + { + label: '颜色', + type: 'select', // 设置组件类型 + field: 'colorField', // 字段 + optionField: 'colorField', // 对应options中的字段 + // 是否多选 + multiple: false, + value: '', + tabName: 'data' + }, + { + label: '颜色配置', + // 设置组件类型 + type: 'colorSelect', + // 字段 + field: 'color', + // 对应options中的字段 + optionField: 'color', + value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], + tabName: 'custom', + groupName: 'graph' + }, + { + label: '数据点形状', + type: 'select', // 设置组件类型 + field: 'shape', // 字段 + optionField: 'shape', // 对应options中的字段 + // 是否多选 + multiple: false, + value: 'circle', + tabName: 'custom', + options: [ + { + label: '无', + value: false + }, + { + label: '空心圆', + value: 'hollow-circle' + }, + { + label: '圆形', + value: 'circle' + }, + { + label: '正方形', + value: 'square' + }, + { + label: '菱形', + value: 'diamond' + }, + { + label: '三角形', + value: 'triangle' + }, + { + label: '六边形', + value: 'hexagon' + }, + { + label: '菱形交叉', + value: 'bowtie' + }, + { + label: '十字形', + value: 'cross' + }, + { + label: 'I形', + value: 'tick' + }, + { + label: '加号', + value: 'plus' + }, + { + label: '连字号', + value: 'hyphen' + } + ], + groupName: 'graph' + }, + { + label: '透明度', + type: 'inputNumber', // 设置组件类型 + field: 'pointStyle_fillOpacity', // 字段 + optionField: 'pointStyle.fillOpacity', // 对应options中的字段 + value: 0.8, + tabName: 'custom', + groupName: 'graph' + }, + { + label: '图表边距', + type: 'padding', // 设置组件类型 + field: 'appendPadding', // + optionField: 'appendPadding', // 对应options中的字段 + value: [20, 20, 20, 20], + tabName: 'custom', + groupName: 'padding' + } +] + +// 模拟数据 +const data = [ + { + Title: 'Guardians of the Galaxy', + Genre: 'Action', + 'Revenue (Millions)': 333.13, + Rating: 8.1 + }, + { + Title: 'Prometheus', + Genre: 'Adventure', + 'Revenue (Millions)': 126.46, + Rating: 7 + }, + { + Title: 'Split', + Genre: 'Horror', + 'Revenue (Millions)': 138.12, + Rating: 7.3 + }, + { + Title: 'Sing', + Genre: 'Animation', + 'Revenue (Millions)': 270.32, + Rating: 7.2 + }, + { + Title: 'Suicide Squad', + Genre: 'Action', + 'Revenue (Millions)': 325.02, + Rating: 6.2 + }, + { + Title: 'The Great Wall', + Genre: 'Action', + 'Revenue (Millions)': 45.13, + Rating: 6.1 + }, + { + Title: 'La La Land', + Genre: 'Comedy', + 'Revenue (Millions)': 151.06, + Rating: 8.3 + }, + { + Title: 'Mindhorn', + Genre: 'Comedy', + 'Revenue (Millions)': null, + Rating: 6.4 + }, + { + Title: 'The Lost City of Z', + Genre: 'Action', + 'Revenue (Millions)': 8.01, + Rating: 7.1 + }, + { + Title: 'Passengers', + Genre: 'Adventure', + 'Revenue (Millions)': 100.01, + Rating: 7 + }, + { + Title: 'Fantastic Beasts and Where to Find Them', + Genre: 'Adventure', + 'Revenue (Millions)': 234.02, + Rating: 7.5 + }, + { + Title: 'Hidden Figures', + Genre: 'Other', + 'Revenue (Millions)': 169.27, + Rating: 7.8 + }, + { + Title: 'Rogue One', + Genre: 'Action', + 'Revenue (Millions)': 532.17, + Rating: 7.9 + }, + { + Title: 'Moana', + Genre: 'Animation', + 'Revenue (Millions)': 248.75, + Rating: 7.7 + }, + { + Title: 'Colossal', + Genre: 'Action', + 'Revenue (Millions)': 2.87, + Rating: 6.4 + }, + { + Title: 'The Secret Life of Pets', + Genre: 'Animation', + 'Revenue (Millions)': 368.31, + Rating: 6.6 + }, + { + Title: 'Hacksaw Ridge', + Genre: 'Other', + 'Revenue (Millions)': 67.12, + Rating: 8.2 + }, + { + Title: 'Jason Bourne', + Genre: 'Action', + 'Revenue (Millions)': 162.16, + Rating: 6.7 + }, + { + Title: 'Lion', + Genre: 'Other', + 'Revenue (Millions)': 51.69, + Rating: 8.1 + }, + { + Title: 'Gold', + Genre: 'Adventure', + 'Revenue (Millions)': 7.22, + Rating: 6.7 + } +] +// 配置处理脚本 +const optionHandler = '' + +// 数据处理脚本 +const dataHandler = '' + +// 图表配置 new Line('domName', option) +const option = { + appendPadding: 10, + data, + xField: 'Revenue (Millions)', + yField: 'Rating', + colorField: 'Genre', + shape: 'diamond', + pointStyle: { + fillOpacity: 0.8 + }, + color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'], + size: 4, + yAxis: { + nice: true, + line: { + style: { + stroke: '#aaa' + } + } + }, + xAxis: { + min: -100, + grid: { + line: { + style: { + stroke: '#eee' + } + } + }, + line: { + style: { + stroke: '#aaa' + } + } + } +} +export default { + version, + category, + title, + chartType, + name, + option, + setting, + optionHandler, + dataHandler +} diff --git a/data-room-ui/packages/js/utils/getComponentConfig.js b/data-room-ui/packages/js/utils/getComponentConfig.js index c196aa5c..3127f23a 100644 --- a/data-room-ui/packages/js/utils/getComponentConfig.js +++ b/data-room-ui/packages/js/utils/getComponentConfig.js @@ -299,58 +299,58 @@ export default function getComponentConfig (type) { y: 0, type } - case 'indicatorCard': - return { - name: '指标卡一', - title: '指标卡一', - icon: null, - img: require('data-room-ui/assets/images/cardImg/card.png'), - className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart', - w: 400, - h: 170, - x: 0, - y: 0, - type + case 'indicatorCard': + return { + name: '指标卡一', + title: '指标卡一', + icon: null, + img: require('data-room-ui/assets/images/cardImg/card.png'), + className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart', + w: 400, + h: 170, + x: 0, + y: 0, + type } - case 'indicatorCard2': - return { - name: '指标卡二', - title: '指标卡二', - icon: null, - img: require('data-room-ui/assets/images/cardImg/card2.png'), - className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart', - w: 400, - h: 170, - x: 0, - y: 0, - type + case 'indicatorCard2': + return { + name: '指标卡二', + title: '指标卡二', + icon: null, + img: require('data-room-ui/assets/images/cardImg/card2.png'), + className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndicatorCardChart', + w: 400, + h: 170, + x: 0, + y: 0, + type } - case 'indexCard': - return { - name: '指标卡三', - title: '指标卡三', - icon: null, - img: require('data-room-ui/assets/images/cardImg/indicard.png'), - className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart', - w: 400, - h: 170, - x: 0, - y: 0, - type + case 'indexCard': + return { + name: '指标卡三', + title: '指标卡三', + icon: null, + img: require('data-room-ui/assets/images/cardImg/indicard.png'), + className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart', + w: 400, + h: 170, + x: 0, + y: 0, + type + } + case 'indexCard2': + return { + name: '指标卡四', + title: '指标卡四', + icon: null, + img: require('data-room-ui/assets/images/cardImg/indcard2.png'), + className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart', + w: 400, + h: 170, + x: 0, + y: 0, + type } - case 'indexCard2': - return { - name: '指标卡四', - title: '指标卡四', - icon: null, - img: require('data-room-ui/assets/images/cardImg/indcard2.png'), - className: 'com.gccloud.dataroom.core.module.chart.components.ScreenIndexCardChart', - w: 400, - h: 170, - x: 0, - y: 0, - type - } default: return {} }