You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

664 lines
15 KiB
JavaScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/*
* @description: 配置参考https://g2plot.antv.antgroup.com/examples
* @Date: 2023-03-27 14:38:23
* @Author: xing.heng
*/
// 配置版本号
const version = '2023111501'
// 分类
const category = 'Column'
// 标题
const title = '分组柱状图'
// 类别, new Line()
const chartType = 'Column'
// 用于标识,唯一,和文件夹名称一致
const name = 'FenZuZhuZhuangTu'
// 右侧配置项
const setting = [
{
label: '维度',
type: 'select', // 设置组件类型
field: 'xField', // 字段
optionField: 'xField', // 对应options中的字段
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: '指标',
type: 'select', // 设置组件类型
field: 'yField', // 字段
optionField: 'yField', // 对应options中的字段
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: '分组字段',
type: 'select', // 设置组件类型
field: 'seriesField', // 字段
optionField: 'seriesField', // 对应options中的字段
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
/** 样式配置 **/
// 图表 graph
{
label: '数据标签',
type: 'switch', // 设置组件类型
field: 'label_style_opacity', // 字段
optionField: 'label.style.opacity', // 对应options中的字段
value: 0,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签位置',
type: 'select', // 设置组件类型
field: 'label_position', // 字段
optionField: 'label.position', // 对应options中的字段
// 是否多选
multiple: false,
value: 'middle',
tabName: 'custom',
options: [
{
label: '顶部',
value: 'top'
},
{
label: '居中',
value: 'middle'
},
{
label: '底部',
value: 'bottom'
}
],
groupName: 'graph'
},
{
label: '数据标签颜色',
type: 'colorPicker', // 设置组件类型
field: 'label_style_fill', // 字段
optionField: 'label.style.fill', // 对应options中的字段
value: '#ffffff',
tabName: 'custom',
groupName: 'graph'
},
{
label: '数据标签大小',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'label_style_fontSize',
// 对应options中的字段
optionField: 'label.style.fontSize',
value: 10,
tabName: 'custom',
groupName: 'graph'
},
{
label: '柱子颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'color',
// 对应options中的字段
optionField: 'color',
value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
tabName: 'custom',
groupName: 'graph'
},
// 网格线 grid
{
label: '虚线',
type: 'switch',
field: 'yAxis_grid_line_style_lineDash',
optionField: 'yAxis.grid.line.style.lineDash',
value: 0,
active: 5,
inactive: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '宽度',
type: 'inputNumber',
field: 'yAxis_grid_line_style_lineWidth',
optionField: 'yAxis.grid.line.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'grid'
},
{
label: '颜色',
type: 'colorPicker',
field: 'yAxis_grid_line_style_stroke',
optionField: 'yAxis.grid.line.style.stroke',
value: '#E5E6EB10',
tabName: 'custom',
groupName: 'grid'
},
// 图例 legend
{
label: '显示',
type: 'switch', // 设置组件类型
field: 'legendEnable', // 字段
optionField: 'legendEnable', // 对应options中的字段
value: false,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'legend'
},
{
label: '位置',
type: 'select', // 设置组件类型
field: 'legendPosition', // 字段
optionField: 'legendPosition', // 对应options中的字段
// 是否多选
multiple: false,
value: 'top',
tabName: 'custom',
options: [
{ label: '顶部', value: 'top' },
{ label: '左上角', value: 'top-left' },
{ label: '右上角', value: 'top-right' },
{ label: '左侧', value: 'left' },
// { label: '左上方', value: 'left-top' },
// { label: '左下方', value: 'left-bottom' },
{ label: '右侧', value: 'right' },
// { label: '右上方', value: 'right-top' },
// { label: '右下方', value: 'right-bottom' },
{ label: '底部', value: 'bottom' },
{ label: '左下角', value: 'bottom-left' },
{ label: '右下角', value: 'bottom-right' }
],
groupName: 'legend'
},
{
label: '字体大小',
type: 'inputNumber',
field: 'legendItemName_style_fontSize',
optionField: 'legendItemName.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体权重',
type: 'inputNumber',
step: 100,
max: 900,
field: 'legendItemName_style_fontWeight',
optionField: 'legendItemName.style.fontWeight',
value: 400,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体颜色',
type: 'colorPicker',
field: 'legendItemName_style_fill',
optionField: 'legendItemName.style.fill',
value: '#e9e9e9',
tabName: 'custom',
groupName: 'legend'
},
// X轴 xAxis
{
label: '标题',
type: 'input',
field: 'xAxis_title_text',
optionField: 'xAxis.title.text',
value: '',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题位置',
type: 'select',
field: 'xAxis_title_position',
optionField: 'xAxis.title.position',
value: 'end',
tabName: 'custom',
options: [
{
label: '左',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '右',
value: 'end'
}],
groupName: 'xAxis'
},
{
label: '标题字体大小',
type: 'inputNumber',
field: 'xAxis_title_style_fontSize',
optionField: 'xAxis.title.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'xAxis_title_style_fill',
optionField: 'xAxis.title.style.fill',
// 是否多选
multiple: false,
value: '#e9e9e9',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'xAxis_label_style_fontSize',
optionField: 'xAxis.label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'xAxis_label_style_fill',
optionField: 'xAxis.label.style.fill',
// 是否多选
multiple: false,
value: '#e9e9e9',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'xAxis_line_style_lineWidth',
optionField: 'xAxis.line.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_line_style_stroke',
optionField: 'xAxis.line.style.stroke',
// 是否多选
multiple: false,
value: '#C9CDD4',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '刻度线宽度',
type: 'inputNumber',
field: 'xAxis_tickLine_style_lineWidth',
optionField: 'xAxis.tickLine.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '刻度线颜色',
type: 'colorPicker',
field: 'xAxis_tickLine_style_stroke',
optionField: 'xAxis.tickLine.style.stroke',
// 是否多选
multiple: false,
value: '#C9CDD4',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过多时隐藏',
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHideEnable',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签隐藏判定间隔',
type: 'inputNumber',
field: 'xAxis_label_autoHide_minGap',
optionField: 'xAxis.label.autoHideMinGap',
value: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过多时旋转',
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过长时省略',
type: 'switch',
field: 'xAxis_label_autoEllipsis',
optionField: 'xAxis.label.autoEllipsis',
value: true,
tabName: 'custom',
groupName: 'xAxis'
},
// Y轴 yAxis
{
label: '标题',
type: 'input',
field: 'yAxis_title_text',
optionField: 'yAxis.title.text',
value: '',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题过长时旋转',
type: 'switch',
field: 'yAxis_title_autoRotate',
optionField: 'yAxis.title.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题位置',
type: 'select',
field: 'yAxis_title_position',
optionField: 'yAxis.title.position',
value: 'end',
tabName: 'custom',
options: [
{
label: '上',
value: 'end'
},
{
label: '中',
value: 'center'
},
{
label: '下',
value: 'start'
}],
groupName: 'yAxis'
},
{
label: '标题字体大小',
type: 'inputNumber',
field: 'yAxis_title_style_fontSize',
optionField: 'yAxis.title.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'yAxis_title_style_fill',
optionField: 'yAxis.title.style.fill',
// 是否多选
multiple: false,
value: '#e9e9e9',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '显示标签',
type: 'switch',
field: 'yAxis_label_style_opacity',
optionField: 'yAxis.label.style.opacity',
value: 1,
active: 1,
inactive: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签字体大小',
type: 'inputNumber',
field: 'yAxis_label_style_fontSize',
optionField: 'yAxis.label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'yAxis_label_style_fill',
optionField: 'yAxis.label.style.fill',
// 是否多选
multiple: false,
value: '#e9e9e9',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'yAxis_line_lineWidth',
optionField: 'yAxis.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'yAxis_line_stroke',
optionField: 'yAxis.line.style.stroke',
// 是否多选
multiple: false,
value: '#C9CDD4',
tabName: 'custom',
groupName: 'yAxis'
},
// 内边距 appendPadding
{
label: '',
type: 'appendPadding',
field: 'appendPadding',
optionField: 'appendPadding',
value: [0, 0, 0, 0],
tabName: 'custom',
groupName: 'appendPadding'
}
]
// 模拟数据
const data = [
{ date: '2018年', value: 300, type: '已处理' },
{ date: '2019年', value: 200, type: '已处理' },
{ date: '2020年', value: 100, type: '已处理' },
{ date: '2021年', value: 200, type: '已处理' },
{ date: '2022年', value: 300, type: '已处理' },
{ date: '2023年', value: 400, type: '已处理' },
{ date: '2018年', value: 200, type: '未处理' },
{ date: '2019年', value: 300, type: '未处理' },
{ date: '2020年', value: 200, type: '未处理' },
{ date: '2021年', value: 100, type: '未处理' },
{ date: '2022年', value: 200, type: '未处理' },
{ date: '2023年', value: 300, type: '未处理' }
]
// 配置处理脚本
const optionHandler =
`
option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === 'legendPosition').value} : false;
if (option.legendEnable) {
option.legend.itemName = option.legendItemName
};
option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === 'yAxis_grid_line_style_lineDash').value]
let autoHide = setting.find(settingItem=>settingItem.field === 'xAxis_label_autoHide').value
if(autoHide){
let minGap = option.xAxis.label.autoHideMinGap
option.xAxis.label.autoHide = {
type: 'equidistance',
cfg: { minGap: minGap }
}
} else {
option.xAxis.label.autoHide = false
}
`
// 数据处理脚本
const dataHandler = ''
// 图表配置 new Line('domName', option)
const option = {
// 数据将要放入到哪个字段中
dataKey: 'data',
// 图表内边距
appendPadding: [0, 0, 0, 0],
renderer: 'canvas',
data,
legendEnable: false,
legendLayout: 'vertical',
legendPosition: 'top',
legendItemName: {
style: {
fill: '#e9e9e9',
fontSize: 12,
fontWeight: 400
}
},
legend: false,
color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
isGroup: true,
xField: 'date',
yField: 'value',
seriesField: 'type',
/** 设置颜色 */
// color: ['#1ca9e6', '#f88c24'],
/** 设置间距 */
// marginRatio: 0.1,
pattern: {
type: ''
},
xAxis: {
title: {
text: '',
position: 'end',
style: {
fill: '#e9e9e9',
fontSize: 12
}
},
label: {
autoRotate: false,
autoHide: true,
autoEllipsis: true,
autoHideEnable: true,
autoHideMinGap: 2,
style: {
fill: '#e9e9e9',
fontSize: 12
}
},
line: {
style: {
stroke: '#C9CDD4',
lineWidth: 1
}
},
tickLine: {
style: {
stroke: '#C9CDD4',
lineWidth: 1
}
}
},
yAxis: {
title: {
text: '',
position: 'end',
autoRotate: false,
// rotation: Math.PI / 2,
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
grid: {
line: {
style: {
stroke: '#E5E6EB10',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
},
label: {
formatter: (v) => {
if (v < 1e3) return v
// 数值格式化为千分位
if (v >= 1e3 && v < 1e6) return `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
if (v >= 1e6 && v < 1e9) return `${(v / 1e6).toFixed(1)} M`
if (v >= 1e9 && v < 1e12) return `${(v / 1e9).toFixed(1)} B`
return `${(v / 10e8).toFixed(1)} B`
},
style: {
fill: '#e9e9e9',
fontSize: 12,
opacity: 1
}
},
line: {
style: {
stroke: '#C9CDD4',
lineWidth: 0
}
}
},
label: {
offsetY: 20,
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'middle', 'bottom'
// 配置样式
style: {
fill: '#59F25F',
opacity: 0,
fontSize: 12
}
}
}
export default {
category,
version,
title,
chartType,
name,
option,
setting,
optionHandler,
dataHandler
}