tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增堆叠条形图

Browse Source
main
hong.yang 1 year ago
parent 617937a01f
commit dd259a0072
3 changed files with 700 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
data-room-ui/packages/G2Plots/images/componentLogo/堆叠条形图.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
data-room-ui/packages/G2Plots/plotListSort.js
Unescape Escape View File

@ -20,8 +20,10 @@ export default [
'基础面积图',
'渐变色面积图',
'堆叠面积图',
'基础条形图',
'分组条形图',
'堆叠条形图',
'基础饼图',
'基础环图',

698
data-room-ui/packages/G2Plots/条形图/堆叠条形图.js
Unescape Escape View File

@ -0,0 +1,698 @@
/*
* @description: 配置，参考https://g2plot.antv.antgroup.com/examples
* @Date: 2023-03-27 14:38:23
* @Author: xing.heng
*/
// 配置版本号
const version = '20231107'
// 分类
const category = 'Bar'
// 标题
const title = '堆叠条形图'
// 类别， new Line()
const chartType = 'Bar'
// 用于标识，唯一，和文件夹名称一致
const name = 'DuiDieTiaoXingTu'
// 右侧配置项
const setting = [
{
label: '维度',
// 设置组件类型
type: 'select',
// 字段
field: 'yField',
// 对应options中的字段
optionField: 'yField',
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: '指标',
// 设置组件类型， select / input / colorPicker
type: 'select',
// 字段
field: 'xField',
optionField: 'xField', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
// tab页。 data: 数据， custom: 自定义
tabName: 'data'
},
{
label: '分组',
// 设置组件类型
type: 'select',
// 字段
field: 'seriesField',
// 对应options中的字段
optionField: 'seriesField',
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
/** 样式配置 **/
// 图表 graph
// {
// label: '条形样式',
// type: 'select', // 设置组件类型
// field: 'shape', // 字段
// optionField: 'shape', // 对应options中的字段
// // 是否多选
// multiple: false,
// value: 'default',
// tabName: 'custom',
// options: [
// {
// label: '实心条形',
// value: 'default'
// },
// // {
// // label: '线性',
// // value: 'line'
// // },
// {
// label: '空心条形',
// value: 'hollow-rect'
// },
// {
// label: '钉形',
// value: 'tick'
// }
// ],
// groupName: '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: 'inputNumber',
// 字段
field: 'label_style_fontSize',
// 对应options中的字段
optionField: 'label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形颜色',
// 设置组件类型
type: 'colorSelect',
// 字段
field: 'color',
// 对应options中的字段
optionField: 'color',
value: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形最小宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'minBarWidth',
// 对应options中的字段
optionField: 'minBarWidth',
value: 0,
tabName: 'custom',
groupName: 'graph'
},
{
label: '条形最大宽度',
// 设置组件类型
type: 'inputNumber',
// 字段
field: 'maxBarWidth',
// 对应options中的字段
optionField: 'maxBarWidth',
value: 100,
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: 'xAxis_grid_line_style_lineWidth',
optionField: 'xAxis.grid.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'grid'
},
{
label: '颜色',
type: 'colorPicker',
field: 'xAxis_grid_line_style_stroke',
optionField: 'xAxis.grid.line.style.stroke',
value: '#d0d0d0',
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: '#595959',
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: '#8C8C8C',
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: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'xAxis_line_style_lineWidth',
optionField: 'xAxis.line.style.lineWidth',
value: 0,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_line_style_stroke',
optionField: 'xAxis.line.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
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: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '下',
value: 'end'
}],
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: '#8C8C8C',
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: '#8C8C8C',
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: 'rgba(255,255,255,1)',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: 'y刻度线宽度',
type: 'inputNumber',
field: 'yAxis_tickLine_style_lineWidth',
optionField: 'yAxis.tickLine.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: 'y刻度线颜色',
type: 'colorPicker',
field: 'yAxis_tickLine_style_stroke',
optionField: 'yAxis.tickLine.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过多时旋转',
type: 'switch',
field: 'yAxis_label_autoRotate',
optionField: 'yAxis.label.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过多时隐藏',
type: 'switch',
field: 'yAxis_label_autoHide',
optionField: 'yAxis.label.autoHide',
value: true,
tabName: 'custom',
groupName: 'yAxis'
},
{
label: '标签过长时省略',
type: 'switch',
field: 'yAxis_label_autoEllipsis',
optionField: 'yAxis.label.autoEllipsis',
value: true,
tabName: 'custom',
groupName: 'yAxis'
},
// 边距 padding
]
// 模拟数据
const data = [
{
label: 'Mon.',
type: 'series1',
value: 2800
},
{
label: 'Mon.',
type: 'series2',
value: 2260
},
{
label: 'Tues.',
type: 'series1',
value: 1800
},
{
label: 'Tues.',
type: 'series2',
value: 1300
},
{
label: 'Wed.',
type: 'series1',
value: 950
},
{
label: 'Wed.',
type: 'series2',
value: 900
},
{
label: 'Thur.',
type: 'series1',
value: 500
},
{
label: 'Thur.',
type: 'series2',
value: 390
},
{
label: 'Fri.',
type: 'series1',
value: 170
},
{
label: 'Fri.',
type: 'series2',
value: 100
}
]
// 配置处理脚本
const optionHandler = '\noption.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
'\nconst radiusNum = setting.find(settingItem=>settingItem.field === \'radiusNum\').value; option.barStyle.radius = [radiusNum,radiusNum,0,0];' +
'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = ''
// 图表配置 new Line('domName', option)
const option = {
// 数据将要放入到哪个字段中
dataKey: 'data',
renderer: 'canvas',
data,
isStack: true,
// shape: ' ',
xField: 'value',
yField: 'label',
seriesField: 'type',
legendEnable: false,
legendLayout: 'vertical',
legendPosition: 'top',
legendItemName: {
style: {
fill: '#595959',
fontSize: 12,
fontWeight: 400
}
},
/** 自定义颜色 */
color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
legend: false,
label: {
position: 'middle',
style: {
fill: '#59F25F',
opacity: 0,
fontSize: 12
},
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
radiusNum: 0, // 设置条形图的圆角的中间值
xAxis: {
grid: {
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
}
},
title: {
text: '',
position: 'end',
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
label: {
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
},
tickLine: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
}
},
yAxis: {
title: {
text: '',
position: 'end',
autoRotate: false,
// rotation: Math.PI / 2,
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
grid: {
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0,
strokeOpacity: 0.7
}
}
},
label: {
autoRotate: false,
autoHide: true,
autoEllipsis: true,
style: {
fill: '#8C8C8C',
fontSize: 12,
opacity: 1
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
},
tickLine: {
style: {
stroke: '#d0d0d0',
lineWidth: 1
}
}
}
}
export default {
category,
version,
title,
chartType,
name,
option,
setting,
optionHandler,
dataHandler
}
Write Preview
Loading…
Cancel
Save