+
+
- "/>
-
+
+
+
+
@@ -128,7 +139,6 @@ const stats = reactive({
dictCount: 0
})
-// 最近活动
const activities = ref([
{
id: 1,
diff --git a/frontend/src/data-public/FormCreateDesigner.vue b/frontend/src/data-public/FormCreateDesigner.vue
index 74a5a47..af4730b 100644
--- a/frontend/src/data-public/FormCreateDesigner.vue
+++ b/frontend/src/data-public/FormCreateDesigner.vue
@@ -14,7 +14,11 @@ import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus-secondary'
import formCreate from '@/data-collect/render/element-plus/form-create.es.js'
+
import { useRoute } from 'vue-router'
+// import { moduleById,moduleUpdate } from '@/api/application/module'
+// const basePath = import.meta.env.VITE_API_BASEPATH
+
const route = useRoute()
const designerForm = formCreate.factory();
debugger
diff --git a/frontend/src/data-visualization/DvPreview.vue b/frontend/src/data-visualization/DvPreview.vue
new file mode 100644
index 0000000..c6f6cb1
--- /dev/null
+++ b/frontend/src/data-visualization/DvPreview.vue
@@ -0,0 +1,110 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/data-visualization/canvas/DeCanvas.vue b/frontend/src/data-visualization/canvas/DeCanvas.vue
new file mode 100644
index 0000000..9603124
--- /dev/null
+++ b/frontend/src/data-visualization/canvas/DeCanvas.vue
@@ -0,0 +1,365 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/data-visualization/chart/components/editor/common/ChartTemplateInfo.vue b/frontend/src/data-visualization/chart/components/editor/common/ChartTemplateInfo.vue
new file mode 100644
index 0000000..8774c12
--- /dev/null
+++ b/frontend/src/data-visualization/chart/components/editor/common/ChartTemplateInfo.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
diff --git a/frontend/src/data-visualization/chart/components/editor/common/TableTooltip.vue b/frontend/src/data-visualization/chart/components/editor/common/TableTooltip.vue
new file mode 100644
index 0000000..727a46f
--- /dev/null
+++ b/frontend/src/data-visualization/chart/components/editor/common/TableTooltip.vue
@@ -0,0 +1,80 @@
+
+
+
+
+ {{
+ t('visualization.template_view_tips')
+ }}
+
+
+
+
+
+
+ ${item.name}
+ ${item.name.startsWith('MA') && item.value === '0' ? '-' : item.value}
+
+
+
+ `
+ }
+ const stockOption = {
+ ...stockPlot.options,
+ tooltip: {
+ showMarkers: true,
+ showCrosshairs: true,
+ showNil: true,
+ crosshairs: {
+ follow: true,
+ text: (axisType, value, data) => {
+ if (axisType === 'y') {
+ return { content: value ? value.toFixed(0) : value }
+ }
+ return { content: data[0].title, position: 'end' }
+ }
+ },
+ showContent: true,
+ customItems: customTooltipItems,
+ customContent: generateCustomTooltipContent
+ }
+ }
+ newPlots.push({ ...stockPlot, options: stockOption })
+ return {
+ ...options,
+ plots: newPlots
+ }
+ }
+
+ protected configXAxis(chart: Chart, options: MixOptions): MixOptions {
+ const xAxisOptions = super.configXAxis(chart, options)
+ if (!xAxisOptions) {
+ return options
+ }
+ const newPlots = []
+ const linePlotList = options.plots.filter(item => item.type === 'line')
+
+ const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
+ const newStockPlot = {
+ ...stockPlot,
+ options: {
+ ...stockPlot.options,
+ xAxis: xAxisOptions['xAxis']
+ ? {
+ ...stockPlot.options['xAxis'],
+ ...xAxisOptions['xAxis']
+ }
+ : {
+ label: false,
+ line: null
+ }
+ }
+ }
+ newPlots.push(newStockPlot)
+ linePlotList.forEach(item => {
+ newPlots.push(item)
+ })
+ return {
+ ...options,
+ plots: newPlots
+ }
+ }
+ protected configYAxis(chart: Chart, options: MixOptions): MixOptions {
+ const yAxisOptions = super.configYAxis(chart, options)
+ if (!yAxisOptions) {
+ return options
+ }
+ const yAxis = parseJson(chart.customStyle).yAxis
+ const newPlots = []
+ const linePlotList = options.plots.filter(item => item.type === 'line')
+
+ const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
+ let label = false
+ if (yAxisOptions['yAxis'].label) {
+ label = {
+ ...yAxisOptions['yAxis'].label,
+ formatter: value => {
+ return valueFormatter(value, yAxis.axisLabelFormatter)
+ }
+ }
+ }
+ const newStockPlot = {
+ ...stockPlot,
+ options: {
+ ...stockPlot.options,
+ yAxis: label
+ ? {
+ ...stockPlot.options['yAxis'],
+ ...yAxisOptions['yAxis'],
+ label
+ }
+ : {
+ ...yAxisOptions['yAxis'],
+ label,
+ grid: null,
+ line: null
+ }
+ }
+ }
+ newPlots.push(newStockPlot)
+ linePlotList.forEach(item => {
+ newPlots.push(item)
+ })
+ return {
+ ...options,
+ plots: newPlots
+ }
+ }
+
+ protected customConfigEmptyDataStrategy(chart: Chart, options: MixOptions): MixOptions {
+ const { data } = options as unknown as Options
+ if (!data?.length) {
+ return options
+ }
+ const strategy = parseJson(chart.senior).functionCfg.emptyDataStrategy
+ if (strategy === 'ignoreData') {
+ for (let i = data.length - 1; i >= 0; i--) {
+ const item = data[i]
+ Object.keys(item).forEach(key => {
+ if (key.startsWith('f_') && item[key] === null) {
+ data.splice(i, 1)
+ }
+ })
+ }
+ }
+ const updateValues = (strategy: 'breakLine' | 'setZero', data: any[]) => {
+ data.forEach(obj => {
+ Object.keys(obj).forEach(key => {
+ if (key.startsWith('f_') && obj[key] === null) {
+ obj[key] = strategy === 'breakLine' ? null : 0
+ }
+ })
+ })
+ }
+ if (strategy === 'breakLine' || strategy === 'setZero') {
+ updateValues(strategy, data)
+ }
+ return options
+ }
+ protected configLegend(chart: Chart, options: MixOptions): MixOptions {
+ let legend = {}
+ let customStyle: CustomStyle
+ const stockPlot = options.plots.filter(item => item.type === 'stock')[0]
+ if (chart.customStyle) {
+ customStyle = parseJson(chart.customStyle)
+ // legend
+ if (customStyle.legend) {
+ const l = JSON.parse(JSON.stringify(customStyle.legend))
+ if (l.show) {
+ legend = {
+ ...stockPlot.options.legend,
+ itemName: {
+ style: {
+ fill: l.color,
+ fontSize: l.fontSize
+ }
+ }
+ }
+ } else {
+ legend = false
+ }
+ }
+ }
+ const newPlots = []
+ const stockOption = {
+ ...stockPlot.options,
+ legend: legend
+ }
+ const linePlotList = options.plots.filter(item => item.type === 'line')
+ linePlotList.forEach(item => {
+ newPlots.push(item)
+ })
+ newPlots.push({ ...stockPlot, options: stockOption })
+ return {
+ ...options,
+ plots: newPlots
+ }
+ }
+
+ protected setupOptions(chart: Chart, options: MixOptions): MixOptions {
+ return flow(
+ this.configTheme,
+ this.configBasicStyle,
+ this.configXAxis,
+ this.configYAxis,
+ this.configTooltip,
+ this.configLegend,
+ this.customConfigEmptyDataStrategy
+ )(chart, options)
+ }
+
+ constructor(name = 'stock-line') {
+ super(name, DEFAULT_DATA)
+ }
+}
diff --git a/frontend/src/data-visualization/chart/components/js/panel/charts/liquid/liquid.ts b/frontend/src/data-visualization/chart/components/js/panel/charts/liquid/liquid.ts
new file mode 100644
index 0000000..9ca812c
--- /dev/null
+++ b/frontend/src/data-visualization/chart/components/js/panel/charts/liquid/liquid.ts
@@ -0,0 +1,221 @@
+import {
+ G2PlotChartView,
+ G2PlotDrawOptions
+} from '@/data-visualization/chart/components/js/panel/types/impl/g2plot'
+import type { Liquid as G2Liquid, LiquidOptions } from '@antv/g2plot/esm/plots/liquid'
+import { flow, hexColorToRGBA, parseJson } from '@/data-visualization/chart/components/js/util'
+import { DEFAULT_MISC } from '@/data-visualization/chart/components/editor/util/chart'
+import { valueFormatter } from '@/data-visualization/chart/components/js/formatter'
+import { useI18n } from '@/data-visualization/hooks/web/useI18n'
+
+const { t } = useI18n()
+const DEFAULT_LIQUID_DATA = []
+/**
+ * 水波图
+ */
+export class Liquid extends G2PlotChartView${title}
+ -
+ ${items.map(formatTooltipItem).join('')}
+
`
+ const htmlSuffix = '
'
+ const containerElement = document.getElementById(container)
+ if (containerElement) {
+ containerElement.addEventListener('mousemove', event => {
+ const rect = containerElement.getBoundingClientRect()
+ const mouseX = event.clientX - rect.left
+ const mouseY = event.clientY - rect.top
+ const tooltipElement = containerElement.getElementsByClassName('l7-popup')
+ for (let i = 0; i < tooltipElement?.length; i++) {
+ const element = tooltipElement[i] as HTMLElement
+ element.firstElementChild.style.display = 'none'
+ element.style.transform = 'translate(15px, 12px)'
+ const isNearRightEdge =
+ containerElement.clientWidth - mouseX <= element.clientWidth + 10
+ const isNearBottomEdge = containerElement.clientHeight - mouseY <= element.clientHeight
+ let transform = ''
+ if (isNearRightEdge) {
+ transform += 'translateX(-120%) translateY(15%) '
+ }
+ if (isNearBottomEdge) {
+ transform += 'translateX(15%) translateY(-80%) '
+ }
+ if (transform) {
+ element.style.transform = transform.trim()
+ }
+ }
+ })
+ }
+ pointLayer.on('touchend', e => {
+ if (e.lngLat) {
+ const fieldData = {
+ ...e.feature,
+ ...Object.fromEntries(this.mergeDetailsToMap(e.feature.details ?? []))
+ }
+ const content = this.buildTooltipContent(tooltip, fieldData, showFields)
+ const popup = new Popup({
+ lngLat: e.lngLat,
+ title: '',
+ closeButton: false,
+ closeOnClick: true,
+ html: `${htmlPrefix}${content}${htmlSuffix}`
+ })
+ scene.addPopup(popup)
+ }
+ })
+ return new LayerPopup({
+ anchor: 'top-left',
+ className: 'l7-popup-' + container,
+ items: [
+ {
+ layer: pointLayer,
+ customContent: item => {
+ const fieldData = {
+ ...item,
+ ...Object.fromEntries(this.mergeDetailsToMap(item.details))
+ }
+ const content = this.buildTooltipContent(tooltip, fieldData, showFields)
+ return `${htmlPrefix}${content}${htmlSuffix}`
+ }
+ }
+ ],
+ trigger: 'hover'
+ })
+ }
+ return undefined
+ }
+
+ /**
+ * 构建 tooltip 内容
+ * @param tooltip
+ * @param fieldData
+ * @param showFields
+ * @returns {string}
+ */
+ buildTooltipContent = (tooltip, fieldData, showFields) => {
+ let content = ``
+ if (tooltip.customContent) {
+ content = tooltip.customContent
+ showFields.forEach(field => {
+ content = content.replace(`\${${field.split('@')[1]}}`, fieldData[field.split('@')[0]])
+ })
+ } else {
+ showFields.forEach(field => {
+ content += `${field.split('@')[1]}: ${
+ fieldData[field.split('@')[0]]
+ }` + }) + } + return content.replace(/\n/g, '
') + } + + /** + * 构建 label + * @param chart + * @param configList + */ + buildLabel = (chart, configList) => { + const xAxis = deepCopy(chart.xAxis) + + const customAttr = chart.customAttr ? parseJson(chart.customAttr) : null + if (customAttr?.label?.show) { + const { label } = customAttr + const data = chart.data?.tableRow || [] + let showFields = label.showFields || [] + if (!label.showFields || label.showFields.length === 0) { + showFields = [ + ...chart.xAxisExt.map(i => `${i.dataeaseName}@${i.name}`), + ...chart.xAxis.map(i => `${i.dataeaseName}@${i.name}`) + ] + } + data.forEach(item => { + const fieldData = { + ...item, + ...Object.fromEntries(this.mergeDetailsToMap(item.details)) + } + let content = label.customContent || '' + + if (content) { + showFields.forEach(field => { + const [fieldKey, fieldName] = field.split('@') + content = content.replace(`\${${fieldName}}`, fieldData[fieldKey]) + }) + } else { + content = showFields.map(field => fieldData[field.split('@')[0]]).join(',') + } + + content = content.replace(/\n/g, '') + item.textLayerContent = content + }) + + configList.push( + new PointLayer() + .source(data, { + parser: { + type: 'json', + x: xAxis[0].dataeaseName, + y: xAxis[1].dataeaseName + } + }) + .shape('textLayerContent', 'text') + .color(label.color) + .size(label.fontSize) + .style({ + textAllowOverlap: label.fullDisplay, + textAnchor: 'center', + textOffset: [0, 0], + fontFamily: chart.fontFamily ? chart.fontFamily : undefined + }) + ) + } + } + + setupDefaultOptions(chart: ChartObj): ChartObj { + chart.customAttr.label = { + ...chart.customAttr.label, + show: false + } + chart.customAttr.basicStyle = { + ...chart.customAttr.basicStyle, + mapSymbolOpacity: 5, + mapStyle: 'normal' + } + return chart + } +} diff --git a/frontend/src/data-visualization/chart/components/js/panel/charts/map/tooltip-carousel.ts b/frontend/src/data-visualization/chart/components/js/panel/charts/map/tooltip-carousel.ts new file mode 100644 index 0000000..31616a8 --- /dev/null +++ b/frontend/src/data-visualization/chart/components/js/panel/charts/map/tooltip-carousel.ts @@ -0,0 +1,657 @@ +import { Popup } from '@antv/l7' +import { Plot } from '@antv/l7plot/dist/lib/core/plot' +import isEmpty from 'lodash-es/isEmpty' +import { valueFormatter } from '@/data-visualization/chart/components/js/formatter' +import { parseJson } from '@/data-visualization/chart/components/js/util' +import { Scene } from '@antv/l7-scene' +import { deepCopy } from '@/data-visualization/utils/utils' + +export const configCarouselTooltip = (chart, view, data, scene, customSubArea?, drawOption?) => { + if (['bubble-map', 'map'].includes(chart.type)) { + data = view.source.data.dataArray + ?.filter(i => i.dimensionList?.length > 0) + .reduce((acc, current) => { + const existingItem = acc.find(obj => { + if (drawOption?.areaId?.startsWith('custom_')) { + return obj.areaName === current.areaName + } else { + return obj.name === current.name || (obj.adcode && obj.adcode === current.adcode) + } + }) + if (!existingItem) { + acc.push(current) + } + return acc + }, []) + } + if (carouselManagerInstances[chart.container]) { + const instances = carouselManagerInstances[chart.container] + instances.update(scene, chart, view, data, customSubArea, drawOption) + } else { + new CarouselManager(scene, chart, view, data, customSubArea, drawOption) + } +} +export const carouselManagerInstances: { [key: string]: CarouselManager } = {} + +/** + * 轮播管理类 + */ +export class CarouselManager { + /** + * 停留时长定时器 + * @private + */ + private popupTimeoutId: number | null = null + /** + * 轮播间隔定时器 + * @private + */ + private popupIntervalId: number | null = null + /** + * 是否暂停轮播 + * @private + */ + private isPaused = false + /** + * 当前显示的数据索引 + * @private + */ + private currentIndex = 0 + /** + * 地图实例，气泡地图用 + * @private + */ + private scene: Scene + private chart: Chart + /** + * 轮播弹窗的位置数据 + * @private + */ + private view: Plot + private data: any[] + /** + * 停留时长 + * @private + */ + private stayTime: number + /** + * 轮播间隔 + * @private + */ + private intervalTime: number + /** + * 轮播弹窗 + * @private + */ + private popup: Popup + + /** + * 自定义区域列表 + * @private + */ + private customSubArea: CustomGeoSubArea[] + + /** + * 渲染参数 + * @private + */ + private drawOption: L7PlotDrawOptions + + // 保存事件监听函数的引用 + private onMouseEnterHandler: () => void + private onMouseLeaveHandler: () => void + private onVisibilityChangeHandler: () => void + + constructor(scene, chart, view, data: any[], customSubArea, drawOption?) { + // 绑定事件处理函数 + this.onMouseEnterHandler = this.pauseCarouselPopups.bind(this) + this.onMouseLeaveHandler = this.resumeCarouselPopups.bind(this) + this.onVisibilityChangeHandler = this.handleVisibilityChange.bind(this) + this.clearExistingTimers = this.clearExistingTimers.bind(this) + this.init(scene, chart, view, data, customSubArea, drawOption) + } + + /** + * 更新轮播弹窗对象内容 + * @param scene + * @param chart + * @param view + * @param data + * @param customSubArea + */ + public update(scene, chart, view, data: any[], customSubArea, drawOption?) { + this.init(scene, chart, view, data, customSubArea, drawOption) + } + + /** + * 初始化轮播弹窗 + * @param scene + * @param chart + * @param view + * @param data + * @private + */ + private init(scene, chart, view, data: any[], customSubArea, drawOption?) { + this.view = view + this.chart = chart + this.scene = scene + this.data = data + this.popup = null + this.currentIndex = 0 + this.customSubArea = customSubArea + this.drawOption = drawOption + this.clearPreviousInstance(this.chart.container) + if ( + this.chart.customAttr?.tooltip?.show && + this.chart.customAttr?.tooltip?.carousel?.enable && + this.data.length > 0 + ) { + this.popup = new Popup({ closeButton: false, maxWidth: 600 }) + const carousel = this.chart.customAttr?.tooltip?.carousel + this.stayTime = carousel.stayTime * 1000 + this.intervalTime = carousel.intervalTime * 1000 + this.startCarouselPopups() + const divElement = document.getElementById(this.chart.container) + divElement.addEventListener('mouseenter', this.pauseCarouselPopups) + divElement.addEventListener('mouseleave', this.resumeCarouselPopups) + // 移动端符号地图不支持mouseenter和mouseleave事件，这里特殊处理一下 + if (this.chart.type === 'symbolic-map') { + // 监听符号触摸事件, 暂停轮播 + scene?.getLayers()?.[0]?.addListener('touchend', () => { + this.pauseCarouselPopups() + }) + // 地图空白区域触摸事件, 启动轮播 + scene?.getMapCanvasContainer()?.addEventListener('touchend', () => { + this.resumeCarouselPopups() + }) + } + // 监听页面可见性变化 + document.addEventListener('visibilitychange', this.handleVisibilityChange) + carouselManagerInstances[this.chart.container] = this + } + } + + private handleVisibilityChange = (): void => { + if (document.hidden) { + this.clearPreviousInstance(this.chart.container) + } else { + this.startCarouselPopups() + } + } + + /** + * 清除之前的实例数据 + * @param containerId + * @private + */ + private clearPreviousInstance(containerId: string): void { + if (carouselManagerInstances[containerId]) { + const instance = carouselManagerInstances[containerId] + this.clearExistingTimers() + instance.popup?.remove() + instance.removeStyle() + } + } + + /** + * 开始轮播 + * @private + */ + private startCarouselPopups(): void { + this.clearExistingTimers() + this.carouselPopups() + } + + /** + * 鼠标移入暂停轮播 + */ + private pauseCarouselPopups = (): void => { + if (this.popup) { + this.popup?.remove() + } + this.removeStyle() + this.isPaused = true + this.clearExistingTimers() + } + + /** + * 鼠标移出开始轮播 + */ + private resumeCarouselPopups = (): void => { + if (this.isPaused) { + this.isPaused = false + this.startCarouselPopups() + } + } + + /** + * 管理轮播弹窗的显示 + * + * 此方法用于处理轮播弹窗的显示逻辑它会根据当前的索引显示对应的弹窗， + * 并在一定时间后自动移除当前弹窗并显示下一个弹窗 + * + * @private + */ + private carouselPopups(): void { + const showPopup = (index: number): void => { + this.removeStyle() + const containerElement = document.getElementById(this.chart.container) + if (containerElement) { + if (this.chart.type === 'symbolic-map') { + // 轮播进行时，隐藏隐藏鼠标悬浮的tooltip + const mouseTooltip = containerElement.getElementsByClassName( + 'l7-popup-' + this.chart.container + ) + for (const tooltip of Array.from(mouseTooltip)) { + const tooltipElement = tooltip as HTMLElement + tooltipElement.classList.add('l7-popup-hide') + } + this.createSymbolicMapPopup(index) + } else { + if (this.chart.type === 'map') { + // 轮播进行时，隐藏隐藏鼠标悬浮的tooltip + const mouseTooltip = containerElement.getElementsByClassName('l7plot-tooltip-container') + for (const tooltip of Array.from(mouseTooltip)) { + const tooltipElement = tooltip as HTMLElement + tooltipElement.style.display = 'none' + } + } + this.createPopup(index) + } + this.clearExistingTimers() + this.popupTimeoutId = window.setTimeout(() => { + this.currentIndex++ + this.popup?.remove() + this.cancelHighlightLayer(index) + if (this.currentIndex >= this.data.length) { + this.currentIndex = 0 + } + this.popupIntervalId = window.setTimeout(() => { + showPopup(this.currentIndex) + }, this.intervalTime) + }, this.stayTime) + } else { + this.clearExistingTimers() + } + } + + showPopup(this.currentIndex) + } + + /** + * 清除定时器 + * @private + */ + private readonly clearExistingTimers = (): void => { + if (this.popupTimeoutId !== null) { + clearTimeout(this.popupTimeoutId) + this.popupTimeoutId = 0 + } + if (this.popupIntervalId !== null) { + clearInterval(this.popupIntervalId) + this.popupIntervalId = 0 + } + } + + /** + * 移除样式 + * 每次创建弹窗前移除之前的样式 + * @private + */ + private removeStyle(): void { + const styleToRemove = document.getElementById('style-' + this.chart.container) + if (styleToRemove) { + styleToRemove.remove() + styleToRemove.parentNode?.removeChild(styleToRemove) + } + } + + /** + * 创建弹窗信息 + * @param index + * @private + */ + private createPopup(index: number): void { + const tooltipStyle = this.view.tooltip.options.domStyles + const tooltipBackgroundColor = tooltipStyle['l7plot-tooltip']['background-color'] + const tooltipFontSize = tooltipStyle['l7plot-tooltip']['font-size'] + const style = document.createElement('style') + style.id = 'style-' + this.chart.container + style.innerHTML = ` + #${this.chart.container} .l7-popup-content { + background-color: ${tooltipBackgroundColor} !important; + font-size: ${tooltipFontSize}; + padding: 10px 10px 6px; + line-height: 1.6; + } + #${this.chart.container} .l7-popup-tip { + border-top-color: ${tooltipBackgroundColor} !important; + } + ` + document.head.appendChild(style) + + const popupData = this.getPopupData(index) + if (popupData.data) { + let tooltipItem = '' + this.getTooltipItems(popupData.data).forEach(fieldData => { + tooltipItem += ` +
+
+ `
+
+ this.popup.setLngLat({ lng: popupData.centroid[0], lat: popupData.centroid[1] })
+ this.popup.setHTML(html)
+ this.popup.closeButton = false
+ this.view.addLayer(this.popup)
+ // 地图层高亮
+ this.view.scene
+ .getLayers()
+ ?.find(i => i.name === 'highlightLayer')
+ ?.setData(this.getActiveData(index))
+ if (this.chart.type === 'bubble-map') {
+ // 气泡地图高亮
+ const { _id } = this.view.scene
+ .getLayers()
+ ?.find(i => i.name === 'bubbleLayer')
+ ?.layerSource.data.dataArray.find(i => i.name === this.data[index].name)
+ this.view.scene
+ .getLayers()
+ ?.find(i => i.name === 'bubbleLayer' && i.coordCenter)
+ ?.setActive(_id, { color: 'rgba(30,90,255,1)' })
+ }
+ }
+ }
+
+ private getActiveData(index): any {
+ if (this.drawOption?.areaId?.startsWith('custom_')) {
+ const result = {
+ type: 'FeatureCollection',
+ features: []
+ }
+ const area = this.customSubArea.find(a => a.name === this.data[index].areaName)
+ const areaMap = this.view.currentDistrictData.features.reduce((p, n) => {
+ p['156' + n.properties.adcode] = n
+ return p
+ }, {})
+ area?.scopeArr?.forEach(s => {
+ if (areaMap[s]) {
+ result.features.push(areaMap[s])
+ }
+ })
+ return result
+ }
+ return {
+ type: 'FeatureCollection',
+ features: [
+ this.view.currentDistrictData.features.find(
+ i => i.properties.name === this.data[index].name
+ )
+ ]
+ }
+ }
+
+ /**
+ * 获取弹窗信息，包括原始数据及位置信息
+ * @param index
+ * @private
+ */
+ private getPopupData(index: number): any {
+ if (this.drawOption?.areaId?.startsWith('custom_')) {
+ const data = this.data[index]
+ const area = this.customSubArea?.find(a => a.name === data.areaName)
+ data.name = data.areaName
+ return {
+ data,
+ centroid: area.centroid
+ }
+ } else {
+ return {
+ data: this.data[index],
+ centroid: this.view.currentDistrictData.features.find(
+ i => i.properties.name === this.data[index].name
+ )?.properties.centroid
+ }
+ }
+ }
+
+ /**
+ * 将对象转换为 CSS 属性
+ * @param obj
+ * @private
+ */
+ private objectToSemicolonSeparated(obj: any): string {
+ let result = ''
+ for (const key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ result += `${this.convertToSnakeCase(key)}:${obj[key]};`
+ }
+ }
+ return result
+ }
+
+ private cancelHighlightLayer(index?: number): void {
+ this.view.scene
+ ?.getLayers()
+ ?.find(i => i.name === 'highlightLayer')
+ ?.setData({ type: 'FeatureCollection', features: [] })
+ if (this.chart.type === 'bubble-map') {
+ const { _id } = this.view.scene
+ ?.getLayers()
+ ?.find(i => i.name === 'bubbleLayer')
+ ?.layerSource.data.dataArray.find(i => i.name === this.data[index].name)
+ this.view.scene
+ .getLayers()
+ ?.find(i => i.name === 'bubbleLayer' && i.coordCenter)
+ ?.setActive(_id, {
+ color: this.view.scene
+ .getLayers()
+ .find(i => i.name === 'bubbleLayer')
+ .styleAttributeService.getLayerStyleAttribute('color').scale.field
+ })
+ }
+ if (this.chart.type === 'symbolic-map') {
+ const lngField = this.chart.xAxis[0].dataeaseName
+ const latField = this.chart.xAxis[1].dataeaseName
+ const { _id } = this.scene
+ ?.getLayers()
+ ?.find(i => i.type === 'PointLayer')
+ ?.layerSource.data.dataArray.find(i => {
+ const targetLng = this.data[index][lngField]
+ const targetLat = this.data[index][latField]
+ return i[lngField] === targetLng && i[latField] === targetLat
+ })
+ this.scene
+ .getLayers()
+ ?.find(i => i.type === 'PointLayer' && i.coordCenter)
+ ?.setActive(_id, {
+ color: this.scene
+ .getLayers()
+ .find(i => i.type === 'PointLayer')
+ .styleAttributeService.getLayerStyleAttribute('color').scale.field
+ })
+ }
+ }
+
+ /**
+ * 将驼峰式命名转换为蛇形命名
+ * @param str
+ * @private
+ */
+ private convertToSnakeCase(str: string): string {
+ return str.replace(/([A-Z])/g, match => '-' + match.toLowerCase())
+ }
+
+ /**
+ * 获取弹窗字段信息
+ * 与tooltip要显示的内容一致
+ * @param data
+ * @private
+ */
+ private getTooltipItems(data) {
+ const result = []
+ const customAttr = parseJson(this.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${popupData.data.name}
+ -
+ ${tooltipItem}
+
`
+ const htmlSuffix = '
'
+ const data = this.view.sourceOption.data[index]
+ if (data && data.details?.length) {
+ const fieldData = {
+ ...data,
+ ...Object.fromEntries(mergeDetailsToMap(data.details))
+ }
+ const content = buildTooltipContent(tooltip, fieldData, showFields)
+ const html = `${htmlPrefix}${content}${htmlSuffix}`
+ this.popup.setLngLat({
+ lng: data[lngField],
+ lat: data[latField]
+ })
+ this.popup.setHTML(html)
+ this.popup.closeButton = false
+ this.scene.addPopup(this.popup)
+ this.popup.addTo(this.scene)
+ const { _id } = this.scene
+ .getLayers()
+ ?.find(i => i.type === 'PointLayer')
+ ?.layerSource.data.dataArray.find(i => {
+ const targetLng = this.data[index][lngField]
+ const targetLat = this.data[index][latField]
+ return i[lngField] === targetLng && i[latField] === targetLat
+ })
+ this.scene
+ .getLayers()
+ ?.find(i => i.type === 'PointLayer' && i.coordCenter)
+ ?.setActive(_id, { color: 'rgba(30,90,255,1)' })
+ }
+ }
+ return undefined
+ }
+
+ /**
+ * 构建 tooltip 内容
+ * @param tooltip
+ * @param fieldData
+ * @param showFields
+ * @returns {string}
+ */
+ const buildTooltipContent = (tooltip, fieldData, showFields) => {
+ let content = ''
+ if (tooltip.customContent) {
+ content = tooltip.customContent
+ showFields.forEach(field => {
+ content = content.replace(`\${${field.split('@')[1]}}`, fieldData[field.split('@')[0]])
+ })
+ } else {
+ showFields.forEach(field => {
+ content += `${field.split('@')[1]}: ${
+ fieldData[field.split('@')[0]]
+ }` + }) + } + return content.replace(/\n/g, '
') + } + /** + * 合并详情到 map + * @param details + * @returns {Map
' + '
'
+export function configAxisLabelLengthLimit(chart, plot, triggerObjName) {
+ // 设置触发事件的名称，如果未传入，则默认为 'axis-label'
+ const triggerName = triggerObjName || 'axis-label'
+
+ // 判断是否是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轴标题的原始文本和截断后的文本
+ ev.view.options.axes.yAxisExt.title.originalText = yAxis.name
+ ev.view.options.axes.yAxisExt.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, index) => {
+ // 定义后，在 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: O) {
+ 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 {
+ ...options.columnStyle,
+ ...options.barStyle,
+ ...(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 tmpOption = {
+ ...options,
+ rawFields,
+ columnStyle: columnStyle,
+ barStyle: columnStyle,
+ tooltip: {
+ ...options.tooltip,
+ ...(options.tooltip['customItems']
+ ? {}
+ : {
+ customItems: originalItems => {
+ originalItems.forEach(item => {
+ if (item.data?.[colorField]) {
+ item.color = item.data[colorField][0]
+ }
+ })
+ return originalItems
+ }
+ })
+ },
+ ...(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 = (newChart, newData, container) => {
+ /**
+ * 辅助函数：移除空数据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 = tI18n('data_set.no_data')
+ emptyDom.setAttribute(
+ 'style',
+ `position: absolute;
+ left: 45%;
+ top: 50%;`
+ )
+ const parent = document.getElementById(container)
+ parent.insertBefore(emptyDom, parent.firstChild)
+ newChart.destroy()
+ }
+}
diff --git a/frontend/src/data-visualization/chart/components/js/panel/common/common_table.ts b/frontend/src/data-visualization/chart/components/js/panel/common/common_table.ts
new file mode 100644
index 0000000..16fb754
--- /dev/null
+++ b/frontend/src/data-visualization/chart/components/js/panel/common/common_table.ts
@@ -0,0 +1,2021 @@
+/* eslint-disable prettier/prettier */
+import {
+ copyString,
+ hexColorToRGBA,
+ isAlphaColor,
+ isTransparent,
+ parseJson,
+ resetRgbOpacity
+} from '../../util'
+import {
+ DEFAULT_BASIC_STYLE,
+ DEFAULT_TABLE_CELL,
+ DEFAULT_TABLE_HEADER
+} from '@/data-visualization/chart/components/editor/util/chart'
+import {
+ BaseTooltip,
+ DataCellBrushSelection,
+ FONT_FAMILY,
+ getAutoAdjustPosition,
+ getEmptyPlaceholder,
+ getPolygonPoints,
+ getTooltipDefaultOptions,
+ InteractionName,
+ InteractionStateName,
+ MergedCell,
+ MergedCellInfo,
+ type Meta,
+ type Node,
+ type PivotSheet,
+ renderPolygon,
+ renderText,
+ S2DataConfig,
+ S2Event,
+ S2Options,
+ S2Theme,
+ SERIES_NUMBER_FIELD,
+ setTooltipContainerStyle,
+ SHAPE_STYLE_MAP,
+ SpreadSheet,
+ Style,
+ TableColCell,
+ TableDataCell,
+ updateShapeAttr,
+ ViewMeta
+} from '@antv/s2'
+import { cloneDeep, filter, find, intersection, keys, merge, repeat } from 'lodash-es'
+import { createVNode, render } from 'vue'
+import TableTooltip from '@/data-visualization/chart/components/editor/common/TableTooltip.vue'
+import Exceljs from 'exceljs'
+import { saveAs } from 'file-saver'
+import { ElMessage } from 'element-plus-secondary'
+import { useI18n } from '@/data-visualization/hooks/web/useI18n'
+const { t: i18nt } = useI18n()
+
+export function getCustomTheme(chart: Chart): S2Theme {
+ const headerColor = hexColorToRGBA(
+ DEFAULT_TABLE_HEADER.tableHeaderBgColor,
+ DEFAULT_BASIC_STYLE.alpha
+ )
+ const headerAlign = DEFAULT_TABLE_HEADER.tableHeaderAlign
+ const itemColor = hexColorToRGBA(DEFAULT_TABLE_CELL.tableItemBgColor, DEFAULT_BASIC_STYLE.alpha)
+ const itemAlign = DEFAULT_TABLE_CELL.tableItemAlign
+ const borderColor = hexColorToRGBA(
+ DEFAULT_BASIC_STYLE.tableBorderColor,
+ DEFAULT_BASIC_STYLE.alpha
+ )
+ const scrollBarColor = DEFAULT_BASIC_STYLE.tableScrollBarColor
+ const scrollBarHoverColor = resetRgbOpacity(scrollBarColor, 3)
+ const textFontFamily =
+ chart.fontFamily && chart.fontFamily !== 'inherit' ? chart.fontFamily : FONT_FAMILY
+ const theme: S2Theme = {
+ background: {
+ color: '#00000000'
+ },
+ splitLine: {
+ horizontalBorderColor: borderColor,
+ horizontalBorderColorOpacity: 1,
+ horizontalBorderWidth: 1,
+ verticalBorderColor: borderColor,
+ verticalBorderColorOpacity: 1,
+ verticalBorderWidth: 1,
+ showShadow: false
+ },
+ cornerCell: {
+ cell: {
+ backgroundColor: headerColor,
+ horizontalBorderColor: borderColor,
+ verticalBorderColor: borderColor
+ },
+ text: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ bolderText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ measureText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ }
+ },
+ rowCell: {
+ cell: {
+ backgroundColor: headerColor,
+ horizontalBorderColor: borderColor,
+ verticalBorderColor: borderColor
+ },
+ text: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ textBaseline: 'middle',
+ fontFamily: textFontFamily
+ },
+ bolderText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ measureText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ seriesText: {
+ fill: DEFAULT_TABLE_CELL.tableItemBgColor,
+ fontSize: DEFAULT_TABLE_CELL.tableItemFontSize,
+ textAlign: itemAlign,
+ fontFamily: textFontFamily
+ }
+ },
+ colCell: {
+ cell: {
+ backgroundColor: headerColor,
+ horizontalBorderColor: borderColor,
+ verticalBorderColor: borderColor
+ },
+ text: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ bolderText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ },
+ measureText: {
+ fill: DEFAULT_TABLE_HEADER.tableHeaderFontColor,
+ fontSize: DEFAULT_TABLE_HEADER.tableTitleFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ }
+ },
+ dataCell: {
+ cell: {
+ backgroundColor: itemColor,
+ horizontalBorderColor: borderColor,
+ verticalBorderColor: borderColor
+ },
+ text: {
+ fill: DEFAULT_TABLE_CELL.tableFontColor,
+ fontSize: DEFAULT_TABLE_CELL.tableItemFontSize,
+ textAlign: itemAlign,
+ fontFamily: textFontFamily
+ },
+ bolderText: {
+ fill: DEFAULT_TABLE_CELL.tableFontColor,
+ fontSize: DEFAULT_TABLE_CELL.tableItemFontSize,
+ textAlign: itemAlign,
+ fontFamily: textFontFamily
+ },
+ measureText: {
+ fill: DEFAULT_TABLE_CELL.tableFontColor,
+ fontSize: DEFAULT_TABLE_CELL.tableItemFontSize,
+ textAlign: headerAlign,
+ fontFamily: textFontFamily
+ }
+ },
+ scrollBar: {
+ thumbColor: scrollBarColor,
+ thumbHoverColor: scrollBarHoverColor,
+ size: 8,
+ hoverSize: 12
+ }
+ }
+
+ let customAttr: DeepPartial{title}
' + '