1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
| /*
| * @description: 配置，参考https://g2plot.antv.antgroup.com/examples
| * @Date: 2023-03-27 14:38:23
| * @Author: xing.heng
| */
|
| // 配置版本号
| const version = '2023111401'
| // 分类
| const category = 'TinyLine'
| // 标题
| const title = '迷你基础折线图'
| // 类别， new Line()
| const chartType = 'TinyLine'
| // 用于标识，唯一，title的中文转拼音
| const name = 'MiNiJiChuZheXianTu'
|
| // 右侧配置项
| const setting = [
| {
| label: '维度',
| // 设置组件类型， select / input / colorPicker
| type: 'select',
| // 字段
| field: 'xField',
| optionField: 'xField', // 对应options中的字段
| // 是否多选
| multiple: false,
| // 绑定的值
| value: '',
| // tab页。 data: 数据， custom: 自定义
| tabName: 'data'
| },
| {
|
| label: '指标',
| // 设置组件类型
| type: 'select',
| // 字段
| field: 'yField',
| // 对应options中的字段
| optionField: 'yField',
| // 是否多选
| multiple: false,
| value: '',
| tabName: 'data'
| },
| /** 样式配置 **/
| {
| label: '平滑',
| type: 'switch', // 设置组件类型
| field: 'smooth', // 字段
| optionField: 'smooth', // 对应options中的字段
| value: true,
| tabName: 'custom',
| groupName: 'graph'
| },
| // 图表 graph
| {
| label: '折线宽度',
| type: 'inputNumber', // 设置组件类型
| field: 'lineStyle_lineWidth', // 字段
| optionField: 'lineStyle.lineWidth', // 对应options中的字段
| value: '2',
| tabName: 'custom',
| groupName: 'graph'
| },
| {
| label: '折线颜色',
| type: 'gradual', // 设置组件类型
| field: 'lineStyle_stroke', // 字段
| optionField: 'lineStyle.stroke', // 对应options中的字段
| value: 'l(0) 0:#6B74E4 1:#6B74E4',
| tabName: 'custom',
| groupName: 'graph'
| },
| // 内边距 appendPadding
| {
| label: '',
| type: 'appendPadding',
| field: 'appendPadding',
| optionField: 'appendPadding',
| value: [0, 0, 0, 0],
| tabName: 'custom',
| groupName: 'appendPadding'
| }
| ]
|
| // 数据处理脚本,取出所有指标的值
| const dataHandler = '// 取出所有指标的值 \ndata = data.map(item => item[setting.filter(i => i.field === "yField")[0].value])'
|
| // 图表配置 new Line('domName', option)
| const option = {
| // 图表内边距
| appendPadding: [0, 0, 0, 0],
| xField:'',
| yField:'',
| data: [100, 200, 300, 200, 100, 200, 300, 400],
| height: 150,
| autoFit: true,
| smooth: true,
| lineStyle: {
| stroke: 'l(0) 0:#6B74E4 1:#6B74E4',
| lineWidth: 2
| }
| }
|
| export default {
| category,
| version,
| title,
| chartType,
| name,
| option,
| setting,
| dataHandler
| }
|
|
