初始化
This commit is contained in:
砂糖
287
frontend/packages/G2Plots/进度图/仪表盘.js
Normal file
287
frontend/packages/G2Plots/进度图/仪表盘.js
Normal file
@@ -0,0 +1,287 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111401'
|
||||
// 分类
|
||||
const category = 'Gauge'
|
||||
// 标题
|
||||
const title = '仪表盘'
|
||||
// 类别， new Gauge()
|
||||
const chartType = 'Gauge'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'YiBiaoPan'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '表盘类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'type',
|
||||
// 对应options中的字段
|
||||
optionField: 'type',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'custom',
|
||||
options: [
|
||||
{
|
||||
label: '默认',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '米轨',
|
||||
value: 'meter'
|
||||
}
|
||||
],
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '表盘颜色',
|
||||
// 设置组件类型
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'color1',
|
||||
// 对应options中的字段
|
||||
optionField: 'color1',
|
||||
value: 'l(0) 0:#BEE8FF 1:#1DAEFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '表盘背景颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'color2',
|
||||
// 对应options中的字段
|
||||
optionField: 'color2',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_title_style_color',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.color',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fontSize',
|
||||
value: 40,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标小数位',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_fixed',
|
||||
// 对应options中的字段
|
||||
optionField: 'statisticFixed',
|
||||
value: 0,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签内容',
|
||||
// 设置组件类型
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'statistic_content_content',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.content',
|
||||
value: '',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_color',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.color',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 20,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.offsetY',
|
||||
value: -45,
|
||||
min: -100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.offsetY',
|
||||
value: -10,
|
||||
min: -100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// 图例 legend,
|
||||
// 内边距 appendPadding
|
||||
{
|
||||
label: '',
|
||||
type: 'appendPadding',
|
||||
field: 'appendPadding',
|
||||
optionField: 'appendPadding',
|
||||
value: [0, 0, 0, 0],
|
||||
tabName: 'custom',
|
||||
groupName: 'appendPadding'
|
||||
}
|
||||
]
|
||||
const data = [
|
||||
{
|
||||
percent: 0.75
|
||||
}
|
||||
]
|
||||
// 配置处理脚本
|
||||
const optionHandler = 'option.range.color = [option.color1, option.color2]\n' +
|
||||
' let fix = option.statisticFixed\n' +
|
||||
' option.statistic.title.formatter = ({ percent }) => `${(percent * 100).toFixed(fix)}%`'
|
||||
|
||||
// 数据处理脚本
|
||||
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,
|
||||
percent: 0.75,
|
||||
color1: 'l(0) 0:#BEE8FF 1:#1DAEFF',
|
||||
color2: '#FFFFFF',
|
||||
range: {
|
||||
color: ['l(0) 0:#6b74e4 1:#4391f4', '#d0d0d0']
|
||||
},
|
||||
indicator: {
|
||||
pointer: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
},
|
||||
pin: {
|
||||
style: {
|
||||
stroke: '#D0D0D0'
|
||||
}
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
label: {
|
||||
formatter (v) {
|
||||
return Number(v) * 100
|
||||
}
|
||||
},
|
||||
subTickLine: {
|
||||
count: 3
|
||||
}
|
||||
},
|
||||
// shapeStyle: {
|
||||
// fill: 'rgba(208,208,208,0)'
|
||||
// },
|
||||
statisticFixed: 0,
|
||||
statistic: {
|
||||
title: {
|
||||
offsetY: -10,
|
||||
style: {
|
||||
fontSize: 40,
|
||||
lineHeight: 2,
|
||||
fontFamily: 'ds-digitalbold',
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
|
||||
},
|
||||
content: {
|
||||
offsetY: -45,
|
||||
content: '',
|
||||
style: {
|
||||
fontSize: 20,
|
||||
lineHeight: 2,
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
dataHandler,
|
||||
optionHandler
|
||||
}
|
||||
131
frontend/packages/G2Plots/进度图/圆角进度条.js
Normal file
131
frontend/packages/G2Plots/进度图/圆角进度条.js
Normal file
@@ -0,0 +1,131 @@
|
||||
|
||||
// 配置版本号
|
||||
const version = '2023111401'
|
||||
// 分类
|
||||
const category = 'Progress'
|
||||
// 标题
|
||||
const title = '圆角进度条'
|
||||
// 类别， new Gauge()
|
||||
const chartType = 'Progress'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'YuanJiaoJinDuTiao'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 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'
|
||||
},
|
||||
{
|
||||
label: '圆角',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'progressStyle_radius',
|
||||
// 对应options中的字段
|
||||
optionField: 'progressStyle.radius',
|
||||
value: 20,
|
||||
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: 'rgba(255, 255, 255, 0)',
|
||||
frontcolor: 'l(0) 0:#6b74e4 1:#4391f4',
|
||||
color: ['l(0) 0:#6B74E3 1:#38BBE5', 'rgba(255, 255, 255, 0)'],
|
||||
progressStyle: {
|
||||
r: 10,
|
||||
// fill: 'red',
|
||||
fillOpacity: 1,
|
||||
radius: 20,
|
||||
stroke: 'rgba(255, 255, 255, 0)',
|
||||
lineWidth: 0,
|
||||
// lineDash: [4, 5],
|
||||
// strokeOpacity: 0.7,
|
||||
shadowColor: 'black'
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetX: 5,
|
||||
// shadowOffsetY: 5,
|
||||
// cursor: 'pointer'
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
optionHandler,
|
||||
dataHandler
|
||||
}
|
||||
233
frontend/packages/G2Plots/进度图/水波图.js
Normal file
233
frontend/packages/G2Plots/进度图/水波图.js
Normal file
@@ -0,0 +1,233 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111601'
|
||||
// 分类
|
||||
const category = 'Liquid'
|
||||
// 标题
|
||||
const title = '水波图'
|
||||
// 类别， new Line()
|
||||
const chartType = 'Liquid'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'ShuiBoTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '贴图',
|
||||
type: 'switch', // 设置组件类型
|
||||
field: 'pattern_cfg_fillOpacity', // 字段
|
||||
optionField: 'pattern.cfg.fillOpacity', // 对应options中的字段
|
||||
value: 0,
|
||||
active: 1,
|
||||
inactive: 0,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'pattern_type',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.type',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'dot',
|
||||
tabName: 'custom',
|
||||
options: [
|
||||
{ label: '圆点', value: 'dot' },
|
||||
{ label: '矩形', value: 'square' }
|
||||
],
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'pattern_cfg_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.cfg.fill',
|
||||
value: '#ffffff',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 30,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '边框宽度',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'outline_border',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.border',
|
||||
value: 2,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// {
|
||||
// label: '边框间距',
|
||||
// // 设置组件类型
|
||||
// type: 'inputNumber',
|
||||
// // 字段
|
||||
// field: 'outline_distance',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'outline.distance',
|
||||
// value: 1,
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
{
|
||||
label: '边框颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'outline_style_stroke',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.style.stroke',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '水波颜色',
|
||||
type: 'colorPicker', // 设置组件类型
|
||||
field: 'color', // 字段
|
||||
optionField: 'color', // 对应options中的字段
|
||||
value: '#1DAEFF',
|
||||
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.25
|
||||
}
|
||||
]
|
||||
|
||||
// 数据处理脚本
|
||||
const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
|
||||
|
||||
// 图表配置 new Liquid('domName', option)
|
||||
const option = {
|
||||
// 数据将要放入到哪个字段中
|
||||
dataKey: 'percent',
|
||||
// 图表内边距
|
||||
appendPadding: [0, 0, 0, 0],
|
||||
data,
|
||||
color: '#1DAEFF',
|
||||
renderer: 'canvas',
|
||||
percent: 0.25,
|
||||
outline: {
|
||||
border: 2, // 边框宽度
|
||||
distance: 0, // 边框距离
|
||||
style: {
|
||||
stroke: '#FFFFFF' // 边框颜色
|
||||
}
|
||||
},
|
||||
liquidStyle: {
|
||||
stroke: 'black',
|
||||
lineWidth: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
wave: {
|
||||
length: 128
|
||||
},
|
||||
pattern: {
|
||||
type: 'dot',
|
||||
cfg: {
|
||||
size: 4,
|
||||
fillOpacity: 0,
|
||||
padding: 4,
|
||||
rotation: 0,
|
||||
fill: '#FFF',
|
||||
isStagger: true
|
||||
}
|
||||
},
|
||||
statistic: {
|
||||
content: {
|
||||
style: {
|
||||
opacity: 1,
|
||||
fontSize: 30,
|
||||
lineHeight: 1,
|
||||
fill: '#FFFFFF',
|
||||
fontFamily: 'ds-digitalbold'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
dataHandler
|
||||
}
|
||||
232
frontend/packages/G2Plots/进度图/矩形水波图.js
Normal file
232
frontend/packages/G2Plots/进度图/矩形水波图.js
Normal file
@@ -0,0 +1,232 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111601'
|
||||
// 分类
|
||||
const category = 'Liquid'
|
||||
// 标题
|
||||
const title = '矩形水波图'
|
||||
// 类别， new Liquid()
|
||||
const chartType = 'Liquid'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'JuXingShuiBoTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '贴图',
|
||||
type: 'switch', // 设置组件类型
|
||||
field: 'pattern_cfg_fillOpacity', // 字段
|
||||
optionField: 'pattern.cfg.fillOpacity', // 对应options中的字段
|
||||
value: 0,
|
||||
active: 1,
|
||||
inactive: 0,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'pattern_type',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.type',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'dot',
|
||||
tabName: 'custom',
|
||||
options: [
|
||||
{ label: '圆点', value: 'dot' },
|
||||
{ label: '矩形', value: 'square' }
|
||||
],
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'pattern_cfg_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.cfg.fill',
|
||||
value: '#ffffff',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 30,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '边框宽度',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'outline_border',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.border',
|
||||
value: 2,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// {
|
||||
// label: '边框间距',
|
||||
// // 设置组件类型
|
||||
// type: 'inputNumber',
|
||||
// // 字段
|
||||
// field: 'outline_distance',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'outline.distance',
|
||||
// value: 1,
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
{
|
||||
label: '边框颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'outline_style_stroke',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.style.stroke',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '水波颜色',
|
||||
type: 'colorPicker', // 设置组件类型
|
||||
field: 'color', // 字段
|
||||
optionField: 'color', // 对应options中的字段
|
||||
value: '#1DAEFF',
|
||||
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.25
|
||||
}
|
||||
]
|
||||
// 数据处理脚本
|
||||
const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
|
||||
|
||||
// 图表配置 new Liquid('domName', option)
|
||||
const option = {
|
||||
// 数据将要放入到哪个字段中
|
||||
dataKey: 'percent',
|
||||
// 图表内边距
|
||||
appendPadding: [0, 0, 0, 0],
|
||||
data,
|
||||
renderer: 'canvas',
|
||||
color: '#1DAEFF',
|
||||
percent: 0.25,
|
||||
shape: 'rect',
|
||||
outline: {
|
||||
border: 2, // 边框宽度
|
||||
distance: 0, // 边框距离
|
||||
style: {
|
||||
stroke: '#FFFFFF' // 边框颜色
|
||||
}
|
||||
},
|
||||
liquidStyle: {
|
||||
stroke: 'black',
|
||||
lineWidth: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
statistic: {
|
||||
content: {
|
||||
style: {
|
||||
opacity: 1,
|
||||
fontSize: 30,
|
||||
lineHeight: 1,
|
||||
fontFamily: 'ds-digitalbold',
|
||||
fill: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
},
|
||||
wave: {
|
||||
length: 128
|
||||
},
|
||||
pattern: {
|
||||
type: 'dot',
|
||||
cfg: {
|
||||
size: 4,
|
||||
fillOpacity: 0,
|
||||
padding: 4,
|
||||
rotation: 0,
|
||||
fill: '#FFF',
|
||||
isStagger: true
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
dataHandler
|
||||
}
|
||||
239
frontend/packages/G2Plots/进度图/进度仪表盘.js
Normal file
239
frontend/packages/G2Plots/进度图/进度仪表盘.js
Normal file
@@ -0,0 +1,239 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111401'
|
||||
// 分类
|
||||
const category = 'Gauge'
|
||||
// 标题
|
||||
const title = '进度仪表盘'
|
||||
// 类别， new Gauge()
|
||||
const chartType = 'Gauge'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'JinDuYiBiaoPan'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '表盘颜色',
|
||||
// 设置组件类型
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'color1',
|
||||
// 对应options中的字段
|
||||
optionField: 'color1',
|
||||
value: 'l(0) 0:#6b74e4 1:#4391f4',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '表盘背景颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'color2',
|
||||
// 对应options中的字段
|
||||
optionField: 'color2',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_title_style_color',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.color',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fontSize',
|
||||
value: 40,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标小数位',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_fixed',
|
||||
// 对应options中的字段
|
||||
optionField: 'statisticFixed',
|
||||
value: 0,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签内容',
|
||||
// 设置组件类型
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'statistic_content_content',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.content',
|
||||
value: '加载进度',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_color',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.color',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 20,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.offsetY',
|
||||
value: -60,
|
||||
min:-100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.offsetY',
|
||||
value: -10,
|
||||
min:-100,
|
||||
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.75
|
||||
}
|
||||
]
|
||||
// 配置处理脚本
|
||||
const optionHandler ='option.range.color = [option.color1, option.color2]\n' +
|
||||
' let fix = option.statisticFixed\n' +
|
||||
' option.statistic.title.formatter = ({ percent }) => `${(percent * 100).toFixed(fix)}%`'
|
||||
// 数据处理脚本
|
||||
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,
|
||||
percent: 0.75,
|
||||
color1: 'l(0) 0:#6b74e4 1:#4391f4',
|
||||
color2: '#FFFFFF',
|
||||
range: {
|
||||
color: ['l(0) 0:#6b74e4 1:#4391f4','#d0d0d0']
|
||||
},
|
||||
statisticFixed: 0,
|
||||
startAngle: Math.PI,
|
||||
endAngle: 2 * Math.PI,
|
||||
indicator: null,
|
||||
statistic: {
|
||||
title: {
|
||||
offsetY: -60,
|
||||
style: {
|
||||
fontSize: 40,
|
||||
lineHeight: 2,
|
||||
fontFamily: 'ds-digitalbold',
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
|
||||
},
|
||||
content: {
|
||||
offsetY: -10,
|
||||
content: '占比',
|
||||
style: {
|
||||
fontSize: 20,
|
||||
lineHeight: 2,
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
dataHandler,
|
||||
optionHandler
|
||||
}
|
||||
209
frontend/packages/G2Plots/进度图/进度指标环图.js
Normal file
209
frontend/packages/G2Plots/进度图/进度指标环图.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111401'
|
||||
// 分类
|
||||
const category = 'RingProgress'
|
||||
// 标题
|
||||
const title = '进度指标环图'
|
||||
// 类别， new Gauge()
|
||||
const chartType = 'RingProgress'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'JinDuZhiBiaoHuanTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '进度条背景色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'color2',
|
||||
// 对应options中的字段
|
||||
optionField: 'color2',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '进度条颜色',
|
||||
// 设置组件类型
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'color1',
|
||||
// 对应options中的字段
|
||||
optionField: 'color1',
|
||||
value: 'l(0) 0:#6b74e4 1:#4391f4',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// {
|
||||
// label: '标签文本',
|
||||
// // 设置组件类型
|
||||
// type: 'input',
|
||||
// // 字段
|
||||
// field: 'statistic_title_content',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'statistic.title.content',
|
||||
// value: '进度',
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
// {
|
||||
// label: '标签字体颜色',
|
||||
// // 设置组件类型
|
||||
// type: 'colorPicker',
|
||||
// // 字段
|
||||
// field: 'statistic_title_style_fill',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'statistic.title.style.fill',
|
||||
// value: 'rgba(133, 133, 133, 1)',
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
// {
|
||||
// label: '标签字体大小',
|
||||
// // 设置组件类型
|
||||
// type: 'inputNumber',
|
||||
// // 字段
|
||||
// field: 'statistic_title_style_fontSize',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'statistic.title.style.fontSize',
|
||||
// value: 20,
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
// {
|
||||
// label: '标签位置',
|
||||
// // 设置组件类型
|
||||
// type: 'inputNumber',
|
||||
// // 字段
|
||||
// field: 'statistic_title_style_offsetY',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'statistic.title.offsetY',
|
||||
// value: 0,
|
||||
// min: -100,
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
{
|
||||
label: '指标字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 40,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标位置',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.offsetY',
|
||||
value: 0,
|
||||
min: -100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// 内边距 appendPadding
|
||||
{
|
||||
label: '',
|
||||
type: 'appendPadding',
|
||||
field: 'appendPadding',
|
||||
optionField: 'appendPadding',
|
||||
value: [0, 0, 0, 0],
|
||||
tabName: 'custom',
|
||||
groupName: 'appendPadding'
|
||||
}
|
||||
]
|
||||
|
||||
// 配置处理脚本
|
||||
const optionHandler = 'option.color = [option.color1, option.color2]'
|
||||
const data = [
|
||||
{
|
||||
percent: 0.6
|
||||
}
|
||||
]
|
||||
// 数据处理脚本
|
||||
const dataHandler =
|
||||
"option.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,
|
||||
color1: 'l(0) 0:#6B74E3 1:#38BBE5',
|
||||
color2: '#FFFFFF',
|
||||
autoFit: true,
|
||||
percent: 0.6,
|
||||
color: ['l(0) 0:#6B74E3 1:#38BBE5', '#d0d0d0'],
|
||||
innerRadius: 0.85,
|
||||
radius: 0.98,
|
||||
statistic: {
|
||||
content: {
|
||||
style: { fill: '#FFFFFF', fontSize: 40, fontFamily: 'ds-digitalbold', lineHeight: 2 },
|
||||
offsetY: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
optionHandler,
|
||||
dataHandler
|
||||
}
|
||||
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
|
||||
}
|
||||
215
frontend/packages/G2Plots/进度图/进度环图.js
Normal file
215
frontend/packages/G2Plots/进度图/进度环图.js
Normal file
@@ -0,0 +1,215 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111601'
|
||||
// 分类
|
||||
const category = 'RingProgress'
|
||||
// 标题
|
||||
const title = '进度环图'
|
||||
// 类别， new Gauge()
|
||||
const chartType = 'RingProgress'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'JinDuHuanTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '进度条背景色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'color2',
|
||||
// 对应options中的字段
|
||||
optionField: 'color2',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '进度条颜色',
|
||||
// 设置组件类型
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'color1',
|
||||
// 对应options中的字段
|
||||
optionField: 'color1',
|
||||
value: 'l(0) 0:#6b74e4 1:#4391f4',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签文本',
|
||||
// 设置组件类型
|
||||
type: 'input',
|
||||
// 字段
|
||||
field: 'statistic_title_content',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.content',
|
||||
value: '进度',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.style.fontSize',
|
||||
value: 20,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 40,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '标签间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_title_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.title.offsetY',
|
||||
value: 0,
|
||||
min:-100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '指标间距大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_offsetY',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.offsetY',
|
||||
value: -10,
|
||||
min:-100,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
}
|
||||
,
|
||||
// 内边距 appendPadding
|
||||
{
|
||||
label: '',
|
||||
type: 'appendPadding',
|
||||
field: 'appendPadding',
|
||||
optionField: 'appendPadding',
|
||||
value: [0, 0, 0, 0],
|
||||
tabName: 'custom',
|
||||
groupName: 'appendPadding'
|
||||
}
|
||||
]
|
||||
|
||||
// 配置处理脚本
|
||||
const optionHandler = 'option.color = [option.color1, option.color2]'
|
||||
const data = [
|
||||
{
|
||||
percent: 0.6
|
||||
}
|
||||
]
|
||||
// 数据处理脚本
|
||||
const dataHandler =
|
||||
"option.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,
|
||||
color1: 'l(0) 0:#6B74E3 1:#38BBE5',
|
||||
color2: '#FFFFFF',
|
||||
autoFit: true,
|
||||
percent: 0.6,
|
||||
color: ['l(0) 0:#6B74E3 1:#38BBE5', '#d0d0d0'],
|
||||
innerRadius: 0.85,
|
||||
radius: 0.98,
|
||||
statistic: {
|
||||
title: {
|
||||
style: { fill: '#FFFFFF', fontSize: 28, lineHeight: 2 },
|
||||
content: '进度',
|
||||
offsetY: 0
|
||||
},
|
||||
content: {
|
||||
style: { fill: '#FFFFFF', fontSize: 40, fontFamily: 'ds-digitalbold', lineHeight: 2 },
|
||||
offsetY: -10
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
optionHandler,
|
||||
dataHandler
|
||||
}
|
||||
232
frontend/packages/G2Plots/进度图/钻石水波图.js
Normal file
232
frontend/packages/G2Plots/进度图/钻石水波图.js
Normal file
@@ -0,0 +1,232 @@
|
||||
import fontList from 'data-room-ui/js/utils/fontList'
|
||||
// 配置版本号
|
||||
const version = '2023111601'
|
||||
// 分类
|
||||
const category = 'Liquid'
|
||||
// 标题
|
||||
const title = '钻石水波图'
|
||||
// 类别， new Liquid()
|
||||
const chartType = 'Liquid'
|
||||
// 用于标识，唯一，和文件夹名称一致
|
||||
const name = 'ZuanShiShuiBoTu'
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '指标',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'percent',
|
||||
// 对应options中的字段
|
||||
optionField: 'percent',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: '',
|
||||
tabName: 'data'
|
||||
},
|
||||
/** 样式配置 **/
|
||||
// 图表 graph
|
||||
{
|
||||
label: '贴图',
|
||||
type: 'switch', // 设置组件类型
|
||||
field: 'pattern_cfg_fillOpacity', // 字段
|
||||
optionField: 'pattern.cfg.fillOpacity', // 对应options中的字段
|
||||
value: 0,
|
||||
active: 1,
|
||||
inactive: 0,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'pattern_type',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.type',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'dot',
|
||||
tabName: 'custom',
|
||||
options: [
|
||||
{ label: '圆点', value: 'dot' },
|
||||
{ label: '矩形', value: 'square' }
|
||||
],
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '贴图颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'pattern_cfg_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'pattern.cfg.fill',
|
||||
value: '#ffffff',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fill',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fill',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体大小',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontSize',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontSize',
|
||||
value: 30,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '字体类型',
|
||||
// 设置组件类型
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'statistic_content_style_fontFamily',
|
||||
// 对应options中的字段
|
||||
optionField: 'statistic.content.style.fontFamily',
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
value: 'ds-digitalbold',
|
||||
tabName: 'custom',
|
||||
options: fontList,
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '边框宽度',
|
||||
// 设置组件类型
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'outline_border',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.border',
|
||||
value: 2,
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
// {
|
||||
// label: '边框间距',
|
||||
// // 设置组件类型
|
||||
// type: 'inputNumber',
|
||||
// // 字段
|
||||
// field: 'outline_distance',
|
||||
// // 对应options中的字段
|
||||
// optionField: 'outline.distance',
|
||||
// value: 1,
|
||||
// tabName: 'custom',
|
||||
// groupName: 'graph'
|
||||
// },
|
||||
{
|
||||
label: '边框颜色',
|
||||
// 设置组件类型
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'outline_style_stroke',
|
||||
// 对应options中的字段
|
||||
optionField: 'outline.style.stroke',
|
||||
value: '#FFFFFF',
|
||||
tabName: 'custom',
|
||||
groupName: 'graph'
|
||||
},
|
||||
{
|
||||
label: '水波颜色',
|
||||
type: 'colorPicker', // 设置组件类型
|
||||
field: 'color', // 字段
|
||||
optionField: 'color', // 对应options中的字段
|
||||
value: '#1DAEFF',
|
||||
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.25
|
||||
}
|
||||
]
|
||||
// 数据处理脚本
|
||||
const dataHandler = '// 取返回数据列表的第一项指标值\noption.percent = data[0][setting.filter(settingItem=>settingItem.field === \'percent\')[0].value]'
|
||||
|
||||
// 图表配置 new Liquid('domName', option)
|
||||
const option = {
|
||||
// 数据将要放入到哪个字段中
|
||||
dataKey: 'percent',
|
||||
renderer: 'canvas',
|
||||
// 图表内边距
|
||||
appendPadding: [0, 0, 0, 0],
|
||||
color: '#1DAEFF',
|
||||
percent: 0.25,
|
||||
data,
|
||||
shape: 'diamond',
|
||||
outline: {
|
||||
border: 2, // 边框宽度
|
||||
distance: 0, // 边框距离
|
||||
style: {
|
||||
stroke: '#FFFFFF' // 边框颜色
|
||||
}
|
||||
},
|
||||
liquidStyle: {
|
||||
stroke: 'black',
|
||||
lineWidth: 0,
|
||||
strokeOpacity: 0
|
||||
},
|
||||
statistic: {
|
||||
content: {
|
||||
style: {
|
||||
opacity: 1,
|
||||
fontSize: 30,
|
||||
lineHeight: 1,
|
||||
fontFamily: 'ds-digitalbold',
|
||||
fill: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
},
|
||||
wave: {
|
||||
length: 128
|
||||
},
|
||||
pattern: {
|
||||
type: 'dot',
|
||||
cfg: {
|
||||
size: 4,
|
||||
fillOpacity: 0,
|
||||
padding: 4,
|
||||
rotation: 0,
|
||||
fill: '#FFF',
|
||||
isStagger: true
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
category,
|
||||
version,
|
||||
title,
|
||||
chartType,
|
||||
name,
|
||||
option,
|
||||
setting,
|
||||
dataHandler
|
||||
}
|
||||
Reference in New Issue
Block a user