mirror of
https://github.com/dataease/dataease.git
synced 2026-06-16 20:42:07 +08:00
feat(图表): 支持基础条形图
This commit is contained in:
jianneng-fit2cloud
committed by
jianneng-fit2cloud
jianneng-fit2cloud
parent
61552f8a28
commit
9bd098d216
@@ -7,7 +7,7 @@ import {
|
||||
} from '@/views/chart/components/js/panel/charts/g2/bar/common'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { flow, hexColorToRGBA, hexToRgba, parseJson } from '@/views/chart/components/js/util'
|
||||
import { cloneDeep, defaultsDeep, isEmpty } from 'lodash-es'
|
||||
import { cloneDeep, isEmpty } from 'lodash-es'
|
||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
||||
import {
|
||||
getLineDash,
|
||||
@@ -171,7 +171,7 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
|
||||
}
|
||||
return valueFormatter(value, labelCfg.formatterCfg)
|
||||
},
|
||||
...(l.fullDisplay ? {} : transform)
|
||||
...(l.fullDisplay ? { transform: [{ type: 'exceedAdjust' }] } : transform)
|
||||
}
|
||||
return {
|
||||
...options,
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
import {
|
||||
BAR_AXIS_TYPE,
|
||||
BAR_EDITOR_PROPERTY,
|
||||
BAR_EDITOR_PROPERTY_INNER
|
||||
} from '@/views/chart/components/js/panel/charts/g2/bar/common'
|
||||
import { flow, parseJson } from '@/views/chart/components/js/util'
|
||||
import { ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Bar } from '@/views/chart/components/js/panel/charts/g2/bar/bar'
|
||||
import { getLineDash } from '@/views/chart/components/js/panel/common/common_antv'
|
||||
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
||||
import { Chart } from '@antv/g2'
|
||||
|
||||
const { t } = useI18n()
|
||||
/**
|
||||
* 基础条形图
|
||||
*/
|
||||
export class HorizontalBar extends Bar {
|
||||
axisConfig = {
|
||||
...this['axisConfig'],
|
||||
xAxis: {
|
||||
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
|
||||
type: 'd'
|
||||
},
|
||||
yAxis: {
|
||||
name: `${t('chart.drag_block_value_axis')} / ${t('chart.quota')}`,
|
||||
type: 'q'
|
||||
}
|
||||
}
|
||||
properties = BAR_EDITOR_PROPERTY
|
||||
propertyInner = {
|
||||
...BAR_EDITOR_PROPERTY_INNER,
|
||||
'basic-style-selector': [...BAR_EDITOR_PROPERTY_INNER['basic-style-selector'], 'seriesColor'],
|
||||
'label-selector': ['hPosition', 'seriesLabelFormatter'],
|
||||
'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'seriesTooltipFormatter', 'show'],
|
||||
'x-axis-selector': [
|
||||
...BAR_EDITOR_PROPERTY_INNER['x-axis-selector'],
|
||||
'axisLabelFormatter',
|
||||
'axisValue'
|
||||
],
|
||||
'y-axis-selector': [
|
||||
'name',
|
||||
'color',
|
||||
'fontSize',
|
||||
'axisLine',
|
||||
'splitLine',
|
||||
'axisForm',
|
||||
'axisLabel',
|
||||
'position',
|
||||
'showLengthLimit'
|
||||
]
|
||||
}
|
||||
axis: AxisType[] = [...BAR_AXIS_TYPE]
|
||||
|
||||
protected configLabel(chart: Chart, options: ViewSpec): ViewSpec {
|
||||
const tmpOptions = super.configLabel(chart, options)
|
||||
const { children } = tmpOptions
|
||||
if (children?.[0].labels?.length) {
|
||||
const newLabel = {
|
||||
...children[0].labels[0],
|
||||
textAlign: 'start'
|
||||
}
|
||||
return {
|
||||
...tmpOptions,
|
||||
children: [{ ...children[0], labels: [newLabel] }, ...children.slice(1)]
|
||||
}
|
||||
}
|
||||
return tmpOptions
|
||||
}
|
||||
|
||||
protected configYAxis(chart: Chart, options: ViewSpec): ViewSpec {
|
||||
const { children } = options
|
||||
const xAxis = this.getAxisConfig(chart, 'xAxis')
|
||||
const tmpOptions = {
|
||||
...options,
|
||||
children: [
|
||||
{
|
||||
...children[0],
|
||||
axis: { ...children[0].axis, y: xAxis }
|
||||
},
|
||||
...children.slice(1)
|
||||
]
|
||||
}
|
||||
const customStyle = parseJson(chart.customStyle)
|
||||
const xAxisAtt = JSON.parse(JSON.stringify(customStyle['xAxis']))
|
||||
if (!xAxisAtt.axisValue?.auto) {
|
||||
return {
|
||||
...tmpOptions,
|
||||
scale: {
|
||||
...options.scale,
|
||||
y: {
|
||||
nice: true,
|
||||
clamp: true,
|
||||
domain: [xAxisAtt.axisValue.min, xAxisAtt.axisValue.max],
|
||||
tickCount: xAxisAtt.axisValue.splitCount
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return tmpOptions
|
||||
}
|
||||
|
||||
protected configXAxis(chart: Chart, options: ViewSpec): ViewSpec {
|
||||
const { children } = options
|
||||
const yAxis = this.getAxisConfig(chart, 'yAxis')
|
||||
const tmpOptions = {
|
||||
...options,
|
||||
children: [
|
||||
{
|
||||
...children[0],
|
||||
axis: { ...children[0].axis, x: yAxis }
|
||||
},
|
||||
...children.slice(1)
|
||||
]
|
||||
}
|
||||
return tmpOptions
|
||||
}
|
||||
|
||||
protected getAxisConfig(chart: Chart, axisType: string): any {
|
||||
const customStyle = parseJson(chart.customStyle)
|
||||
const axis = JSON.parse(JSON.stringify(customStyle[axisType]))
|
||||
if (customStyle[axisType] && axis.show) {
|
||||
// 轴线
|
||||
const line = {
|
||||
line: axis.axisLine.show,
|
||||
lineStrokeOpacity: 1,
|
||||
lineLineWidth: axis.axisLine.lineStyle.width,
|
||||
lineStroke: axis.axisLine.lineStyle.color,
|
||||
lineLineDash: getLineDash(axis.axisLine.lineStyle.style)
|
||||
}
|
||||
// 刻度
|
||||
const tick = {
|
||||
tick: axis.axisLine.show,
|
||||
tickLineWidth: axis.axisLine.lineStyle.width,
|
||||
tickStroke: axis.axisLine.lineStyle.color,
|
||||
tickStrokeOpacity: 2
|
||||
}
|
||||
// 网格线
|
||||
const grid = {
|
||||
grid: axis.splitLine.show,
|
||||
gridLineWidth: axis.splitLine.lineStyle.width,
|
||||
gridStroke: axis.splitLine.lineStyle.color,
|
||||
gridStrokeOpacity: 1,
|
||||
gridLineDash: getLineDash(axis.splitLine.lineStyle.style)
|
||||
}
|
||||
// 标签（刻度值）
|
||||
const label = {
|
||||
label: axis.axisLabel.show,
|
||||
labelFontSize: axis.axisLabel.fontSize,
|
||||
labelFill: axis.axisLabel.color,
|
||||
labelOpacity: 1,
|
||||
labelFormatter: value => {
|
||||
if (axisType === 'xAxis') {
|
||||
return valueFormatter(value, axis.axisLabelFormatter)
|
||||
}
|
||||
return value
|
||||
}
|
||||
}
|
||||
// 刻度值旋转角度
|
||||
const rotate = axis.axisLabel.rotate
|
||||
const labelTransform = {
|
||||
type: 'rotate',
|
||||
optionalAngles: !rotate || rotate === 0 ? [] : [rotate],
|
||||
recoverWhenFailed: false
|
||||
}
|
||||
const x = {
|
||||
position: axis.position,
|
||||
// 标题
|
||||
title: axis.nameShow && axis.name ? axis.name : false,
|
||||
titleFontSize: axis.fontSize,
|
||||
titleFill: axis.color,
|
||||
// 轴线
|
||||
...line,
|
||||
// 刻度线
|
||||
...tick,
|
||||
// 网格线
|
||||
...grid,
|
||||
// 刻度值
|
||||
...label,
|
||||
labelAutoHide: true,
|
||||
labelAutoRotate: false,
|
||||
...(rotate === 0 ? {} : { transform: [labelTransform] })
|
||||
}
|
||||
return x
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
protected setupOptions(chart: Chart, options: ViewSpec): ViewSpec {
|
||||
return flow(
|
||||
this.configTheme,
|
||||
this.configBasicStyle,
|
||||
this.configLabel,
|
||||
this.configTooltip,
|
||||
this.configLegend,
|
||||
this.configXAxis,
|
||||
this.configYAxis,
|
||||
this.configAnalyse,
|
||||
this.configBarConditions
|
||||
)(chart, options, {}, this)
|
||||
}
|
||||
|
||||
constructor(name = 'bar-horizontal') {
|
||||
super(name)
|
||||
Object.assign(this.intervalOptions, {
|
||||
coordinate: { transform: [{ type: 'transpose' }] }
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user