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
118
119
120
121
122
123
|
| // 配置版本号
| const version = '2023111401'
| // 分类
| const category = 'Progress'
| // 标题
| const title = '进度条'
| // 类别， new Gauge()
| const chartType = 'Progress'
| // 用于标识，唯一，和文件夹名称一致
| const name = 'JinDuTiao'
|
| // 右侧配置项
| const setting = [
| {
| label: '指标',
| // 设置组件类型
| type: 'select',
| // 字段
| field: 'percent',
| // 对应options中的字段
| optionField: 'percent',
| // 是否多选
| multiple: false,
| value: '',
| tabName: 'data'
| },
| /** 样式配置 **/
| // 图表 graph
| {
| label: '进度条背景色',
| // 设置组件类型
| type: 'colorPicker',
| // 字段
| field: 'backColor',
| // 对应options中的字段
| optionField: 'backColor',
| value: '#fff',
| tabName: 'custom',
| groupName: 'graph'
| },
| {
| label: '进度条颜色',
| // 设置组件类型
| type: 'gradual',
| // 字段
| field: 'frontColor',
| // 对应options中的字段
| optionField: 'frontColor',
| value: 'l(0) 0:#6b74e4 1:#4391f4',
| tabName: 'custom',
| groupName: 'graph'
| },
| {
| label: '不透明度',
| // 设置组件类型
| type: 'slider',
| // 字段
| field: 'progressStyle_fillOpacity',
| // 对应options中的字段
| optionField: 'progressStyle.fillOpacity',
| value: 1,
| tabName: 'custom',
| groupName: 'graph'
| },
| // 内边距 appendPadding
| {
| label: '',
| type: 'appendPadding',
| field: 'appendPadding',
| optionField: 'appendPadding',
| value: [0, 0, 0, 0],
| tabName: 'custom',
| groupName: 'appendPadding'
| }
| ]
| const data = [
| {
| percent: 0.536
| }
| ]
| // 配置处理脚本
| const optionHandler = 'option.color = [option.frontColor, option.backColor]'
|
| // 数据处理脚本
| const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
|
| // 图表配置 new Gauge('domName', option)
| const option = {
| // 数据将要放入到哪个字段中
| dataKey: 'percent',
| // 图表内边距
| appendPadding: [0, 0, 0, 0],
| data,
| height: 50,
| width: 400,
| autoFit: true,
| percent: 0.8,
| barWidthRatio: 0.3,
| backColor: '#EEEEEE',
| frontcolor: 'l(0) 0:#6b74e4 1:#4391f4',
| color: ['l(0) 0:#6B74E3 1:#38BBE5', '#fff'],
| progressStyle: {
| current: {
| style: {
| fillOpacity: 1,
| lineWidth: 0,
| shadowColor: 'black'
| }
| }
| }
| }
| export default {
| category,
| version,
| title,
| chartType,
| name,
| option,
| setting,
| dataHandler,
| optionHandler
| }
|
|
