import { hexColorToRGBA, hexToRgba, measureText, parseJson } from '../../util'
|
import {
|
DEFAULT_BASIC_STYLE,
|
DEFAULT_LEGEND_STYLE,
|
DEFAULT_XAXIS_STYLE,
|
DEFAULT_YAXIS_EXT_STYLE,
|
DEFAULT_YAXIS_STYLE
|
} from '@/views/chart/components/editor/util/chart'
|
import { valueFormatter } from '@/views/chart/components/js/formatter'
|
import { AreaOptions, LabelOptions } from '@antv/l7plot'
|
import { TooltipOptions } from '@antv/l7plot/dist/lib/types/tooltip'
|
import { FeatureCollection } from '@antv/l7plot/dist/esm/plots/choropleth/types'
|
import { Datum } from '@antv/g2plot/esm/types/common'
|
import { Tooltip } from '@antv/g2plot/esm'
|
import { add } from 'mathjs'
|
import isEmpty from 'lodash-es/isEmpty'
|
import _ from 'lodash'
|
import type { LegendOptions } from '@antv/l7plot/dist/esm/types/legend'
|
import { CategoryLegendListItem } from '@antv/l7plot-component/dist/lib/types/legend'
|
import createDom from '@antv/dom-util/esm/create-dom'
|
import {
|
CONTAINER_TPL,
|
ITEM_TPL,
|
LIST_CLASS
|
} from '@antv/l7plot-component/dist/esm/legend/category/constants'
|
import substitute from '@antv/util/esm/substitute'
|
import type { Plot as L7Plot, PlotOptions } from '@antv/l7plot/dist/esm'
|
import { Zoom } from '@antv/l7'
|
import { DOM } from '@antv/l7-utils'
|
import { Scene } from '@antv/l7-scene'
|
import { type IZoomControlOption } from '@antv/l7-component'
|
import { PositionType } from '@antv/l7-core'
|
import { centroid } from '@turf/centroid'
|
import type { Plot } from '@antv/g2plot'
|
import type { PickOptions } from '@antv/g2plot/lib/core/plot'
|
import { defaults, find } from 'lodash-es'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { isMobile } from '@/utils/utils'
|
import { GaodeMap, TMap, TencentMap } from '@antv/l7-maps'
|
import {
|
gaodeMapStyleOptions,
|
qqMapStyleOptions,
|
tdtMapStyleOptions
|
} from '@/views/chart/components/js/panel/charts/map/common'
|
import ChartCarouselTooltip, {
|
isPie,
|
isColumn,
|
isMix,
|
isSupport
|
} from '@/views/chart/components/js/g2plot_tooltip_carousel'
|
|
const { t: tI18n } = useI18n()
|
|
export function getPadding(chart: Chart): number[] {
|
if (chart.drill) {
|
return [0, 10, 22, 10]
|
} else {
|
return [0, 10, 10, 10]
|
}
|
}
|
// color,label,tooltip,axis,legend,background
|
export function getTheme(chart: Chart) {
|
const colors = []
|
let bgColor,
|
labelFontsize,
|
labelColor,
|
tooltipColor,
|
tooltipFontsize,
|
tooltipBackgroundColor,
|
legendColor,
|
legendFontsize
|
let customAttr: DeepPartial<ChartAttr>
|
if (chart.customAttr) {
|
customAttr = parseJson(chart.customAttr)
|
// color
|
if (customAttr.basicStyle) {
|
const b = JSON.parse(JSON.stringify(customAttr.basicStyle))
|
b.colors.forEach(ele => {
|
colors.push(hexColorToRGBA(ele, b.alpha))
|
})
|
}
|
// label
|
if (customAttr.label) {
|
const l = JSON.parse(JSON.stringify(customAttr.label))
|
labelFontsize = l.fontSize
|
labelColor = l.color
|
}
|
// tooltip
|
if (customAttr.tooltip) {
|
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
|
tooltipColor = t.color
|
tooltipFontsize = t.fontSize
|
tooltipBackgroundColor = t.backgroundColor
|
}
|
}
|
|
let customStyle: DeepPartial<ChartStyle>
|
if (chart.customStyle) {
|
customStyle = parseJson(chart.customStyle)
|
// bg
|
if (customStyle.background) {
|
bgColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
}
|
// legend
|
if (customStyle.legend) {
|
const l = customStyle.legend
|
legendColor = l.color
|
legendFontsize = l.fontSize
|
}
|
}
|
|
const theme = {
|
styleSheet: {
|
brandColor: colors[0],
|
paletteQualitative10: colors,
|
paletteQualitative20: colors,
|
backgroundColor: bgColor
|
},
|
labels: {
|
offset: 4,
|
style: {
|
fill: labelColor,
|
fontSize: labelFontsize
|
}
|
},
|
innerLabels: {
|
offset: 4,
|
style: {
|
fill: labelColor,
|
fontSize: labelFontsize
|
}
|
},
|
pieLabels: {
|
offset: 4,
|
style: {
|
fill: labelColor,
|
fontSize: labelFontsize
|
}
|
},
|
components: {
|
tooltip: {
|
domStyles: {
|
'g2-tooltip': {
|
color: tooltipColor,
|
fontSize: tooltipFontsize + 'px',
|
background: tooltipBackgroundColor,
|
boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.1)',
|
'z-index': 2000,
|
position: 'fixed'
|
},
|
'g2-tooltip-list-item': {
|
display: 'flex',
|
'align-items': 'flex-start',
|
'justify-content': 'space-between',
|
'line-height': tooltipFontsize + 'px'
|
},
|
'g2-tooltip-name': {
|
display: 'inline-block',
|
'line-height': tooltipFontsize + 'px'
|
},
|
'g2-tooltip-value': {
|
flex: 1,
|
display: 'inline-block',
|
'text-align': 'end',
|
'line-height': tooltipFontsize + 'px'
|
},
|
'g2-tooltip-marker': {
|
'margin-top': (tooltipFontsize - 8) / 2 + 'px',
|
'min-width': '8px',
|
'min-height': '8px'
|
}
|
}
|
},
|
legend: {
|
common: {
|
itemName: {
|
style: {
|
fill: legendColor,
|
fontSize: legendFontsize
|
}
|
}
|
}
|
}
|
}
|
}
|
if (chart.fontFamily) {
|
theme.styleSheet.fontFamily = chart.fontFamily
|
}
|
return theme
|
}
|
// 通用label
|
export function getLabel(chart: Chart) {
|
let label
|
let customAttr: DeepPartial<ChartAttr>
|
if (chart.customAttr) {
|
customAttr = parseJson(chart.customAttr)
|
// label
|
if (customAttr.label) {
|
const l = customAttr.label
|
if (l.show) {
|
const layout = []
|
if (!l.fullDisplay) {
|
if (chart.type === 'bar-stack') {
|
layout.push({ type: 'interval-hide-overlap' })
|
} else if (
|
chart.type.indexOf('-horizontal') > -1 ||
|
[
|
'bidirectional-bar',
|
'progress-bar',
|
'pie-donut',
|
'radar',
|
'waterfall',
|
't-heatmap',
|
'bar'
|
].includes(chart.type)
|
) {
|
layout.push({ type: 'limit-in-canvas' })
|
layout.push({ type: 'hide-overlap' })
|
} else if (chart.type.includes('chart-mix')) {
|
layout.push({ type: 'limit-in-canvas' })
|
layout.push({ type: 'limit-in-plot' })
|
layout.push({ type: 'hide-overlap' })
|
} else {
|
layout.push({ type: 'limit-in-plot' })
|
layout.push({ type: 'hide-overlap' })
|
}
|
}
|
label = {
|
position: l.position,
|
layout,
|
style: {
|
fill: l.color,
|
fontSize: l.fontSize,
|
fontFamily: chart.fontFamily
|
},
|
formatter: function (param: Datum) {
|
return valueFormatter(param.value, l.labelFormatter)
|
}
|
}
|
} else {
|
label = false
|
}
|
}
|
}
|
return label
|
}
|
// 通用tooltip
|
export function getTooltip(chart: Chart) {
|
let tooltip
|
let customAttr: DeepPartial<ChartAttr>
|
if (chart.customAttr) {
|
customAttr = parseJson(chart.customAttr)
|
// tooltip
|
if (customAttr.tooltip) {
|
const t = JSON.parse(JSON.stringify(customAttr.tooltip))
|
if (t.show) {
|
tooltip = {
|
formatter: function (param: Datum) {
|
const value = valueFormatter(param.value, t.tooltipFormatter)
|
return { name: param.field, value }
|
},
|
container: getTooltipContainer(`tooltip-${chart.id}`),
|
itemTpl: TOOLTIP_TPL,
|
enterable: true
|
}
|
} else {
|
tooltip = false
|
}
|
}
|
}
|
return tooltip
|
}
|
|
export function getMultiSeriesTooltip(chart: Chart) {
|
const customAttr: DeepPartial<ChartAttr> = parseJson(chart.customAttr)
|
const tooltipAttr = customAttr.tooltip
|
if (!tooltipAttr.show) {
|
return false
|
}
|
const formatterMap = tooltipAttr.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
const tooltip: Tooltip = {
|
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 = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
const color = getTooltipItemConditionColor(item)
|
result.push({ ...item, name, value, ...(color ? { color } : {}) })
|
})
|
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 tooltip
|
}
|
// 通用legend
|
export function getLegend(chart: Chart) {
|
let legend = {}
|
let customStyle: CustomStyle
|
if (chart.customStyle) {
|
customStyle = parseJson(chart.customStyle)
|
// legend
|
if (customStyle.legend) {
|
const l = defaults(JSON.parse(JSON.stringify(customStyle.legend)), DEFAULT_LEGEND_STYLE)
|
if (l.show) {
|
let offsetX, offsetY, position
|
const orient = l.orient
|
const legendSymbol = l.icon
|
// fix position
|
if (l.hPosition === 'center') {
|
position = l.vPosition === 'center' ? 'top' : l.vPosition
|
} else if (l.vPosition === 'center') {
|
position = l.hPosition === 'center' ? 'left' : l.hPosition
|
} else {
|
if (orient === 'horizontal') {
|
position = l.vPosition + '-' + l.hPosition
|
} else {
|
position = l.hPosition + '-' + l.vPosition
|
}
|
}
|
// fix offset
|
if (orient === 'horizontal') {
|
if (l.hPosition === 'left') {
|
offsetX = 16
|
} else if (l.hPosition === 'right') {
|
offsetX = -16
|
} else {
|
offsetX = 0
|
}
|
if (l.vPosition === 'top') {
|
offsetY = 0
|
} else if (l.vPosition === 'bottom') {
|
if (chart.drill) {
|
offsetY = -12
|
}
|
} else {
|
offsetY = 0
|
}
|
} else {
|
if (l.hPosition === 'left') {
|
offsetX = 10
|
} else if (l.hPosition === 'right') {
|
offsetX = -10
|
} else {
|
offsetX = 0
|
}
|
if (l.vPosition === 'top') {
|
offsetY = 0
|
} else if (l.vPosition === 'bottom') {
|
if (chart.drill) {
|
offsetY = -18
|
} else {
|
offsetY = -10
|
}
|
} else {
|
offsetY = 0
|
}
|
}
|
|
legend = {
|
layout: orient,
|
position: position,
|
offsetX: offsetX,
|
offsetY: offsetY,
|
marker: {
|
symbol: legendSymbol,
|
style: {
|
r: l.size
|
}
|
},
|
itemName: {
|
style: {
|
fill: l.color,
|
fontSize: l.fontSize
|
}
|
},
|
itemHeight: (l.fontSize > l.size * 2 ? l.fontSize : l.size * 2) + 4,
|
radio: false,
|
pageNavigator: {
|
marker: {
|
style: {
|
fill: 'rgba(0,0,0,0.65)',
|
stroke: 'rgba(192,192,192,0.52)',
|
size: l.size * 2
|
}
|
},
|
text: {
|
style: {
|
fill: l.color,
|
fontSize: l.fontSize
|
}
|
}
|
}
|
}
|
} else {
|
legend = false
|
}
|
}
|
}
|
return legend
|
}
|
// xAxis
|
export function getXAxis(chart: Chart) {
|
let axis: Record<string, any> | boolean = {}
|
let customStyle: CustomStyle
|
if (chart.customStyle) {
|
customStyle = parseJson(chart.customStyle)
|
// legend
|
if (customStyle.xAxis) {
|
const a = JSON.parse(JSON.stringify(customStyle.xAxis))
|
if (a.show) {
|
const title =
|
a.nameShow && a.name && a.name !== ''
|
? {
|
text: a.name,
|
style: {
|
fill: a.color,
|
fontSize: a.fontSize
|
},
|
spacing: 8
|
}
|
: null
|
const grid = a.splitLine.show
|
? {
|
line: {
|
style: {
|
stroke: a.splitLine.lineStyle.color,
|
lineWidth: a.splitLine.lineStyle.width,
|
lineDash: getLineDash(a.splitLine.lineStyle.style)
|
}
|
}
|
}
|
: null
|
const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine
|
const line = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width,
|
lineDash: getLineDash(axisCfg.lineStyle.style)
|
}
|
}
|
: null
|
const tickLine = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width
|
}
|
}
|
: null
|
let textAlign = 'center'
|
const rotate = a.axisLabel.rotate
|
if (a.position === 'top') {
|
textAlign = rotate > 20 ? 'end' : rotate < -20 ? 'start' : 'center'
|
}
|
if (a.position === 'bottom') {
|
textAlign = rotate > 20 ? 'start' : rotate < -20 ? 'end' : 'center'
|
}
|
const label = a.axisLabel.show
|
? {
|
rotate: (rotate * Math.PI) / 180,
|
style: {
|
fill: a.axisLabel.color,
|
fontSize: a.axisLabel.fontSize,
|
textAlign: textAlign,
|
fontFamily: chart.fontFamily
|
}
|
}
|
: null
|
|
axis = {
|
position: a.position,
|
title,
|
grid,
|
label,
|
line,
|
tickLine
|
}
|
} else {
|
axis = false
|
}
|
}
|
}
|
return axis
|
}
|
// yAxis
|
export function getYAxis(chart: Chart) {
|
let axis: Record<string, any> | boolean = {}
|
const yAxis = parseJson(chart.customStyle).yAxis
|
if (!yAxis.show) {
|
return false
|
}
|
const title =
|
yAxis.nameShow && yAxis.name && yAxis.name !== ''
|
? {
|
text: yAxis.name,
|
style: {
|
fill: yAxis.color,
|
fontSize: yAxis.fontSize
|
},
|
spacing: 8
|
}
|
: null
|
const grid = yAxis.splitLine.show
|
? {
|
line: {
|
style: {
|
stroke: yAxis.splitLine.lineStyle.color,
|
lineWidth: yAxis.splitLine.lineStyle.width,
|
lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
|
}
|
}
|
}
|
: null
|
const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
|
const line = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width,
|
lineDash: getLineDash(axisCfg.lineStyle.style)
|
}
|
}
|
: null
|
const tickLine = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width
|
}
|
}
|
: null
|
const rotate = yAxis.axisLabel.rotate
|
let textAlign = 'end'
|
let textBaseline = 'middle'
|
if (yAxis.position === 'right') {
|
textAlign = 'start'
|
if (Math.abs(rotate) > 75) {
|
textAlign = 'center'
|
}
|
if (rotate > 75) {
|
textBaseline = 'bottom'
|
}
|
if (rotate < -75) {
|
textBaseline = 'top'
|
}
|
}
|
if (yAxis.position === 'left') {
|
if (Math.abs(rotate) > 75) {
|
textAlign = 'center'
|
}
|
if (rotate > 75) {
|
textBaseline = 'top'
|
}
|
if (rotate < -75) {
|
textBaseline = 'bottom'
|
}
|
}
|
const label = yAxis.axisLabel.show
|
? {
|
rotate: (rotate * Math.PI) / 180,
|
style: {
|
fill: yAxis.axisLabel.color,
|
fontSize: yAxis.axisLabel.fontSize,
|
textBaseline,
|
textAlign,
|
fontFamily: chart.fontFamily
|
},
|
formatter: value => {
|
return value.length > yAxis.axisLabel.lengthLimit
|
? value.substring(0, yAxis.axisLabel.lengthLimit) + '...'
|
: value
|
}
|
}
|
: null
|
|
axis = {
|
position: yAxis.position,
|
title,
|
grid,
|
label,
|
line,
|
tickLine,
|
nice: true
|
}
|
return axis
|
}
|
|
export function getYAxisExt(chart: Chart) {
|
let axis: Record<string, any> | boolean = {}
|
const yAxis = parseJson(chart.customStyle).yAxisExt
|
if (!yAxis.show) {
|
return false
|
}
|
const title =
|
yAxis.nameShow && yAxis.name && yAxis.name !== ''
|
? {
|
text: yAxis.name,
|
style: {
|
fill: yAxis.color,
|
fontSize: yAxis.fontSize
|
},
|
spacing: 8
|
}
|
: null
|
const grid = yAxis.splitLine.show
|
? {
|
line: {
|
style: {
|
stroke: yAxis.splitLine.lineStyle.color,
|
lineWidth: yAxis.splitLine.lineStyle.width,
|
lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
|
}
|
}
|
}
|
: null
|
const axisCfg = yAxis.axisLine ? yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine
|
const line = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width,
|
lineDash: getLineDash(axisCfg.lineStyle.style)
|
}
|
}
|
: null
|
const tickLine = axisCfg.show
|
? {
|
style: {
|
stroke: axisCfg.lineStyle.color,
|
lineWidth: axisCfg.lineStyle.width
|
}
|
}
|
: null
|
const rotate = yAxis.axisLabel.rotate
|
let textAlign = 'end'
|
let textBaseline = 'middle'
|
if (yAxis.position === 'right') {
|
textAlign = 'start'
|
if (Math.abs(rotate) > 75) {
|
textAlign = 'center'
|
}
|
if (rotate > 75) {
|
textBaseline = 'bottom'
|
}
|
if (rotate < -75) {
|
textBaseline = 'top'
|
}
|
}
|
if (yAxis.position === 'left') {
|
if (Math.abs(rotate) > 75) {
|
textAlign = 'center'
|
}
|
if (rotate > 75) {
|
textBaseline = 'top'
|
}
|
if (rotate < -75) {
|
textBaseline = 'bottom'
|
}
|
}
|
const label = yAxis.axisLabel.show
|
? {
|
rotate: (rotate * Math.PI) / 180,
|
style: {
|
fill: yAxis.axisLabel.color,
|
fontSize: yAxis.axisLabel.fontSize,
|
textBaseline,
|
textAlign,
|
fontFamily: chart.fontFamily
|
}
|
}
|
: null
|
|
axis = {
|
position: yAxis.position,
|
title,
|
grid,
|
label,
|
line,
|
tickLine,
|
nice: true
|
}
|
return axis
|
}
|
|
export function getSlider(chart: Chart) {
|
let cfg
|
const senior = parseJson(chart.senior)
|
if (senior.functionCfg) {
|
if (senior.functionCfg.sliderShow) {
|
cfg = {
|
start: senior.functionCfg.sliderRange[0] / 100,
|
end: senior.functionCfg.sliderRange[1] / 100
|
}
|
|
if (senior.functionCfg.sliderBg) {
|
cfg.backgroundStyle = {
|
fill: senior.functionCfg.sliderBg,
|
stroke: senior.functionCfg.sliderBg,
|
lineWidth: 1,
|
strokeOpacity: 0.5
|
}
|
}
|
if (senior.functionCfg.sliderFillBg) {
|
cfg.foregroundStyle = {
|
fill: senior.functionCfg.sliderFillBg,
|
fillOpacity: 0.5
|
}
|
}
|
if (senior.functionCfg.sliderTextColor) {
|
cfg.textStyle = {
|
fill: senior.functionCfg.sliderTextColor,
|
fontFamily: chart.fontFamily
|
}
|
cfg.handlerStyle = {
|
fill: senior.functionCfg.sliderTextColor,
|
fillOpacity: 0.5,
|
highLightFill: senior.functionCfg.sliderTextColor
|
}
|
}
|
}
|
}
|
return cfg
|
}
|
|
export function getAnalyse(chart: Chart) {
|
const assistLine = []
|
const senior = parseJson(chart.senior)
|
if (!senior.assistLineCfg?.enable) {
|
return assistLine
|
}
|
const assistLineArr = senior.assistLineCfg.assistLine
|
if (assistLineArr?.length > 0) {
|
const customStyle = parseJson(chart.customStyle)
|
let yAxisPosition, axisFormatterCfg, yAxisExtPosition, axisExtFormatterCfg
|
if (customStyle.yAxis) {
|
const a = JSON.parse(JSON.stringify(customStyle.yAxis))
|
yAxisPosition = a.position
|
axisFormatterCfg = a.axisLabelFormatter
|
? a.axisLabelFormatter
|
: DEFAULT_YAXIS_STYLE.axisLabelFormatter
|
}
|
if (customStyle.yAxisExt) {
|
const a = JSON.parse(JSON.stringify(customStyle.yAxisExt))
|
yAxisExtPosition = a.position
|
axisExtFormatterCfg = a.axisLabelFormatter
|
? a.axisLabelFormatter
|
: DEFAULT_YAXIS_EXT_STYLE.axisLabelFormatter
|
}
|
|
const fixedLines = assistLineArr.filter(ele => ele.field === '0')
|
const dynamicLineFields = assistLineArr
|
.filter(ele => ele.field === '1')
|
.map(item => item.fieldId)
|
const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')
|
const quotaExtFields = _.filter(chart.yAxisExt, ele => ele.summary !== '' && ele.id !== '-1')
|
const dynamicLines = chart.data.dynamicAssistLines?.filter(item => {
|
return (
|
dynamicLineFields?.includes(item.fieldId) &&
|
(!!_.find(quotaFields, d => d.id === item.fieldId) ||
|
(!!_.find(quotaExtFields, d => d.id === item.fieldId) &&
|
chart.type.includes('chart-mix')))
|
)
|
})
|
const lines = fixedLines.concat(dynamicLines || [])
|
lines.forEach(ele => {
|
const value = parseFloat(ele.value)
|
const content =
|
ele.name +
|
' : ' +
|
valueFormatter(value, ele.yAxisType === 'left' ? axisFormatterCfg : axisExtFormatterCfg)
|
assistLine.push({
|
type: 'line',
|
yAxisType: ele.yAxisType,
|
start: ['start', value],
|
end: ['end', value],
|
style: {
|
stroke: ele.color,
|
lineDash: getLineDash(ele.lineType)
|
}
|
})
|
assistLine.push({
|
type: 'text',
|
yAxisType: ele.yAxisType,
|
position: [
|
(ele.yAxisType === 'left' ? yAxisPosition : yAxisExtPosition) === 'left'
|
? 'start'
|
: 'end',
|
value
|
],
|
content: content,
|
offsetY: -2,
|
offsetX:
|
(ele.yAxisType === 'left' ? yAxisPosition : yAxisExtPosition) === 'left'
|
? 2
|
: -10 * (content.length - 2),
|
style: {
|
textBaseline: 'bottom',
|
fill: ele.color,
|
fontSize: ele.fontSize ? ele.fontSize : 10
|
}
|
})
|
})
|
}
|
return assistLine
|
}
|
|
export function getAnalyseHorizontal(chart: Chart) {
|
const assistLine = []
|
const senior = parseJson(chart.senior)
|
if (!senior.assistLineCfg?.enable) {
|
return assistLine
|
}
|
const assistLineArr = senior.assistLineCfg.assistLine
|
if (assistLineArr?.length > 0) {
|
const customStyle = parseJson(chart.customStyle)
|
let axisFormatterCfg
|
if (customStyle.xAxis) {
|
const a = JSON.parse(JSON.stringify(customStyle.xAxis))
|
axisFormatterCfg = a.axisLabelFormatter
|
? a.axisLabelFormatter
|
: DEFAULT_XAXIS_STYLE.axisLabelFormatter
|
}
|
|
const fixedLines = assistLineArr.filter(ele => ele.field === '0')
|
const dynamicLineFields = assistLineArr
|
.filter(ele => ele.field === '1')
|
.map(item => item.fieldId)
|
const quotaFields = _.filter(chart.yAxis, ele => ele.summary !== '' && ele.id !== '-1')
|
const dynamicLines = chart.data.dynamicAssistLines?.filter(
|
item =>
|
dynamicLineFields?.includes(item.fieldId) &&
|
!!_.find(quotaFields, d => d.id === item.fieldId)
|
)
|
const lines = fixedLines.concat(dynamicLines || [])
|
|
lines.forEach(ele => {
|
const value = parseFloat(ele.value)
|
const content = ele.name + ' : ' + valueFormatter(value, axisFormatterCfg)
|
assistLine.push({
|
type: 'line',
|
start: ['start', value],
|
end: ['end', value],
|
style: {
|
stroke: ele.color,
|
lineDash: getLineDash(ele.lineType)
|
}
|
})
|
assistLine.push({
|
type: 'text',
|
position: ['start', value],
|
content: content,
|
offsetY: 5,
|
offsetX: 2,
|
rotate: Math.PI / 2,
|
style: {
|
textBaseline: 'bottom',
|
fill: ele.color,
|
fontSize: ele.fontSize ? ele.fontSize : 10
|
}
|
})
|
})
|
}
|
return assistLine
|
}
|
|
export function getLineDash(type) {
|
switch (type) {
|
case 'solid':
|
return [0, 0]
|
case 'dashed':
|
return [10, 8]
|
case 'dotted':
|
return [2, 2]
|
default:
|
return [0, 0]
|
}
|
}
|
|
/**
|
* 将 RGBA 格式的颜色转换成 ANTV 支持的渐变色格式
|
* @param rawColor 原始 RGBA 颜色
|
* @param show
|
* @param angle 渐变角度
|
* @param start 起始值
|
*/
|
export function setGradientColor(rawColor: string, show = false, angle = 0, start = 0) {
|
const item = rawColor.split(',')
|
const alpha = parseFloat(item[3].replace(')', ''))
|
const startAlpha = alpha * 0.3
|
item.splice(3, 1, `${startAlpha})`)
|
let color: string
|
if (start == 0) {
|
color = `l(${angle}) 0:${item.join(',')} 1:${rawColor}`
|
} else if (start > 0) {
|
color = `l(${angle}) 0:rgba(255,255,255,0) ${start}:${item.join(',')} 1:${rawColor}`
|
} else {
|
color = `l(${angle}) 0:rgba(255,255,255,0) 0.1:${item.join(',')} 1:${rawColor}`
|
}
|
return show ? color : rawColor
|
}
|
|
export function transAxisPosition(position: string): string {
|
switch (position) {
|
case 'top':
|
return 'left'
|
case 'bottom':
|
return 'right'
|
case 'left':
|
return 'bottom'
|
case 'right':
|
return 'top'
|
default:
|
return position
|
}
|
}
|
|
export function configL7Label(chart: Chart): false | LabelOptions {
|
const customAttr = parseJson(chart.customAttr)
|
const label = customAttr.label
|
const style = {
|
fill: label.color,
|
fontSize: label.fontSize,
|
textAllowOverlap: true,
|
fontWeight: 'bold'
|
}
|
if (!label.fullDisplay) {
|
style.textAllowOverlap = false
|
style.padding = [2, 2]
|
}
|
if (chart.fontFamily) {
|
style.fontFamily = chart.fontFamily
|
}
|
return {
|
visible: label.show,
|
style
|
}
|
}
|
|
export function configL7Style(chart: Chart): AreaOptions['style'] {
|
const customAttr = parseJson(chart.customAttr)
|
return {
|
stroke: customAttr.basicStyle.areaBorderColor
|
}
|
}
|
|
export function configL7Tooltip(chart: Chart): TooltipOptions {
|
const customAttr = parseJson(chart.customAttr)
|
const tooltip = customAttr.tooltip
|
const formatterMap = tooltip.seriesTooltipFormatter
|
?.filter(i => i.show)
|
.reduce((pre, next) => {
|
pre[next.id] = next
|
return pre
|
}, {}) as Record<string, SeriesFormatter>
|
const container = document.getElementById(chart.container)
|
if (container) {
|
container.addEventListener('mousemove', event => {
|
const rect = container.getBoundingClientRect()
|
const mouseX = event.clientX - rect.left
|
const mouseY = event.clientY - rect.top
|
const tooltipElement = container.getElementsByClassName('l7plot-tooltip-container')
|
for (let i = 0; i < tooltipElement?.length; i++) {
|
const element = tooltipElement[i] as HTMLElement
|
const isNearRightEdge = container.clientWidth - mouseX <= element.clientWidth
|
const isNearBottomEdge = container.clientHeight - mouseY <= element.clientHeight
|
let transform = ''
|
if (isNearRightEdge) {
|
transform += 'translateX(-120%) '
|
}
|
if (isNearBottomEdge) {
|
transform += 'translateY(-100%) '
|
}
|
if (transform) {
|
element.style.transform = transform.trim()
|
}
|
}
|
})
|
}
|
return {
|
customTitle(data) {
|
return data.name
|
},
|
customItems(originalItem) {
|
const result = []
|
if (isEmpty(formatterMap)) {
|
return result
|
}
|
const head = originalItem.properties
|
if (!head) {
|
return result
|
}
|
const formatter = formatterMap[head.quotaList?.[0]?.id]
|
if (!isEmpty(formatter)) {
|
const originValue = parseFloat(head.value as string)
|
const value = valueFormatter(originValue, formatter.formatterCfg)
|
const name = isEmpty(formatter.chartShowName) ? formatter.name : formatter.chartShowName
|
result.push({ ...head, name, value: `${value ?? ''}` })
|
}
|
head.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: `${value ?? ''}` })
|
}
|
})
|
return result
|
},
|
showComponent: tooltip.show,
|
domStyles: {
|
'l7plot-tooltip': {
|
'background-color': tooltip.backgroundColor,
|
'font-size': `${tooltip.fontSize}px`,
|
'line-height': 1.6,
|
'font-family': chart.fontFamily ? chart.fontFamily : undefined
|
},
|
'l7plot-tooltip__name': {
|
color: tooltip.color
|
},
|
'l7plot-tooltip__value': {
|
color: tooltip.color
|
},
|
'l7plot-tooltip__title': {
|
color: tooltip.color
|
}
|
}
|
}
|
}
|
|
export function handleGeoJson(geoJson: FeatureCollection, nameMapping?: Record<string, string>) {
|
geoJson?.features.forEach(item => {
|
if (!item.properties['centroid']) {
|
if (item.properties['center']) {
|
item.properties['centroid'] = item.properties['center']
|
} else {
|
const tmp = centroid(item.geometry)
|
item.properties['centroid'] = tmp.geometry.coordinates
|
}
|
}
|
let name = item.properties['name']
|
if (nameMapping?.[name]) {
|
name = nameMapping[name]
|
item.properties['name'] = name
|
}
|
})
|
}
|
|
export function getTooltipSeriesTotalMap(data: any[]): Record<string, number> {
|
const result = {}
|
data?.forEach(item => {
|
item.dynamicTooltipValue?.forEach(ele => {
|
if (!result[ele.fieldId]) {
|
result[ele.fieldId] = 0
|
}
|
if (ele.value) {
|
result[ele.fieldId] = add(result[ele.fieldId], ele.value)
|
}
|
})
|
})
|
return result
|
}
|
const LEGEND_SHAPE_STYLE_MAP = {
|
circle: {
|
borderRadius: '50%'
|
},
|
square: {},
|
triangle: {
|
borderLeft: '5px solid transparent',
|
borderRight: '5px solid transparent',
|
borderBottom: '10px solid var(--bgColor)',
|
background: 'unset'
|
},
|
diamond: {
|
transform: 'rotate(45deg)'
|
}
|
}
|
export function configL7Legend(chart: Chart): LegendOptions | false {
|
const { basicStyle } = parseJson(chart.customAttr)
|
if (basicStyle.suspension === false && basicStyle.showZoom === undefined) {
|
return false
|
}
|
const { legend } = parseJson(chart.customStyle)
|
if (!legend.show) {
|
return false
|
}
|
return {
|
position: 'bottomleft',
|
customContent: (_: string, items: CategoryLegendListItem[]) => {
|
const showItems = items?.length > 30 ? items.slice(0, 30) : items
|
if (showItems?.length) {
|
const containerDom = createDom(CONTAINER_TPL) as HTMLElement
|
const listDom = containerDom.getElementsByClassName(LIST_CLASS)[0] as HTMLElement
|
showItems.forEach(item => {
|
let value = '-'
|
if (item.value !== '') {
|
if (Array.isArray(item.value)) {
|
item.value.forEach((v, i) => {
|
item.value[i] = Number.isNaN(v) || v === 'NaN' ? 'NaN' : parseFloat(v).toFixed(0)
|
})
|
value = item.value.join('-')
|
} else {
|
const tmp = item.value as string
|
value = Number.isNaN(tmp) || tmp === 'NaN' ? 'NaN' : parseFloat(tmp).toFixed(0)
|
}
|
}
|
const substituteObj = { ...item, value }
|
|
const domStr = substitute(ITEM_TPL, substituteObj)
|
const itemDom = createDom(domStr)
|
// 给 legend 形状用的
|
itemDom.style.setProperty('--bgColor', item.color)
|
listDom.appendChild(itemDom)
|
})
|
return listDom
|
}
|
return ''
|
},
|
domStyles: {
|
'l7plot-legend__category-value': {
|
fontSize: legend.fontSize + 'px',
|
color: legend.color
|
},
|
'l7plot-legend__category-marker': {
|
...LEGEND_SHAPE_STYLE_MAP[legend.icon]
|
}
|
}
|
}
|
}
|
const ZOOM_IN_BTN =
|
'<svg t="1717484429999" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9332" width="14px" height="14px"><path d="M47.653 439.326c-24.501 0-44.368 19.881-44.368 44.4v56.548c0 24.492 19.862 44.4 44.368 44.4h928.694c24.501 0 44.368-19.881 44.368-44.4v-56.548c0-24.497-19.862-44.4-44.368-44.4H47.653z" p-id="9333"></path><path d="M586.326 47.653c0-24.501-19.881-44.368-44.4-44.368h-56.548c-24.492 0-44.4 19.862-44.4 44.368v928.694c0 24.501 19.881 44.368 44.4 44.368h56.548c24.497 0 44.4-19.862 44.4-44.368V47.653z" p-id="9334"></path></svg>'
|
const RESET_BTN =
|
'<svg t="1717487786436" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18361" width="14px" height="14px"><path d="M127.594667 503.274667a383.573333 383.573333 0 0 1 112.426666-263.04 380.864 380.864 0 0 1 122.24-82.474667 382.421333 382.421333 0 0 1 149.632-30.165333c51.946667 0 102.250667 10.176 149.504 30.165333a381.610667 381.610667 0 0 1 122.133334 82.474667 385.152 385.152 0 0 1 31.082666 35.093333l-67.285333 52.501333a8.96 8.96 0 0 0 3.349333 15.765334l196.352 48.042666a8.96 8.96 0 0 0 11.050667-8.597333l0.896-202.154667c0-7.466667-8.597333-11.733333-14.421333-7.04l-63.018667 49.28C795.605333 113.173333 661.973333 42.666667 511.786667 42.666667 255.786667 42.666667 47.488 247.829333 42.666667 502.826667a8.96 8.96 0 0 0 8.96 9.173333h67.029333c4.906667 0 8.832-3.925333 8.96-8.725333z m844.8 8.725333h-67.050667a8.917333 8.917333 0 0 0-8.96 8.704 381.76 381.76 0 0 1-30.037333 140.8 382.336 382.336 0 0 1-82.346667 122.24 382.656 382.656 0 0 1-271.893333 112.64 382.421333 382.421333 0 0 1-271.765334-112.64 385.152 385.152 0 0 1-31.061333-35.072l67.264-52.522667a8.96 8.96 0 0 0-3.349333-15.765333l-196.330667-48.042667a8.96 8.96 0 0 0-11.050667 8.597334l-0.789333 202.261333c0 7.488 8.597333 11.733333 14.421333 7.04l63.018667-49.28C228.394667 910.826667 362.026667 981.333333 512.213333 981.333333 768.341333 981.333333 976.512 776.042667 981.333333 521.173333a8.96 8.96 0 0 0-8.96-9.173333z" p-id="18362"></path></svg>'
|
const ZOOM_OUT_BTN =
|
'<svg t="1717486240292" fill="${fill}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13641" width="14px" height="14px"><path d="M935 423.3H89C40.2 423.3 0.3 463.2 0.3 512c0 48.8 39.9 88.7 88.7 88.7h846c48.8 0 88.7-39.9 88.7-88.7 0-48.8-39.9-88.7-88.7-88.7z" p-id="13642"></path></svg>'
|
export class CustomZoom extends Zoom {
|
resetButtonGroup(container) {
|
DOM.clearChildren(container)
|
this['zoomInButton'] = this['createButton'](
|
this.controlOption.zoomInText,
|
this.controlOption.zoomInTitle,
|
'l7-button-control',
|
container,
|
this.zoomIn
|
)
|
this['zoomResetButton'] = this['createButton'](
|
this.controlOption['resetText'],
|
'Reset',
|
'l7-button-control',
|
container,
|
() => {
|
if (this.mapsService.map?.deMapProvider == 'qq') {
|
if (this.mapsService.map.deMapAutoFit) {
|
this.mapsService.setZoomAndCenter(this.mapsService.map.deMapAutoZoom, [
|
this.mapsService.map.deMapAutoLng,
|
this.mapsService.map.deMapAutoLat
|
])
|
} else {
|
this.mapsService.setZoomAndCenter(
|
this.controlOption['initZoom'],
|
this.controlOption['center']
|
)
|
}
|
} else {
|
if (this.controlOption['bounds']) {
|
this.mapsService.fitBounds(this.controlOption['bounds'], { animate: true })
|
} else {
|
this.mapsService.setZoomAndCenter(
|
this.controlOption['initZoom'],
|
this.controlOption['center']
|
)
|
}
|
}
|
}
|
)
|
if (this.controlOption.showZoom) {
|
this['zoomNumDiv'] = this['createButton'](
|
'0',
|
'',
|
'l7-button-control l7-control-zoom__number',
|
container
|
)
|
}
|
this['zoomOutButton'] = this['createButton'](
|
this.controlOption.zoomOutText,
|
this.controlOption.zoomOutTitle,
|
'l7-button-control',
|
container,
|
this.zoomOut
|
)
|
const { buttonBackground } = this.controlOption as any
|
const elements = [this['zoomResetButton'], this['zoomInButton'], this['zoomOutButton']]
|
if (buttonBackground) {
|
setStyle(elements, 'background', buttonBackground)
|
}
|
setStyle(elements, 'border-bottom', 'none')
|
this['updateDisabled']()
|
}
|
public getDefault(option: Partial<IZoomControlOption>) {
|
const { buttonColor } = option as any
|
let zoomInText = ZOOM_IN_BTN
|
let zoomOutText = ZOOM_OUT_BTN
|
let resetText = RESET_BTN
|
if (buttonColor) {
|
zoomInText = zoomInText.replace('${fill}', buttonColor)
|
zoomOutText = zoomOutText.replace('${fill}', buttonColor)
|
resetText = resetText.replace('${fill}', buttonColor)
|
}
|
return {
|
...option,
|
position: PositionType.BOTTOMRIGHT,
|
name: 'zoom',
|
zoomInText,
|
zoomInTitle: 'Zoom in',
|
zoomOutText,
|
zoomOutTitle: 'Zoom out',
|
resetText,
|
showZoom: false
|
} as IZoomControlOption
|
}
|
}
|
export function configL7Zoom(
|
chart: Chart,
|
scene: Scene,
|
mapKey?: { key: string; securityCode: string; mapType: string }
|
) {
|
const { basicStyle } = parseJson(chart.customAttr)
|
const zoomOption = scene?.getControlByName('zoom')
|
if (zoomOption) {
|
scene.removeControl(zoomOption)
|
}
|
if (shouldHideZoom(basicStyle)) {
|
// 当地图未加载完成时，无法配置控制项，需要监听loaded事件
|
if (!scene.loaded) {
|
scene.once('loaded', () => {
|
updateMapStatusOption(mapKey.mapType, scene, false)
|
})
|
} else {
|
updateMapStatusOption(mapKey.mapType, scene, false)
|
}
|
return
|
}
|
updateMapStatusOption(mapKey.mapType, scene, true)
|
if (!scene?.getControlByName('zoom')) {
|
if (!scene.map) {
|
scene.once('loaded', () => {
|
switch (mapKey?.mapType) {
|
case 'tianditu':
|
//天地图
|
{
|
const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom()
|
const center =
|
basicStyle.autoFit === false
|
? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
|
: [scene.map.getCenter().getLng(), scene.map.getCenter().getLat()]
|
const newZoomOptions = {
|
initZoom: initZoom,
|
center: center,
|
buttonColor: basicStyle.zoomButtonColor,
|
buttonBackground: basicStyle.zoomBackground
|
} as any
|
scene.addControl(new CustomZoom(newZoomOptions))
|
}
|
break
|
case 'qq':
|
{
|
const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom()
|
const center =
|
basicStyle.autoFit === false
|
? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
|
: [scene.map.getCenter().lng, scene.map.getCenter().lat]
|
const newZoomOptions = {
|
initZoom: initZoom,
|
center: center,
|
buttonColor: basicStyle.zoomButtonColor,
|
buttonBackground: basicStyle.zoomBackground
|
} as any
|
scene.addControl(new CustomZoom(newZoomOptions))
|
}
|
break
|
default:
|
scene.map.on('complete', () => {
|
const initZoom = basicStyle.autoFit === false ? basicStyle.zoomLevel : scene.getZoom()
|
const center =
|
basicStyle.autoFit === false
|
? [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
|
: [scene.map.getCenter().lng, scene.map.getCenter().lat]
|
const newZoomOptions = {
|
initZoom: initZoom,
|
center: center,
|
buttonColor: basicStyle.zoomButtonColor,
|
buttonBackground: basicStyle.zoomBackground
|
} as any
|
scene.addControl(new CustomZoom(newZoomOptions))
|
})
|
}
|
})
|
} else {
|
const newZoomOptions = {
|
buttonColor: basicStyle.zoomButtonColor,
|
buttonBackground: basicStyle.zoomBackground
|
} as any
|
if (basicStyle.autoFit === false) {
|
newZoomOptions.initZoom = basicStyle.zoomLevel
|
newZoomOptions.center = [basicStyle.mapCenter.longitude, basicStyle.mapCenter.latitude]
|
} else {
|
const coordinates: [][] = []
|
if (chart.type === 'flow-map') {
|
const startAxis = chart.xAxis
|
const endAxis = chart.xAxisExt
|
if (startAxis?.length === 2) {
|
chart.data?.tableRow?.forEach(row => {
|
coordinates.push([row[startAxis[0].dataeaseName], row[startAxis[1].dataeaseName]])
|
})
|
}
|
if (endAxis?.length === 2) {
|
chart.data?.tableRow?.forEach(row => {
|
coordinates.push([row[endAxis[0].dataeaseName], row[endAxis[1].dataeaseName]])
|
})
|
}
|
} else {
|
const axis = chart.xAxis
|
if (axis?.length === 2) {
|
chart.data?.tableRow?.forEach(row => {
|
coordinates.push([row[axis[0].dataeaseName], row[axis[1].dataeaseName]])
|
})
|
}
|
}
|
newZoomOptions.bounds = calculateBounds(coordinates)
|
}
|
scene.addControl(new CustomZoom(newZoomOptions))
|
}
|
}
|
}
|
/**
|
* 计算经纬度数据的边界点
|
* @param coordinates 经纬度数组 [[lng, lat], [lng, lat], ...]
|
* @returns {[[number, number], [number, number]]} 返回东北角和西南角的坐标
|
*/
|
export function calculateBounds(coordinates: number[][]): {
|
northEast: [number, number]
|
southWest: [number, number]
|
} {
|
if (!coordinates || coordinates.length === 0) {
|
return {
|
northEast: [180, 90],
|
southWest: [-180, -90]
|
}
|
}
|
|
let maxLng = -180
|
let minLng = 180
|
let maxLat = -90
|
let minLat = 90
|
|
coordinates.forEach(([lng, lat]) => {
|
maxLng = Math.max(maxLng, lng)
|
minLng = Math.min(minLng, lng)
|
maxLat = Math.max(maxLat, lat)
|
minLat = Math.min(minLat, lat)
|
})
|
|
return [
|
[maxLng, maxLat], // 东北角坐标
|
[minLng, minLat] // 西南角坐标
|
]
|
}
|
|
export function configL7PlotZoom(chart: Chart, plot: L7Plot<PlotOptions>) {
|
const { basicStyle } = parseJson(chart.customAttr)
|
if (shouldHideZoom(basicStyle)) {
|
// amap
|
plot.scene.map['zoomEnable']?.disable()
|
plot.scene.map['dragEnable']?.disable()
|
// mapbox
|
plot.scene.map['dragPan']?.disable()
|
plot.scene.map['scrollZoom']?.disable()
|
plot.scene.map['doubleClickZoom']?.disable()
|
plot.scene.map['dragRotate']?.disable()
|
plot.scene.map['touchPitch']?.disable()
|
plot.scene.map['touchZoomRotate']?.disable()
|
return
|
}
|
plot.once('loaded', () => {
|
const zoomOptions = {
|
initZoom: plot.scene.getZoom(),
|
center: plot.scene.getCenter(),
|
buttonColor: basicStyle.zoomButtonColor,
|
buttonBackground: basicStyle.zoomBackground
|
} as any
|
plot.scene.addControl(new CustomZoom(zoomOptions))
|
})
|
}
|
|
function setStyle(elements: HTMLElement[], styleProp: string, value) {
|
elements.forEach(e => {
|
e.style[styleProp] = value
|
})
|
}
|
|
export function mapRendering(dom: HTMLElement | string) {
|
if (typeof dom === 'string') {
|
dom = document.getElementById(dom)
|
}
|
dom.classList.add('de-map-rendering')
|
}
|
|
export function qqMapRendered(scene?: Scene) {
|
if (scene?.map && scene.map.deMapProvider === 'qq') {
|
setTimeout(() => {
|
if (scene.map) {
|
scene.map.deMapAutoZoom = scene.map.getZoom()
|
scene.map.deMapAutoLng = scene.map.getCenter().getLng()
|
scene.map.deMapAutoLat = scene.map.getCenter().getLat()
|
}
|
}, 1000)
|
}
|
}
|
|
export function mapRendered(dom: HTMLElement | string) {
|
if (typeof dom === 'string') {
|
dom = document.getElementById(dom)
|
}
|
dom.classList.add('de-map-rendered')
|
}
|
|
export function getMapCenter(basicStyle: ChartBasicStyle) {
|
let center: [number, number]
|
if (basicStyle.autoFit === false) {
|
const longitude = basicStyle?.mapCenter?.longitude ?? DEFAULT_BASIC_STYLE.mapCenter.longitude
|
const latitude = basicStyle?.mapCenter?.latitude ?? DEFAULT_BASIC_STYLE.mapCenter.latitude
|
center = [longitude, latitude]
|
} else {
|
center = undefined
|
}
|
return center
|
}
|
|
export function getMapStyle(
|
mapKey: { key: string; securityCode: string; mapType: string },
|
basicStyle: ChartBasicStyle
|
) {
|
let mapStyle: string
|
switch (mapKey.mapType) {
|
case 'tianditu':
|
if (!find(tdtMapStyleOptions, s => s.value === basicStyle.mapStyle)) {
|
mapStyle = 'normal'
|
} else {
|
mapStyle = basicStyle.mapStyle
|
}
|
break
|
case 'qq':
|
if (
|
!find(qqMapStyleOptions, s => s.value === basicStyle.mapStyle) ||
|
basicStyle.mapStyle === 'normal'
|
) {
|
mapStyle = 'normal'
|
} else {
|
mapStyle = basicStyle.mapStyleUrl
|
}
|
break
|
default:
|
if (!find(gaodeMapStyleOptions, s => s.value === basicStyle.mapStyle)) {
|
basicStyle.mapStyle = 'normal'
|
}
|
mapStyle = basicStyle.mapStyleUrl
|
if (basicStyle.mapStyle !== 'custom') {
|
mapStyle = `amap://styles/${basicStyle.mapStyle ? basicStyle.mapStyle : 'normal'}`
|
}
|
break
|
}
|
return mapStyle
|
}
|
|
export async function getMapScene(
|
chart: Chart,
|
scene: Scene,
|
container: string,
|
mapKey: { key: string; securityCode: string; mapType: string },
|
basicStyle: ChartBasicStyle,
|
miscStyle: ChartMiscAttr,
|
mapStyle: string,
|
center?: [number, number]
|
) {
|
if (!scene) {
|
scene = new Scene({
|
id: container,
|
logoVisible: false,
|
map: getMapObject(mapKey, basicStyle, miscStyle, mapStyle, center)
|
})
|
} else {
|
if (mapKey.mapType === 'tianditu') {
|
scene.map?.checkResize()
|
}
|
if (scene.getLayers()?.length) {
|
await scene.removeAllLayer()
|
try {
|
scene.setPitch(miscStyle.mapPitch)
|
} catch (e) {}
|
if (mapKey.mapType === 'tianditu') {
|
if (mapStyle === 'normal') {
|
scene.map?.removeStyle()
|
} else {
|
scene.setMapStyle(mapStyle)
|
}
|
} else {
|
scene.setMapStyle(mapStyle)
|
}
|
|
scene.map.showLabel = !(basicStyle.showLabel === false)
|
if (mapKey.mapType === 'qq') {
|
scene.map.setBaseMap({
|
//底图设置（参数为：VectorBaseMap对象）
|
type: 'vector', //类型：失量底图
|
features: basicStyle.showLabel === false ? ['base', 'building2d'] : undefined
|
//仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
|
})
|
}
|
}
|
if (basicStyle.autoFit === false) {
|
scene.setZoomAndCenter(basicStyle.zoomLevel, center)
|
if (mapKey.mapType === 'qq') {
|
scene.map.deMapAutoFit = false
|
scene.map.deMapZoom = basicStyle.zoomLevel
|
scene.map.deMapCenter = center
|
}
|
}
|
}
|
mapRendering(container)
|
scene.once('loaded', () => {
|
mapRendered(container)
|
if (mapKey.mapType === 'qq') {
|
scene.map.setBaseMap({
|
//底图设置（参数为：VectorBaseMap对象）
|
type: 'vector', //类型：失量底图
|
features: basicStyle.showLabel === false ? ['base', 'building2d'] : undefined
|
//仅渲染：道路及底面(base) + 2d建筑物(building2d)，以达到隐藏文字的效果
|
})
|
scene.setMapStyle(mapStyle)
|
|
scene.map.deMapProvider = 'qq'
|
scene.map.deMapAutoFit = !!basicStyle.autoFit
|
// scene.map.deMapAutoZoom = scene.map.getZoom()
|
// scene.map.deMapAutoLng = scene.map.getCenter().getLng()
|
// scene.map.deMapAutoLat = scene.map.getCenter().getLat()
|
}
|
// 去除天地图自己的缩放按钮
|
if (mapKey.mapType === 'tianditu') {
|
if (mapStyle === 'normal') {
|
scene.map?.removeStyle()
|
} else {
|
scene.setMapStyle(mapStyle)
|
}
|
|
const tdtControl = document.querySelector(
|
`#component${chart.id} .tdt-control-zoom.tdt-bar.tdt-control`
|
)
|
if (tdtControl) {
|
tdtControl.style.display = 'none'
|
}
|
const tdtControlOuter = document.querySelectorAll(
|
`#wrapper-outer-id-${chart.id} .tdt-control-zoom.tdt-bar.tdt-control`
|
)
|
if (tdtControlOuter && tdtControlOuter.length > 0) {
|
for (let i = 0; i < tdtControlOuter.length; i++) {
|
tdtControlOuter[i].style.display = 'none'
|
}
|
}
|
const tdtCopyrightControl = document.querySelector(
|
`#component${chart.id} .tdt-control-copyright.tdt-control`
|
)
|
if (tdtCopyrightControl) {
|
tdtCopyrightControl.style.display = 'none'
|
}
|
const tdtCopyrightControlOuter = document.querySelectorAll(
|
`#wrapper-outer-id-${chart.id} .tdt-control-copyright.tdt-control`
|
)
|
if (tdtCopyrightControlOuter && tdtCopyrightControlOuter.length > 0) {
|
for (let i = 0; i < tdtCopyrightControlOuter.length; i++) {
|
tdtCopyrightControlOuter[i].style.display = 'none'
|
}
|
}
|
}
|
})
|
return scene
|
}
|
|
export function getMapObject(
|
mapKey: { key: string; securityCode: string; mapType: string },
|
basicStyle: ChartBasicStyle,
|
miscStyle: ChartMiscAttr,
|
mapStyle: string,
|
center?: [number, number]
|
) {
|
switch (mapKey.mapType) {
|
case 'tianditu':
|
return new TMap({
|
token: mapKey?.key ?? undefined,
|
style: mapStyle, //不生效
|
pitch: undefined, //不支持
|
center,
|
zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined,
|
showLabel: !(basicStyle.showLabel === false), //不支持
|
WebGLParams: {
|
preserveDrawingBuffer: true // 不支持
|
}
|
})
|
case 'qq':
|
return new TencentMap({
|
token: mapKey?.key ?? undefined,
|
style: mapStyle,
|
pitch: miscStyle.mapPitch,
|
center,
|
zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : 12,
|
showLabel: !(basicStyle.showLabel === false),
|
renderOptions: {
|
preserveDrawingBuffer: true
|
}
|
})
|
default:
|
return new GaodeMap({
|
token: mapKey?.key ?? undefined,
|
style: mapStyle,
|
pitch: miscStyle.mapPitch,
|
center,
|
zoom: basicStyle.autoFit === false ? basicStyle.zoomLevel : undefined,
|
showLabel: !(basicStyle.showLabel === false),
|
WebGLParams: {
|
preserveDrawingBuffer: true
|
}
|
})
|
}
|
}
|
/**
|
* 隐藏缩放控件
|
* @param basicStyle
|
*/
|
function shouldHideZoom(basicStyle: any): boolean {
|
return (
|
(basicStyle.suspension === false && basicStyle.showZoom === undefined) ||
|
basicStyle.showZoom === false
|
)
|
}
|
|
const G2_TOOLTIP_WRAPPER = 'g2-tooltip-wrapper'
|
export function getTooltipContainer(id) {
|
let wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
|
if (!wrapperDom) {
|
wrapperDom = document.createElement('div')
|
wrapperDom.style.position = 'absolute'
|
wrapperDom.style.zIndex = '9999'
|
wrapperDom.id = G2_TOOLTIP_WRAPPER
|
document.body.appendChild(wrapperDom)
|
}
|
const curDom = document.getElementById(id)
|
if (curDom) {
|
curDom.remove()
|
}
|
const g2Tooltip = document.createElement('div')
|
g2Tooltip.setAttribute('id', id)
|
g2Tooltip.classList.add('g2-tooltip')
|
// 最多半屏，鼠标移入可滚动
|
g2Tooltip.style.maxHeight = '50%'
|
isMobile() ? (g2Tooltip.style.maxWidth = '50%') : (g2Tooltip.style.maxWidth = '25%')
|
g2Tooltip.style.overflowY = 'auto'
|
g2Tooltip.style.display = 'none'
|
g2Tooltip.style.position = 'fixed'
|
g2Tooltip.style.left = '0px'
|
g2Tooltip.style.top = '0px'
|
const g2TooltipTitle = document.createElement('div')
|
g2TooltipTitle.classList.add('g2-tooltip-title')
|
g2Tooltip.appendChild(g2TooltipTitle)
|
|
const g2TooltipList = document.createElement('ul')
|
g2TooltipList.classList.add('g2-tooltip-list')
|
g2Tooltip.appendChild(g2TooltipList)
|
const full = document.getElementsByClassName('fullscreen')
|
if (full.length) {
|
full.item(0).appendChild(g2Tooltip)
|
} else {
|
wrapperDom.appendChild(g2Tooltip)
|
}
|
return g2Tooltip
|
}
|
|
/**
|
* 配置提示轮播
|
* @param plot
|
* @param chart
|
*/
|
function configCarouselTooltip(plot, chart) {
|
const senior = parseJson(chart.senior)
|
if (senior.functionCfg) {
|
if (senior.functionCfg.sliderShow) {
|
return
|
}
|
}
|
const start = isSupport(chart.type) && !document.getElementById('multiplexingDrawer')
|
if (start) {
|
// 启用轮播
|
plot.once('afterrender', () => {
|
const carousel = chart.customAttr?.tooltip?.carousel
|
ChartCarouselTooltip.manage(plot, chart, {
|
xField: 'field',
|
duration: carousel.enable ? carousel?.stayTime * 1000 : 2000,
|
interval: carousel.enable ? carousel?.intervalTime * 1000 : 2000
|
})
|
})
|
}
|
}
|
/**
|
* 计算 Tooltip 的位置
|
* @param {Chart} chart - 图表实例
|
* @param {boolean} isCarousel - 是否为轮播模式
|
* @param {object} tooltipCtl - Tooltip 控制器
|
* @param {HTMLElement} chartElement - 图表元素
|
* @param {Event} event - 事件对象
|
* @param {boolean} enlargeElement - 放大弹窗
|
* @returns {{x: number, y: number}} - 计算后的 x 和 y 坐标
|
*/
|
function calculateTooltipPosition(chart, isCarousel, tooltipCtl, chartElement, event) {
|
// 辅助函数: 根据不同图表类型计算 Tooltip 的y位置
|
const getTooltipY = () => {
|
const top = Number(chartElement.getBoundingClientRect().top)
|
if (isColumn(chart.type)) {
|
return top + chartElement.getBoundingClientRect().height / 2
|
}
|
if (isMix(chart.type) || isPie(chart.type)) {
|
return top + tooltipCtl.point.y
|
}
|
return top + tooltipCtl.point.y + 60
|
}
|
if (isCarousel) {
|
return {
|
x: tooltipCtl.point.x + Number(chartElement.getBoundingClientRect().left),
|
y: getTooltipY()
|
}
|
} else {
|
return { x: event.clientX, y: event.clientY }
|
}
|
}
|
const getChartElements = chart => {
|
return (
|
document.getElementById('container-viewDialog-' + chart.id + '-common') ||
|
document.getElementById('container-preview-' + chart.id + '-common') ||
|
document.getElementById('enlarge-inner-content-' + chart.id) ||
|
document.getElementById('shape-id-' + chart.id)
|
)
|
}
|
export function configPlotTooltipEvent<O extends PickOptions, P extends Plot<O>>(
|
chart: Chart,
|
plot: P
|
) {
|
const { tooltip } = parseJson(chart.customAttr)
|
if (!tooltip.show) {
|
ChartCarouselTooltip.destroyByContainer(chart.container)
|
return
|
}
|
// 图表容器，用于计算 tooltip 的位置
|
// 获取图表元素，优先顺序：放大 > 预览 > 公共连接页面 > 默认
|
let chartElement = getChartElements(chart)
|
// 是否是放大弹窗
|
const enlargeElement = chartElement?.id.includes('viewDialog')
|
// 轮播时tooltip的zIndex
|
const carousel_zIndex = enlargeElement ? '9999' : '1002'
|
configCarouselTooltip(plot, chart)
|
// 鼠标可移入, 移入之后保持显示, 移出之后隐藏
|
plot.options.tooltip.container.addEventListener('mouseenter', e => {
|
e.target.style.visibility = 'visible'
|
e.target.style.display = 'block'
|
})
|
plot.options.tooltip.container.addEventListener('mouseleave', e => {
|
e.target.style.visibility = 'hidden'
|
e.target.style.display = 'none'
|
})
|
// 手动处理 tooltip 的显示和隐藏事件，需配合源码理解
|
// https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#showTooltip
|
plot.on('tooltip:show', () => {
|
const tooltipCtl = plot.chart.getController('tooltip')
|
if (!tooltipCtl) {
|
return
|
}
|
const tooltipInstance = ChartCarouselTooltip.getInstanceByContainer(chart.container)
|
if (tooltipInstance && tooltipInstance.hasParentWithSwitchHidden(plot.chart.ele)) {
|
return
|
}
|
// 处理 tooltip 与下拉菜单的显示冲突问题
|
const viewTrackBarElement = document.getElementById('view-track-bar-' + chart.id)
|
const event = plot.chart.interactions.tooltip?.context?.event
|
// 是否时轮播模式
|
const isCarousel =
|
chart.customAttr?.tooltip?.carousel &&
|
(!event || // 事件触发时，使用event的client坐标
|
['plot:leave', 'plot:mouseleave'].includes(event?.type) || //鼠标离开时，使用tooltipCtl.point
|
['pie', 'pie-rose', 'pie-donut'].includes(chart.type)) // 饼图时，使用tooltipCtl.point
|
plot.options.tooltip.showMarkers = isCarousel ? true : false
|
const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
|
wrapperDom.style.zIndex = isCarousel && wrapperDom ? carousel_zIndex : '9999'
|
if (tooltipCtl.tooltip) {
|
// 处理视图放大后再关闭 tooltip 的 dom 被清除
|
const container = tooltipCtl.tooltip.cfg.container
|
// 当下拉菜单不显示时，移除tooltip的hidden-tooltip样式
|
if (viewTrackBarElement?.getAttribute('aria-expanded') === 'false') {
|
container.classList.toggle('hidden-tooltip', false)
|
}
|
container.style.display = 'block'
|
const dom = document.getElementById(container.id)
|
if (!dom) {
|
const full = document.getElementsByClassName('fullscreen')
|
if (full.length) {
|
full.item(0).appendChild(container)
|
} else {
|
const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
|
wrapperDom.appendChild(container)
|
}
|
}
|
}
|
plot.chart.getOptions().tooltip.follow = false
|
tooltipCtl.title = Math.random().toString()
|
// 当显示提示为事件触发时，使用event的client坐标，否则使用tooltipCtl.point 数据点的位置，在图表中，需要加上图表在绘制区的位置
|
chartElement = getChartElements(chart)
|
const { x, y } = calculateTooltipPosition(chart, isCarousel, tooltipCtl, chartElement, event)
|
plot.chart.getTheme().components.tooltip.x = x
|
plot.chart.getTheme().components.tooltip.y = y
|
})
|
// https://github.com/antvis/G2/blob/master/src/chart/controller/tooltip.ts#hideTooltip
|
plot.on('plot:leave', () => {
|
const tooltipCtl = plot.chart.getController('tooltip')
|
if (!tooltipCtl) {
|
return
|
}
|
plot.chart.getOptions().tooltip.follow = true
|
const container = tooltipCtl.tooltip?.cfg?.container
|
if (container) {
|
container.style.display = 'none'
|
}
|
tooltipCtl.hideTooltip()
|
})
|
// 移动端处理，关闭其他图表的提示
|
plot.on('plot:touchstart', () => {
|
const wrapperDom = document.getElementById(G2_TOOLTIP_WRAPPER)
|
if (wrapperDom) {
|
const tooltipCtl = plot.chart.getController('tooltip')
|
if (!tooltipCtl) {
|
return
|
}
|
const container = tooltipCtl.tooltip?.cfg.container
|
for (const ele of wrapperDom.children) {
|
if (!container || container.id !== ele.id) {
|
ele.style.display = 'none'
|
}
|
}
|
}
|
})
|
plot.on('tooltip:hidden', () => {
|
const tooltipCtl = plot.chart.getController('tooltip')
|
if (!tooltipCtl) {
|
return
|
}
|
const container = tooltipCtl.tooltip?.cfg.container
|
container && (container.style.display = 'none')
|
})
|
}
|
|
export const TOOLTIP_TPL =
|
'<li class="g2-tooltip-list-item" data-index={index}>' +
|
'<span class="g2-tooltip-marker" style="background:{color}"></span>' +
|
'<span class="g2-tooltip-name">{name}</span>:' +
|
'<span class="g2-tooltip-value">{value}</span>' +
|
'</li>'
|
|
export function getConditions(chart: Chart) {
|
const { threshold } = parseJson(chart.senior)
|
const annotations = []
|
if (!threshold.enable || chart.type === 'area-stack' || chart.type === 'symbolic-map')
|
return annotations
|
const conditions = threshold.lineThreshold ?? []
|
const yAxisIds = chart.yAxis.map(i => i.id)
|
for (const field of conditions) {
|
if (!yAxisIds.includes(field.fieldId)) {
|
continue
|
}
|
for (const t of field.conditions) {
|
const annotation = {
|
type: 'regionFilter',
|
start: ['start', 'median'],
|
end: ['end', 'min'],
|
color: t.color
|
}
|
// 加中线
|
const annotationLine = {
|
type: 'line',
|
start: ['start', t.value],
|
end: ['end', t.value],
|
style: {
|
stroke: t.color,
|
lineDash: [2, 2]
|
}
|
}
|
if (t.term === 'between') {
|
annotation.start = ['start', parseFloat(t.min)]
|
annotation.end = ['end', parseFloat(t.max)]
|
annotationLine.start = ['start', parseFloat(t.min)]
|
annotationLine.end = ['end', parseFloat(t.min)]
|
annotations.push(JSON.parse(JSON.stringify(annotationLine)))
|
annotationLine.start = ['start', parseFloat(t.max)]
|
annotationLine.end = ['end', parseFloat(t.max)]
|
annotations.push(annotationLine)
|
} else if (['lt', 'le'].includes(t.term)) {
|
annotation.start = ['start', t.value]
|
annotation.end = ['end', 'min']
|
annotations.push(annotationLine)
|
} else if (['gt', 'ge'].includes(t.term)) {
|
annotation.start = ['start', t.value]
|
annotation.end = ['end', 'max']
|
annotations.push(annotationLine)
|
}
|
annotations.push(annotation)
|
}
|
}
|
return annotations
|
}
|
const AXIS_LABEL_TOOLTIP_STYLE = {
|
transition:
|
'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
|
backgroundColor: 'rgb(255, 255, 255)',
|
boxShadow: 'rgb(174, 174, 174) 0px 0px 10px',
|
borderRadius: '3px',
|
padding: '8px 12px',
|
opacity: '0.95',
|
position: 'absolute',
|
visibility: 'visible'
|
}
|
const AXIS_LABEL_TOOLTIP_TPL =
|
'<div class="g2-axis-label-tooltip">' + '<div class="g2-tooltip-title">{title}</div>' + '</div>'
|
export function configAxisLabelLengthLimit(chart, plot, triggerObjName = 'axis-label') {
|
// 设置触发事件的名称，如果未传入，则默认为 'axis-label'
|
const triggerName = triggerObjName
|
|
// 判断是否是Y轴标题
|
const isYaxisTitle = triggerName === 'axis-title'
|
|
// 解析图表的自定义样式和属性
|
const { customStyle, customAttr } = parseJson(chart)
|
const { lengthLimit, fontSize, color, show } = customStyle.yAxis.axisLabel
|
const { tooltip } = customAttr
|
|
// 如果不是标题，判断没有设置长度限制、没有显示或Y轴不显示，或图表类型为双向条形图，则不执行后续操作
|
if (
|
!isYaxisTitle &&
|
(!lengthLimit || !show || !customStyle.yAxis.show || chart.type === 'bidirectional-bar')
|
)
|
return
|
|
// 鼠标进入事件
|
plot.on(triggerName + ':mouseenter', e => {
|
const field = e.target.cfg.delegateObject.component.cfg.field
|
const position = e.target.cfg.delegateObject.component.cfg.position
|
const isYaxis = position === 'left' || position === 'right'
|
|
// 如果不是 'field' 或 'title'，且不是Y轴，直接返回
|
if (field !== 'field' && field !== 'title' && !isYaxis) return
|
|
// 获取轴标签的实际内容
|
const realContent = e.target.attrs.text
|
|
// 不是标题时，判断标签长度小于限制或已经省略（以'...'结尾），则不显示 tooltip
|
if (
|
isYaxisTitle ? false : realContent.length < lengthLimit || !(realContent.slice(-3) === '...')
|
)
|
return
|
|
// 获取当前鼠标事件的坐标
|
const { x, y } = e
|
const parentNode = e.event.target.parentNode
|
|
// 获取父节点中是否已有 tooltip
|
let labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')[0]
|
|
// 获取轴的标题
|
const title =
|
e.target.cfg.delegateObject.item?.name ||
|
e.target.cfg.delegateObject.axis.cfg.title.originalText
|
|
// 如果没有 tooltip，创建新的 tooltip DOM 元素
|
if (!labelTooltipDom) {
|
const domStr = substitute(AXIS_LABEL_TOOLTIP_TPL, { title })
|
labelTooltipDom = createDom(domStr)
|
|
// 设置 tooltip 的样式
|
AXIS_LABEL_TOOLTIP_STYLE.backgroundColor = tooltip.backgroundColor
|
AXIS_LABEL_TOOLTIP_STYLE.boxShadow = `${tooltip.backgroundColor} 0px 0px 5px`
|
AXIS_LABEL_TOOLTIP_STYLE.maxWidth = '200px'
|
_.assign(labelTooltipDom.style, AXIS_LABEL_TOOLTIP_STYLE)
|
|
// 将 tooltip 添加到父节点
|
parentNode.appendChild(labelTooltipDom)
|
} else {
|
// 如果已有 tooltip，更新其标题并使其可见
|
labelTooltipDom.getElementsByClassName('g2-tooltip-title')[0].innerHTML = title
|
labelTooltipDom.style.visibility = 'visible'
|
}
|
|
// 获取父节点的尺寸和 tooltip 的尺寸
|
const { height, width } = parentNode.getBoundingClientRect()
|
const { offsetHeight, offsetWidth } = labelTooltipDom
|
|
// 如果 tooltip 的尺寸超出了父节点的尺寸，则将其位置重置为 (0, 0)
|
if (offsetHeight > height || offsetWidth > width) {
|
labelTooltipDom.style.left = labelTooltipDom.style.top = '0px'
|
return
|
}
|
|
// 计算 tooltip 的初始位置
|
const initPosition = { left: x + 10, top: y + 15 }
|
|
// 调整位置，避免 tooltip 超出边界
|
if (initPosition.left + offsetWidth > width) initPosition.left = width - offsetWidth - 10
|
if (initPosition.top + offsetHeight > height) initPosition.top -= offsetHeight + 15
|
|
// 设置 tooltip 的位置和样式
|
labelTooltipDom.style.left = `${initPosition.left}px`
|
labelTooltipDom.style.top = `${initPosition.top}px`
|
labelTooltipDom.style.color = color
|
labelTooltipDom.style.fontSize = `${fontSize}px`
|
})
|
|
// 鼠标离开事件
|
plot.on(triggerName + ':mouseleave', e => {
|
const field = e.target.cfg.delegateObject.component.cfg.field
|
const position = e.target.cfg.delegateObject.component.cfg.position
|
const isYaxis = position === 'left' || position === 'right'
|
|
// 如果不是 'field' 或 'title'，且不是Y轴，直接返回
|
if (field !== 'field' && field !== 'title' && !isYaxis) return
|
|
// 获取轴标签的实际内容
|
const realContent = e.target.attrs.text
|
|
// 如果标签长度小于限制或已经省略（以'...'结尾），则不显示 tooltip
|
if (
|
isYaxisTitle ? false : realContent.length < lengthLimit || !(realContent.slice(-3) === '...')
|
)
|
return
|
|
// 获取父节点中的 tooltip
|
const parentNode = e.event.target.parentNode
|
const labelTooltipDom = parentNode.getElementsByClassName('g2-axis-label-tooltip')[0]
|
|
// 如果 tooltip 存在，隐藏它
|
if (labelTooltipDom) labelTooltipDom.style.visibility = 'hidden'
|
})
|
}
|
|
/**
|
* y轴标题截取
|
* @param chart
|
* @param plot
|
*/
|
export function configYaxisTitleLengthLimit(chart, plot) {
|
// 监听图表渲染前事件
|
plot.on('beforerender', ev => {
|
// 获取图表的Y轴自定义样式
|
const { yAxis } = parseJson(chart.customStyle)
|
|
// 计算最大可用空间高度，80% 为最大高度比
|
const maxHeightRatio =
|
0.8 * (ev.view.canvas.cfg.height - (ev.view.canvas.cfg.height < 120 ? 60 : 30))
|
|
// 计算Y轴标题的每行高度
|
const titleHeight = measureText(
|
chart,
|
yAxis.name,
|
{ fontSize: yAxis.fontSize, fontFamily: chart.fontFamily },
|
'height'
|
)
|
|
// 用于存储截取后的标题
|
let wrappedTitle = ''
|
|
// 循环截取标题内容，直到超过最大高度
|
for (
|
let charIndex = 0;
|
charIndex < yAxis.name.length && (charIndex + 1) * titleHeight <= maxHeightRatio;
|
charIndex++
|
) {
|
wrappedTitle += yAxis.name[charIndex]
|
}
|
|
// 如果标题被截断，添加省略号
|
if (yAxis.name.length > wrappedTitle.length) {
|
wrappedTitle =
|
wrappedTitle.length > 2
|
? wrappedTitle.slice(0, wrappedTitle.length - 2) + '...'
|
: wrappedTitle + '...'
|
}
|
// 更新Y轴标题的原始文本和截断后的文本
|
const { title } = ev.view.options.axes.yAxisExt
|
if (title) {
|
title.originalText = yAxis.name
|
title.text = wrappedTitle
|
}
|
})
|
}
|
|
/**
|
* 调整原始数据options.data
|
* 添加conditionColor字段，用于保存符合条件的颜色
|
* conditionColor 为数组，多个指标多个颜色，按照指标的顺序
|
* @param chart
|
* @param options
|
*/
|
export const addConditionsStyleColorToData = (chart: Chart, options) => {
|
const { threshold } = parseJson(chart.senior)
|
if (!threshold.enable) return options
|
options.data.forEach(item => {
|
item['conditionColor'] = []
|
// 条形图的值字段是xField，柱形图的值字段是yField
|
const valueField = chart.type === 'bar-horizontal' ? options.xField : options.yField
|
// 对称条形图区分左右值，value、 valueExt,quotaList只有一个
|
if (chart.type === 'bidirectional-bar') {
|
valueField.forEach(value => {
|
const quotaList = value === 'value' ? chart.yAxis : chart.yAxisExt
|
const conditionColor = getColorByConditions([quotaList[0]?.id], item[value], chart)
|
if (conditionColor) {
|
item[item[options.xField] + '-' + value] = conditionColor
|
}
|
})
|
} else if (item.quotaList?.length) {
|
const quotaList = item.quotaList.map(q => q.id) ?? []
|
quotaList.forEach(q => {
|
// 定义后，在 handleConditionsStyle 函数中使用
|
let currentValue = item[valueField]
|
if (chart.type === 'progress-bar') {
|
currentValue = item['originalValue']
|
}
|
const cColor = getColorByConditions([q], currentValue, chart)
|
if (cColor) {
|
item.conditionColor.push(cColor)
|
} else {
|
item.conditionColor = undefined
|
}
|
})
|
}
|
})
|
return options
|
}
|
|
/**
|
* 辅助函数：获取颜色, 根据条件以及值计算
|
* @param quotaList 指标列表
|
* @param values 值
|
*/
|
const getColorByConditions = (quotaList: [], values: number | number[], chart) => {
|
const { threshold } = parseJson(chart.senior)
|
const { basicStyle } = parseJson(chart.customAttr)
|
const currentValue = Array.isArray(values) ? values[1] - values[0] : values
|
if (!currentValue) return undefined
|
// 同样的指标只取最后一个
|
const conditionMap = new Map()
|
for (const condition of threshold.lineThreshold ?? []) {
|
conditionMap.set(condition.fieldId, condition)
|
}
|
for (const condition of conditionMap.values()) {
|
if (chart.type === 'progress-bar' && chart.yAxisExt?.[0]?.id !== quotaList[0]) continue
|
if (!quotaList.includes(condition.fieldId) && chart.type !== 'waterfall') continue
|
for (const tc of condition.conditions) {
|
if (
|
(tc.term === 'between' && currentValue >= tc.min && currentValue <= tc.max) ||
|
(tc.term === 'lt' && currentValue < tc.value) ||
|
(tc.term === 'le' && currentValue <= tc.value) ||
|
(tc.term === 'gt' && currentValue > tc.value) ||
|
(tc.term === 'ge' && currentValue >= tc.value)
|
) {
|
let tmpColor = hexToRgba(tc.color, basicStyle.alpha)
|
if (basicStyle.gradient) {
|
let vhAngle = ['bar-horizontal', 'progress-bar'].includes(chart.type) ? 0 : 270
|
if (chart.type === 'bidirectional-bar') {
|
const yAxis = chart.yAxis.find(item => item.id === condition.fieldId)
|
vhAngle = getBidirectionalAngle(basicStyle, yAxis ? 0 : 1)
|
}
|
tmpColor = setGradientColor(tmpColor, true, vhAngle)
|
}
|
return tmpColor
|
}
|
}
|
}
|
}
|
|
/**
|
* 处理柱条图的样式
|
* 柱条的颜色
|
* 提示marker的颜色
|
* 注: 原始options中tooltip已经配置了customItems,这里将会忽略
|
* @param chart
|
* @param options
|
*/
|
export function handleConditionsStyle(chart: Chart, options) {
|
const { threshold } = parseJson(chart.senior)
|
if (!threshold.enable) return options
|
const { basicStyle } = parseJson(chart.customAttr)
|
// 该字段出处 addConditionsStyleColorToData
|
const colorField = 'conditionColor'
|
// 配置条件样式的颜色字段
|
const rawFields = options.rawFields || []
|
rawFields.push(colorField)
|
// 辅助函数：配置柱条样式颜色，条形图为barStyle,柱形图为columnStyle
|
const columnStyle = data => {
|
return {
|
...(data[colorField]?.[0] ? { fill: data[colorField][0] } : {})
|
}
|
}
|
let newColor = undefined
|
if (chart.type === 'bidirectional-bar') {
|
rawFields.push(options.xField)
|
newColor = getBidirectionalBarColor(chart, basicStyle, options)
|
} else if (chart.type === 'waterfall') {
|
newColor = getWaterfallColor(basicStyle, chart)
|
}
|
const tooltip = options.tooltip
|
if (tooltip && !tooltip.customItems) {
|
options.tooltip.customItems = originalItems => {
|
originalItems.forEach(item => {
|
if (item.data?.[colorField]) {
|
item.color = item.data[colorField][0]
|
}
|
})
|
return originalItems
|
}
|
}
|
const tmpOption = {
|
...options,
|
rawFields,
|
...configRoundAngle(chart, 'columnStyle', columnStyle),
|
...configRoundAngle(chart, 'barStyle', columnStyle),
|
tooltip,
|
...(newColor ? { color: newColor } : {})
|
}
|
return tmpOption
|
}
|
|
/**
|
* 配置瀑布图的color
|
* 瀑布color,这个图表固定为基础样式中颜色的前三个颜色，第一个为增加，第二个为减少，第三个为总计
|
* @param basicStyle
|
* @param chart
|
*/
|
const getWaterfallColor = (basicStyle, chart) => {
|
const waterfallBasicColors = getBasicColors(chart, basicStyle, 270)
|
return data => {
|
if (data['$$isTotal$$']) return waterfallBasicColors[2]
|
const values = data['$$yField$$']
|
const newColor = getColorByConditions([], values, chart)
|
return newColor ?? (values[1] > values[0] ? waterfallBasicColors[0] : waterfallBasicColors[1])
|
}
|
}
|
|
/**
|
* 配置对称条形图的color
|
* @param basicStyle
|
* @param options
|
*/
|
const getBidirectionalBarColor = (chart, basicStyle, options) => {
|
const basicColors = getBasicColors(chart, basicStyle, 270)
|
return ref => {
|
const obj = options.data.find(item => item[ref[options.xField] + '-' + ref['series-field-key']])
|
if (obj) {
|
return obj[ref[options.xField] + '-' + ref['series-field-key']]
|
}
|
return ref['series-field-key'] === 'value' ? basicColors[0] : basicColors[1]
|
}
|
}
|
|
/**
|
* 获取基础颜色
|
* @param chart
|
* @param basicStyle
|
* @param angle
|
*/
|
const getBasicColors = (chart, basicStyle, angle) => {
|
const baseColors = []
|
basicStyle.colors?.forEach((color, index) => {
|
if (chart.type === 'bidirectional-bar') {
|
baseColors.push(
|
setGradientColor(
|
hexToRgba(color, basicStyle.alpha),
|
true,
|
getBidirectionalAngle(basicStyle, index)
|
)
|
)
|
} else {
|
baseColors.push(setGradientColor(hexToRgba(color, basicStyle.alpha), true, angle))
|
}
|
})
|
return basicStyle.gradient ? baseColors : basicStyle.colors
|
}
|
|
/**
|
* 获取对称条形图颜色的渐变角度
|
* @param basicStyle
|
* @param index
|
*/
|
const getBidirectionalAngle = (basicStyle, index) => {
|
let vhAngle = 180 - index * 180
|
if (basicStyle.layout === 'vertical') {
|
vhAngle = index === 0 ? 280 : 90
|
}
|
return vhAngle
|
}
|
|
/**
|
* tooltip验证条件样式中的颜色，有就使用，否则使用原始颜色
|
* @param item
|
*/
|
export const getTooltipItemConditionColor = item => {
|
let color = item.color
|
if (item.data?.['conditionColor']) {
|
color = item.data['conditionColor'][0]
|
}
|
return color
|
}
|
|
/**
|
* 配置空数据样式
|
* @param newChart
|
* @param newData
|
* @param container
|
*/
|
export const configEmptyDataStyle = (newData, container, newChart?, content?) => {
|
/**
|
* 辅助函数：移除空数据dom
|
*/
|
const removeEmptyDom = () => {
|
const emptyElement = document.getElementById(container + '_empty')
|
if (emptyElement) {
|
emptyElement.parentElement.removeChild(emptyElement)
|
}
|
}
|
removeEmptyDom()
|
if (newData?.length > 0) return
|
if (!newData?.length) {
|
const emptyDom = document.createElement('div')
|
emptyDom.id = container + '_empty'
|
emptyDom.textContent = content || tI18n('data_set.no_data')
|
emptyDom.setAttribute(
|
'style',
|
`position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
color: darkgray;
|
textAlign: center;`
|
)
|
const parent = document.getElementById(container)
|
parent.insertBefore(emptyDom, parent.firstChild)
|
newChart?.destroy()
|
}
|
}
|
|
export const numberToChineseUnderHundred = (num: number): string => {
|
// 合法性检查
|
if (num <= 0 || num > 99 || !Number.isInteger(num)) {
|
throw new Error('请输入1-99之间的整数')
|
}
|
|
const digits = ['', '一', '二', '三', '四', '五', '六', '七', '八', '九']
|
|
// 处理个位数
|
if (num < 10) return digits[num]
|
|
const tens = Math.floor(num / 10)
|
const ones = num % 10
|
|
// 处理整十
|
if (ones === 0) {
|
return tens === 1 ? '十' : digits[tens] + '十'
|
}
|
|
// 处理其他两位数
|
return tens === 1 ? '十' + digits[ones] : digits[tens] + '十' + digits[ones]
|
}
|
|
/**
|
* 配置柱条图的圆角
|
* @param styleName
|
* @param callBack 自定义其他属性函数
|
*/
|
export const configRoundAngle = (chart: Chart, styleName: string, callBack?: (datum) => {}) => {
|
const { basicStyle } = parseJson(chart.customAttr)
|
if (['roundAngle', 'topRoundAngle'].includes(basicStyle.radiusColumnBar)) {
|
const radius = Array(2).fill(basicStyle.columnBarRightAngleRadius)
|
const topRadius = [0, 0, ...radius]
|
const bottomRadius = [...radius, 0, 0]
|
const finalRadius = [...radius, ...radius]
|
if (chart.type.includes('-stack')) {
|
return {
|
[styleName]: datum => {
|
if (!datum.value) return { radius: [], ...(callBack ? callBack(datum) : {}) }
|
return { radius: finalRadius, ...(callBack ? callBack(datum) : {}) }
|
}
|
}
|
}
|
const isTopRound = basicStyle.radiusColumnBar === 'topRoundAngle'
|
// 对称条形图
|
if (chart.type === 'bidirectional-bar') {
|
const valueField = basicStyle.layout === 'vertical' ? 'valueExt' : 'value'
|
return {
|
[styleName]: datum => ({
|
radius: datum[valueField] && isTopRound ? topRadius : isTopRound ? radius : finalRadius,
|
...(callBack ? callBack(datum) : {})
|
})
|
}
|
}
|
// 进度条
|
if (chart.type === 'progress-bar') {
|
return {
|
[styleName]: datum => {
|
return {
|
radius: isTopRound ? bottomRadius : finalRadius,
|
...(callBack ? callBack(datum) : {})
|
}
|
}
|
}
|
}
|
// 区间条形图
|
if (chart.type === 'bar-range') {
|
return {
|
[styleName]: datum => {
|
return {
|
radius:
|
datum?.values[0] < datum?.values[1]
|
? isTopRound
|
? bottomRadius
|
: finalRadius
|
: isTopRound
|
? topRadius
|
: finalRadius,
|
...(callBack ? callBack(datum) : {})
|
}
|
}
|
}
|
}
|
// 配置柱条样式
|
const style = datum => {
|
if (isTopRound) {
|
return { radius, ...(callBack ? callBack(datum) : {}) }
|
}
|
if (!isTopRound) {
|
return { radius: finalRadius, ...(callBack ? callBack(datum) : {}) }
|
}
|
}
|
return {
|
[styleName]: style
|
}
|
}
|
return {
|
[styleName]: datum => {
|
return { ...(callBack ? callBack(datum) : {}) }
|
}
|
}
|
}
|
|
/**
|
* 更新地图交互配置
|
* @param mapType
|
* @param scene
|
* @param enable
|
*/
|
function updateMapStatusOption(mapType: string, scene: Scene, enable = false) {
|
switch (mapType) {
|
case 'tianditu':
|
if (enable) {
|
scene.map?.enableDrag()
|
scene.map?.enableScrollWheelZoom()
|
scene.map?.enableDoubleClickZoom()
|
scene.map?.enableKeyboard()
|
scene.map?.enablePinchToZoom()
|
} else {
|
scene.map?.disableDrag()
|
scene.map?.disableScrollWheelZoom()
|
scene.map?.disableDoubleClickZoom()
|
scene.map?.disableKeyboard()
|
scene.map?.disablePinchToZoom()
|
}
|
break
|
case 'qq':
|
scene.map?.setDraggable(enable)
|
scene.map?.setScrollable(enable)
|
scene.map?.setDoubleClickZoom(enable)
|
scene.map?.setTouchZoomable(enable)
|
scene.map?.setPitchable(enable)
|
scene.map?.setRotatable(enable)
|
break
|
default:
|
scene.map?.setStatus({
|
dragEnable: enable,
|
keyboardEnable: enable,
|
doubleClickZoom: enable,
|
rotateEnable: enable,
|
pitchEnable: enable,
|
scrollWheel: enable,
|
touchZoom: false
|
} as any)
|
}
|
}
|
