初始化
This commit is contained in:
123
frontend/packages/G2Plots/进度图/进度条.js
Normal file
123
frontend/packages/G2Plots/进度图/进度条.js
Normal file
@@ -0,0 +1,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
|
||||
}
|
||||
Reference in New Issue
Block a user