|
@@ -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
|
|
|
+}
|