import {
|
G2PlotChartView,
|
G2PlotDrawOptions
|
} from '@/views/chart/components/js/panel/types/impl/g2plot'
|
import type { DualAxes, DualAxesOptions } from '@antv/g2plot/esm/plots/dual-axes'
|
import {
|
configRoundAngle,
|
configPlotTooltipEvent,
|
getAnalyse,
|
getLabel,
|
getPadding,
|
getTooltipContainer,
|
getYAxis,
|
getYAxisExt,
|
setGradientColor,
|
TOOLTIP_TPL
|
} from '../../common/common_antv'
|
import { flow, hexColorToRGBA, parseJson } from '@/views/chart/components/js/util'
|
import {
|
cloneDeep,
|
isEmpty,
|
defaultTo,
|
map,
|
filter,
|
union,
|
defaultsDeep,
|
defaults
|
} from 'lodash-es'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import {
|
CHART_MIX_AXIS_TYPE,
|
CHART_MIX_DEFAULT_BASIC_STYLE,
|
CHART_MIX_EDITOR_PROPERTY,
|
CHART_MIX_EDITOR_PROPERTY_INNER,
|
MixChartBasicStyle
|
} from './chart-mix-common'
|
import type { Datum } from '@antv/g2plot/esm/types/common'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import {
|
DEFAULT_BASIC_STYLE,
|
DEFAULT_LABEL,
|
DEFAULT_LEGEND_STYLE
|
} from '@/views/chart/components/editor/util/chart'
|
import type { Options } from '@antv/g2plot/esm'
|
import { Group } from '@antv/g-canvas'
|
import { extremumEvt } from '@/views/chart/components/js/extremumUitl'
|
|
const { t } = useI18n()
|
const DEFAULT_DATA = []
|
|
/**
|
* 柱线混合图
|
*/
|
export class ColumnLineMix extends G2PlotChartView<DualAxesOptions, DualAxes> {
|
properties = CHART_MIX_EDITOR_PROPERTY
|
propertyInner = {
|
...CHART_MIX_EDITOR_PROPERTY_INNER,
|
'label-selector': ['vPosition', 'seriesLabelFormatter'],
|
'tooltip-selector': [
|
...CHART_MIX_EDITOR_PROPERTY_INNER['tooltip-selector'],
|
'seriesTooltipFormatter',
|
'carousel'
|
]
|
}
|
axis: AxisType[] = [...CHART_MIX_AXIS_TYPE, 'xAxisExtRight', 'yAxisExt']
|
axisConfig = {
|
xAxis: {
|
name: `${t('chart.drag_block_type_axis')} / ${t('chart.dimension')}`,
|
type: 'd'
|
},
|
yAxis: {
|
name: `${t('chart.drag_block_value_axis_left')} / ${t('chart.column_quota')}`,
|
limit: 1,
|
type: 'q'
|
},
|
extBubble: {
|
//用这个字段存放右轴分类
|
name: `${t('chart.drag_block_type_axis_right')} / ${t('chart.dimension')}`,
|
limit: 1,
|
type: 'd',
|
allowEmpty: true
|
},
|
yAxisExt: {
|
name: `${t('chart.drag_block_value_axis_right')} / ${t('chart.line_quota')}`,
|
limit: 1,
|
type: 'q',
|
allowEmpty: true
|
}
|
}
|
|
protected getLeftType(): string {
|
return 'column'
|
}
|
protected getRightType(): string {
|
return 'line'
|
}
|
|
async drawChart(drawOptions: G2PlotDrawOptions<DualAxes>): Promise<DualAxes> {
|
const { chart, action, container } = drawOptions
|
chart.container = container
|
if (!chart.data?.left?.data?.length && !chart.data?.right?.data?.length) {
|
return
|
}
|
const left = cloneDeep(chart.data?.left?.data)
|
const right = cloneDeep(chart.data?.right?.data)
|
|
// const data1Type = (left[0]?.type === 'bar' ? 'column' : left[0]?.type) ?? 'column'
|
// const data2Type = (right[0]?.type === 'bar' ? 'column' : right[0]?.type) ?? 'column'
|
const data1Type = this.getLeftType()
|
const data2Type = this.getRightType()
|
|
const isGroup = this.name === 'chart-mix-group' && chart.xAxisExt?.length > 0
|
const isStack = this.name === 'chart-mix-stack' && chart.extStack?.length > 0
|
const seriesField = 'category'
|
const seriesField2 = 'category'
|
|
const data1 = defaultTo(left[0]?.data, [])
|
const data2 = map(defaultTo(right[0]?.data, []), d => {
|
return {
|
...d,
|
valueExt: d.value
|
}
|
})
|
// options
|
const initOptions: DualAxesOptions = {
|
data: [data1, data2],
|
xField: 'field',
|
yField: ['value', 'valueExt'], //这里不能设置成一样的
|
appendPadding: getPadding(chart),
|
geometryOptions: [
|
{
|
geometry: data1Type,
|
marginRatio: 0,
|
color: [],
|
isGroup: isGroup,
|
isStack: isStack,
|
seriesField: seriesField
|
},
|
{
|
geometry: data2Type,
|
color: [],
|
seriesField: seriesField2
|
}
|
],
|
interactions: [
|
{
|
type: 'legend-active',
|
cfg: {
|
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],
|
end: [{ trigger: 'legend-item:mouseleave', action: ['element-active:reset'] }]
|
}
|
},
|
{
|
type: 'legend-filter',
|
cfg: {
|
start: [
|
{
|
trigger: 'legend-item:click',
|
action: [
|
'list-unchecked:toggle',
|
'data-filter:filter',
|
'element-active:reset',
|
'element-highlight:reset'
|
]
|
}
|
]
|
}
|
},
|
{
|
type: 'active-region'
|
}
|
]
|
}
|
const options = this.setupOptions(chart, initOptions)
|
const { DualAxes } = await import('@antv/g2plot/esm/plots/dual-axes')
|
// 开始渲染
|
const newChart = new DualAxes(container, options)
|
|
newChart.on('point:click', action)
|
newChart.on('interval:click', action)
|
extremumEvt(newChart, chart, options, container)
|
configPlotTooltipEvent(chart, newChart)
|
return newChart
|
}
|
|
protected configLabel(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempLabel = getLabel(chart)
|
const tmpOption = { ...options }
|
if (!tempLabel) {
|
if (tmpOption.geometryOptions) {
|
tmpOption.geometryOptions[0].label = false
|
tmpOption.geometryOptions[1].label = false
|
}
|
return tmpOption
|
}
|
|
const labelAttr = parseJson(chart.customAttr).label
|
const axisFormatterMap = {}
|
labelAttr.seriesLabelFormatter?.forEach(attr => {
|
if (!axisFormatterMap[attr.axisType]) {
|
axisFormatterMap[attr.axisType] = []
|
}
|
axisFormatterMap[attr.axisType].push(attr)
|
})
|
const axisTypes = ['yAxis', 'yAxisExt']
|
axisTypes.forEach(axisType => {
|
const formatterMap = axisFormatterMap[axisType]?.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {})
|
const textBaseline =
|
this.getLeftType() === 'line' ? 'bottom' : axisType === 'yAxis' ? 'top' : 'bottom'
|
tempLabel.style.fill = DEFAULT_LABEL.color
|
const label = {
|
fields: [],
|
...tempLabel,
|
formatter: (data: Datum) => {
|
if (!labelAttr.seriesLabelFormatter?.length) {
|
return data.value
|
}
|
const labelCfg = formatterMap?.[data.quotaList[0].id] as SeriesFormatter
|
if (!labelCfg) {
|
return data.value
|
}
|
if (!labelCfg.show) {
|
return
|
}
|
const value = valueFormatter(data.value, labelCfg.formatterCfg)
|
const group = new Group({})
|
group.addShape({
|
type: 'text',
|
attrs: {
|
x: 0,
|
y: 0,
|
text: value,
|
textAlign: 'start',
|
textBaseline,
|
fontSize: labelCfg.fontSize,
|
fontFamily: chart.fontFamily,
|
fill: labelCfg.color
|
}
|
})
|
return group
|
}
|
}
|
if (tmpOption.geometryOptions) {
|
if (axisType === 'yAxis') {
|
tmpOption.geometryOptions[0].label = label
|
} else if (axisType === 'yAxisExt') {
|
tmpOption.geometryOptions[1].label = label
|
}
|
}
|
})
|
|
return tmpOption
|
}
|
|
protected configBasicStyle(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
// size
|
const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
|
const s = defaultsDeep(
|
JSON.parse(JSON.stringify(customAttr.basicStyle)),
|
CHART_MIX_DEFAULT_BASIC_STYLE
|
)
|
const smooth = s.lineSmooth
|
const point = {
|
size: s.lineSymbolSize,
|
shape: s.lineSymbol,
|
style: {
|
stroke: hexColorToRGBA('#FFFFFF', s.subAlpha)
|
}
|
}
|
const lineStyle = {
|
lineWidth: s.lineWidth
|
}
|
const leftSmooth = s.leftLineSmooth
|
const leftPoint = {
|
size: s.leftLineSymbolSize,
|
shape: s.leftLineSymbol,
|
style: {
|
stroke: hexColorToRGBA('#FFFFFF', s.alpha)
|
}
|
}
|
const leftLineStyle = {
|
lineWidth: s.leftLineWidth
|
}
|
const tempOption = {
|
...options,
|
smooth,
|
point,
|
lineStyle
|
}
|
if (tempOption.geometryOptions) {
|
tempOption.geometryOptions[0].smooth = leftSmooth
|
tempOption.geometryOptions[0].point = leftPoint
|
tempOption.geometryOptions[0].lineStyle = leftLineStyle
|
|
tempOption.geometryOptions[1].smooth = smooth
|
tempOption.geometryOptions[1].point = point
|
tempOption.geometryOptions[1].lineStyle = lineStyle
|
tempOption.geometryOptions[0] = {
|
...tempOption.geometryOptions[0],
|
...configRoundAngle(chart, 'columnStyle')
|
}
|
}
|
|
let columnWidthRatio
|
const _v = s.columnWidthRatio ?? DEFAULT_BASIC_STYLE.columnWidthRatio
|
if (_v >= 1 && _v <= 100) {
|
columnWidthRatio = _v / 100.0
|
} else if (_v < 1) {
|
columnWidthRatio = 1 / 100.0
|
} else if (_v > 100) {
|
columnWidthRatio = 1
|
}
|
if (columnWidthRatio) {
|
tempOption.geometryOptions[0].columnWidthRatio = columnWidthRatio
|
}
|
|
if (super.name !== 'chart-mix-dual-line') {
|
tempOption.geometryOptions[0].appendPadding = getPadding(chart)
|
}
|
|
return tempOption
|
}
|
|
setupDefaultOptions(chart: ChartObj): ChartObj {
|
const { senior } = chart
|
if (
|
senior.functionCfg.emptyDataStrategy == undefined ||
|
senior.functionCfg.emptyDataStrategy === 'ignoreData'
|
) {
|
senior.functionCfg.emptyDataStrategy = 'breakLine'
|
}
|
return chart
|
}
|
|
protected configCustomColors(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempOption = {
|
...options
|
}
|
const basicStyle = parseJson(chart.customAttr).basicStyle as MixChartBasicStyle
|
|
const { seriesColor } = basicStyle
|
if (seriesColor?.length) {
|
const seriesMap = seriesColor.reduce((p, n) => {
|
p[n.id] = n
|
return p
|
}, {})
|
const { yAxis } = chart
|
yAxis?.forEach((axis, index) => {
|
const curAxisColor = seriesMap[axis.id]
|
if (curAxisColor) {
|
if (index + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[index] = curAxisColor.color
|
}
|
}
|
})
|
}
|
//左轴
|
const color = basicStyle.colors.map(ele => {
|
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
return setGradientColor(tmp, true, 270)
|
} else {
|
return tmp
|
}
|
})
|
tempOption.geometryOptions[0].color = color
|
|
return tempOption
|
}
|
|
protected configSubCustomColors(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempOption = {
|
...options
|
}
|
const basicStyle = defaultsDeep(
|
parseJson(chart.customAttr).basicStyle as MixChartBasicStyle,
|
cloneDeep(CHART_MIX_DEFAULT_BASIC_STYLE)
|
)
|
//右轴
|
const { subSeriesColor } = basicStyle
|
if (subSeriesColor?.length) {
|
const { yAxisExt, extBubble } = chart
|
const seriesMap = subSeriesColor.reduce((p, n) => {
|
p[n.id] = n
|
return p
|
}, {})
|
const { data } = options as unknown as Options
|
if (extBubble?.length) {
|
const seriesSet = new Set()
|
data[1]?.forEach(d => d.category !== null && seriesSet.add(d.category))
|
const tmp = [...seriesSet]
|
tmp.forEach((c, i) => {
|
const curAxisColor = seriesMap[c as string]
|
if (curAxisColor) {
|
if (i + 1 > basicStyle.subColors.length) {
|
basicStyle.subColors.push(curAxisColor.color)
|
} else {
|
basicStyle.subColors[i] = curAxisColor.color
|
}
|
}
|
})
|
} else {
|
yAxisExt?.forEach((axis, index) => {
|
const curAxisColor = seriesMap[axis.id]
|
if (curAxisColor) {
|
if (index + 1 > basicStyle.subColors.length) {
|
basicStyle.subColors.push(curAxisColor.color)
|
} else {
|
basicStyle.subColors[index] = curAxisColor.color
|
}
|
}
|
})
|
}
|
}
|
const subColor = basicStyle.subColors.map(c => {
|
const cc = hexColorToRGBA(c, basicStyle.subAlpha)
|
return cc
|
})
|
tempOption.geometryOptions[1].color = subColor
|
|
return tempOption
|
}
|
|
public setupSubSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
|
const result: ChartBasicStyle['seriesColor'] = []
|
const seriesSet = new Set<string>()
|
const colors = chart.customAttr.basicStyle.subColors ?? CHART_MIX_DEFAULT_BASIC_STYLE.subColors
|
const { yAxisExt, extBubble } = chart
|
if (extBubble?.length) {
|
data?.forEach(d => {
|
if (d.value === null || d.category === null || seriesSet.has(d.category)) {
|
return
|
}
|
seriesSet.add(d.category)
|
result.push({
|
id: d.category,
|
name: d.category,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
} else {
|
yAxisExt?.forEach(axis => {
|
if (seriesSet.has(axis.id)) {
|
return
|
}
|
seriesSet.add(axis.id)
|
result.push({
|
id: axis.id,
|
name: axis.chartShowName ?? axis.name,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
}
|
return result
|
}
|
|
protected configYAxis(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const yAxis = getYAxis(chart)
|
const yAxisExt = getYAxisExt(chart)
|
|
const tempOption = {
|
...options
|
}
|
|
tempOption.yAxis = {}
|
if (!yAxis) {
|
//左右轴都要隐藏
|
tempOption.yAxis.value = false
|
} else {
|
tempOption.yAxis.value = undefined
|
yAxis.position = 'left'
|
|
const yAxisTmp = parseJson(chart.customStyle).yAxis
|
if (yAxis.label) {
|
yAxis.label.style.textAlign = 'end'
|
yAxis.label.formatter = value => {
|
return valueFormatter(value, yAxisTmp.axisLabelFormatter)
|
}
|
}
|
const axisValue = yAxisTmp.axisValue
|
if (!axisValue?.auto) {
|
tempOption.yAxis.value = {
|
...yAxis,
|
min: axisValue.min,
|
max: axisValue.max,
|
minLimit: axisValue.min,
|
maxLimit: axisValue.max,
|
tickCount: axisValue.splitCount
|
}
|
} else {
|
tempOption.yAxis.value = yAxis
|
}
|
}
|
|
if (!yAxisExt) {
|
//左右轴都要隐藏
|
tempOption.yAxis.valueExt = false
|
} else {
|
tempOption.yAxis.valueExt = undefined
|
yAxisExt.position = 'right'
|
|
const yAxisExtTmp = parseJson(chart.customStyle).yAxisExt
|
if (yAxisExt.label) {
|
yAxisExt.label.style.textAlign = 'start'
|
yAxisExt.label.formatter = value => {
|
return valueFormatter(value, yAxisExtTmp.axisLabelFormatter)
|
}
|
}
|
const axisExtValue = yAxisExtTmp.axisValue
|
if (!axisExtValue?.auto) {
|
tempOption.yAxis.valueExt = {
|
...yAxisExt,
|
min: axisExtValue.min,
|
max: axisExtValue.max,
|
minLimit: axisExtValue.min,
|
maxLimit: axisExtValue.max,
|
tickCount: axisExtValue.splitCount
|
}
|
} else {
|
tempOption.yAxis.valueExt = yAxisExt
|
}
|
}
|
|
return tempOption
|
}
|
|
protected configTooltip(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
|
const tooltipAttr = customAttr.tooltip
|
if (!tooltipAttr.show) {
|
return {
|
...options,
|
tooltip: false
|
}
|
}
|
const formatterMap = tooltipAttr.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
const tooltip: DualAxesOptions['tooltip'] = {
|
shared: true,
|
showTitle: true,
|
customItems(originalItems) {
|
if (!tooltipAttr.seriesTooltipFormatter?.length) {
|
return originalItems
|
}
|
const head = originalItems[0]
|
// 非原始数据
|
if (!head.data.quotaList) {
|
return originalItems
|
}
|
const result = []
|
originalItems
|
.filter(item => formatterMap[item.data.quotaList[0].id])
|
.forEach(item => {
|
const formatter = formatterMap[item.data.quotaList[0].id]
|
const value = valueFormatter(parseFloat(item.value as string), formatter.formatterCfg)
|
const name = item.data.category
|
|
result.push({ ...item, name, value })
|
})
|
head.data.dynamicTooltipValue?.forEach(item => {
|
const formatter = formatterMap[item.fieldId]
|
if (formatter) {
|
const value = valueFormatter(parseFloat(item.value), formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ color: 'grey', name, value })
|
}
|
})
|
return result
|
},
|
container: getTooltipContainer(`tooltip-${chart.id}`),
|
itemTpl: TOOLTIP_TPL,
|
enterable: true
|
}
|
return {
|
...options,
|
tooltip
|
}
|
}
|
|
protected configLegend(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const o = super.configLegend(chart, options)
|
if (o.legend) {
|
const left = cloneDeep(chart.data?.left?.data)
|
const right = cloneDeep(chart.data?.right?.data)
|
|
o.legend.itemName.formatter = (text: string, item: any, index: number) => {
|
let name = undefined
|
if (item.viewId === 'left-axes-view' && text === 'value') {
|
name = left[0]?.categories[0]
|
} else if (item.viewId === 'right-axes-view' && text === 'valueExt') {
|
name = right[0]?.categories[0]
|
}
|
item.id = item.id + '__' + index //防止重复的图例出现问题，但是左右轴如果有相同的怎么办
|
if (name === undefined) {
|
return text
|
} else {
|
return name
|
}
|
}
|
|
const customStyle = parseJson(chart.customStyle)
|
let size
|
if (customStyle && customStyle.legend) {
|
size = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE).size
|
} else {
|
size = DEFAULT_LEGEND_STYLE.size
|
}
|
|
o.legend.marker.style = style => {
|
const fill = style.fill ?? style.stroke
|
return {
|
r: size,
|
fill
|
}
|
}
|
}
|
return o
|
}
|
|
protected configAnalyse(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
chart.data.dynamicAssistLines = union(
|
defaultTo(chart.data?.left?.dynamicAssistLines, []),
|
defaultTo(chart.data?.right?.dynamicAssistLines, [])
|
)
|
const list = getAnalyse(chart)
|
const annotations = {
|
value: filter(list, l => l.yAxisType === 'left'),
|
valueExt: filter(list, l => l.yAxisType === 'right')
|
}
|
return { ...options, annotations }
|
}
|
|
protected setupOptions(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
return flow(
|
this.configTheme,
|
this.configLabel,
|
this.configTooltip,
|
this.configBasicStyle,
|
this.configCustomColors,
|
this.configSubCustomColors,
|
this.configLegend,
|
this.configXAxis,
|
this.configYAxis,
|
this.configAnalyse,
|
this.configEmptyDataStrategy
|
)(chart, options, {}, this)
|
}
|
|
constructor(name = 'chart-mix') {
|
super(name, DEFAULT_DATA)
|
}
|
}
|
|
export class GroupColumnLineMix extends ColumnLineMix {
|
axis: AxisType[] = [...this['axis'], 'xAxisExt']
|
propertyInner = {
|
...CHART_MIX_EDITOR_PROPERTY_INNER,
|
'label-selector': ['vPosition', 'seriesLabelFormatter'],
|
'tooltip-selector': [
|
...CHART_MIX_EDITOR_PROPERTY_INNER['tooltip-selector'],
|
'seriesTooltipFormatter',
|
'carousel'
|
]
|
}
|
axisConfig = {
|
...this['axisConfig'],
|
xAxisExt: {
|
name: `${t('chart.chart_group')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
}
|
}
|
|
protected configCustomColors(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempOption = {
|
...options
|
}
|
const basicStyle = parseJson(chart.customAttr).basicStyle as MixChartBasicStyle
|
|
const { seriesColor } = basicStyle
|
if (seriesColor?.length) {
|
const seriesMap = seriesColor.reduce((p, n) => {
|
p[n.id] = n
|
return p
|
}, {})
|
const { yAxis, xAxisExt } = chart
|
const { data } = options as unknown as Options
|
if (xAxisExt?.length) {
|
const seriesSet = new Set()
|
data[0]?.forEach(d => d.category !== null && seriesSet.add(d.category))
|
const tmp = [...seriesSet]
|
tmp.forEach((c, i) => {
|
const curAxisColor = seriesMap[c as string]
|
if (curAxisColor) {
|
if (i + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[i] = curAxisColor.color
|
}
|
}
|
})
|
} else {
|
yAxis?.forEach((axis, index) => {
|
const curAxisColor = seriesMap[axis.id]
|
if (curAxisColor) {
|
if (index + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[index] = curAxisColor.color
|
}
|
}
|
})
|
}
|
}
|
//左轴
|
const color = basicStyle.colors.map(ele => {
|
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
return setGradientColor(tmp, true, 270)
|
} else {
|
return tmp
|
}
|
})
|
tempOption.geometryOptions[0].color = color
|
|
return tempOption
|
}
|
|
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
|
const result: ChartBasicStyle['seriesColor'] = []
|
const seriesSet = new Set<string>()
|
const colors = chart.customAttr.basicStyle.colors
|
const { yAxis, xAxisExt } = chart
|
if (xAxisExt?.length) {
|
data?.forEach(d => {
|
if (d.value === null || d.category === null || seriesSet.has(d.category)) {
|
return
|
}
|
seriesSet.add(d.category)
|
result.push({
|
id: d.category,
|
name: d.category,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
} else {
|
yAxis?.forEach(axis => {
|
if (seriesSet.has(axis.id)) {
|
return
|
}
|
seriesSet.add(axis.id)
|
result.push({
|
id: axis.id,
|
name: axis.chartShowName ?? axis.name,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
}
|
return result
|
}
|
|
constructor(name = 'chart-mix-group') {
|
super(name)
|
}
|
}
|
export class StackColumnLineMix extends ColumnLineMix {
|
axis: AxisType[] = [...this['axis'], 'extStack']
|
propertyInner = {
|
...CHART_MIX_EDITOR_PROPERTY_INNER,
|
'label-selector': ['vPosition', 'seriesLabelFormatter'],
|
'tooltip-selector': [
|
...CHART_MIX_EDITOR_PROPERTY_INNER['tooltip-selector'],
|
'seriesTooltipFormatter',
|
'carousel'
|
]
|
}
|
axisConfig = {
|
...this['axisConfig'],
|
extStack: {
|
name: `${t('chart.stack_item')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
}
|
}
|
|
protected configCustomColors(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempOption = {
|
...options
|
}
|
const basicStyle = parseJson(chart.customAttr).basicStyle as MixChartBasicStyle
|
|
const { seriesColor } = basicStyle
|
if (seriesColor?.length) {
|
const seriesMap = seriesColor.reduce((p, n) => {
|
p[n.id] = n
|
return p
|
}, {})
|
const { yAxis, extStack } = chart
|
const { data } = options as unknown as Options
|
if (extStack?.length) {
|
const seriesSet = new Set()
|
data[0]?.forEach(d => d.category !== null && seriesSet.add(d.category))
|
const tmp = [...seriesSet]
|
tmp.forEach((c, i) => {
|
const curAxisColor = seriesMap[c as string]
|
if (curAxisColor) {
|
if (i + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[i] = curAxisColor.color
|
}
|
}
|
})
|
} else {
|
yAxis?.forEach((axis, index) => {
|
const curAxisColor = seriesMap[axis.id]
|
if (curAxisColor) {
|
if (index + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[index] = curAxisColor.color
|
}
|
}
|
})
|
}
|
}
|
//左轴
|
const color = basicStyle.colors.map(ele => {
|
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
return setGradientColor(tmp, true, 270)
|
} else {
|
return tmp
|
}
|
})
|
tempOption.geometryOptions[0].color = color
|
|
return tempOption
|
}
|
|
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
|
const result: ChartBasicStyle['seriesColor'] = []
|
const seriesSet = new Set<string>()
|
const colors = chart.customAttr.basicStyle.colors
|
const { yAxis, extStack } = chart
|
if (extStack?.length) {
|
data?.forEach(d => {
|
if (d.value === null || d.category === null || seriesSet.has(d.category)) {
|
return
|
}
|
seriesSet.add(d.category)
|
result.push({
|
id: d.category,
|
name: d.category,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
} else {
|
yAxis?.forEach(axis => {
|
if (seriesSet.has(axis.id)) {
|
return
|
}
|
seriesSet.add(axis.id)
|
result.push({
|
id: axis.id,
|
name: axis.chartShowName ?? axis.name,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
}
|
return result
|
}
|
|
constructor(name = 'chart-mix-stack') {
|
super(name)
|
}
|
}
|
|
export class DualLineMix extends ColumnLineMix {
|
axis: AxisType[] = [...this['axis'], 'xAxisExt']
|
propertyInner = {
|
...CHART_MIX_EDITOR_PROPERTY_INNER,
|
'label-selector': ['seriesLabelFormatter'],
|
'tooltip-selector': [
|
...CHART_MIX_EDITOR_PROPERTY_INNER['tooltip-selector'],
|
'seriesTooltipFormatter',
|
'carousel'
|
]
|
}
|
axisConfig = {
|
...this['axisConfig'],
|
xAxisExt: {
|
name: `${t('chart.drag_block_type_axis_left')} / ${t('chart.dimension')}`,
|
type: 'd',
|
limit: 1,
|
allowEmpty: true
|
}
|
}
|
|
protected getLeftType(): string {
|
return 'line'
|
}
|
|
protected configCustomColors(chart: Chart, options: DualAxesOptions): DualAxesOptions {
|
const tempOption = {
|
...options
|
}
|
const basicStyle = parseJson(chart.customAttr).basicStyle as MixChartBasicStyle
|
|
const { seriesColor } = basicStyle
|
if (seriesColor?.length) {
|
const seriesMap = seriesColor.reduce((p, n) => {
|
p[n.id] = n
|
return p
|
}, {})
|
const { yAxis, xAxisExt } = chart
|
const { data } = options as unknown as Options
|
if (xAxisExt?.length) {
|
const seriesSet = new Set()
|
data[0]?.forEach(d => d.category !== null && seriesSet.add(d.category))
|
const tmp = [...seriesSet]
|
tmp.forEach((c, i) => {
|
const curAxisColor = seriesMap[c as string]
|
if (curAxisColor) {
|
if (i + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[i] = curAxisColor.color
|
}
|
}
|
})
|
} else {
|
yAxis?.forEach((axis, index) => {
|
const curAxisColor = seriesMap[axis.id]
|
if (curAxisColor) {
|
if (index + 1 > basicStyle.colors.length) {
|
basicStyle.colors.push(curAxisColor.color)
|
} else {
|
basicStyle.colors[index] = curAxisColor.color
|
}
|
}
|
})
|
}
|
}
|
//左轴
|
const color = basicStyle.colors.map(ele => {
|
const tmp = hexColorToRGBA(ele, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
return setGradientColor(tmp, true, 270)
|
} else {
|
return tmp
|
}
|
})
|
tempOption.geometryOptions[0].color = color
|
|
return tempOption
|
}
|
|
public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] {
|
const result: ChartBasicStyle['seriesColor'] = []
|
const seriesSet = new Set<string>()
|
const colors = chart.customAttr.basicStyle.colors
|
const { yAxis, xAxisExt } = chart
|
if (xAxisExt?.length) {
|
data?.forEach(d => {
|
if (d.value === null || d.category === null || seriesSet.has(d.category)) {
|
return
|
}
|
seriesSet.add(d.category)
|
result.push({
|
id: d.category,
|
name: d.category,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
} else {
|
yAxis?.forEach(axis => {
|
if (seriesSet.has(axis.id)) {
|
return
|
}
|
seriesSet.add(axis.id)
|
result.push({
|
id: axis.id,
|
name: axis.chartShowName ?? axis.name,
|
color: colors[(seriesSet.size - 1) % colors.length]
|
})
|
})
|
}
|
return result
|
}
|
|
constructor(name = 'chart-mix-dual-line') {
|
super(name)
|
}
|
}
|
