forked from github/dataease
fix(图表-热力图): 修复编辑状态下调整容器尺寸,没有自动刷新大小的问题
This commit is contained in:
parent
3a03d6c06d
commit
5fa1ddebc5
@ -72,7 +72,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
limit: 1
|
limit: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
protected getDefaultLength = (chart, l) => {
|
||||||
|
const containerDom = document.getElementById(chart.container)
|
||||||
|
const containerHeight = containerDom?.clientHeight || 100
|
||||||
|
const containerWidth = containerDom?.clientWidth || 100
|
||||||
|
let defaultLength = containerHeight - containerHeight * 0.5
|
||||||
|
if (l.orient !== 'vertical') {
|
||||||
|
defaultLength = containerWidth - containerWidth * 0.5
|
||||||
|
}
|
||||||
|
return defaultLength
|
||||||
|
}
|
||||||
async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
|
async drawChart(drawOptions: G2PlotDrawOptions<Heatmap>): Promise<Heatmap> {
|
||||||
const { chart, container, action } = drawOptions
|
const { chart, container, action } = drawOptions
|
||||||
const xAxis = deepCopy(chart.xAxis)
|
const xAxis = deepCopy(chart.xAxis)
|
||||||
@ -84,8 +93,6 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
const xField = xAxis[0].dataeaseName
|
const xField = xAxis[0].dataeaseName
|
||||||
const xFieldExt = xAxisExt[0].dataeaseName
|
const xFieldExt = xAxisExt[0].dataeaseName
|
||||||
const extColorField = extColor[0].dataeaseName
|
const extColorField = extColor[0].dataeaseName
|
||||||
const containerDom = document.getElementById(container)
|
|
||||||
const containerHeight = containerDom?.clientHeight || 100
|
|
||||||
// data
|
// data
|
||||||
const data = cloneDeep(chart.data.tableRow)
|
const data = cloneDeep(chart.data.tableRow)
|
||||||
data.forEach(i => {
|
data.forEach(i => {
|
||||||
@ -114,13 +121,13 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
layout: 'vertical',
|
layout: 'vertical',
|
||||||
position: 'right',
|
position: 'right',
|
||||||
slidable: true,
|
slidable: true,
|
||||||
maxHeight: containerHeight - containerHeight * 0.2,
|
|
||||||
label: {
|
label: {
|
||||||
align: 'left',
|
align: 'left',
|
||||||
spacing: 10
|
spacing: 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
chart.container = container
|
||||||
const options = this.setupOptions(chart, initOptions)
|
const options = this.setupOptions(chart, initOptions)
|
||||||
const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
|
const { Heatmap } = await import('@antv/g2plot/esm/plots/heatmap')
|
||||||
const newChart = new Heatmap(container, options)
|
const newChart = new Heatmap(container, options)
|
||||||
@ -166,18 +173,10 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
newChart.on('afterrender', ev => {
|
newChart.on('afterrender', ev => {
|
||||||
const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
|
const l = JSON.parse(JSON.stringify(parseJson(chart.customStyle).legend))
|
||||||
if (l.show) {
|
if (l.show) {
|
||||||
const extColor = deepCopy(chart.extColor)
|
const rail = ev.view.getController('legend').option[extColor[0].dataeaseName]?.['rail']
|
||||||
const containerDom = document.getElementById(container)
|
if (rail) {
|
||||||
const containerHeight = containerDom?.clientHeight || 100
|
rail.defaultLength = this.getDefaultLength(chart, l)
|
||||||
const containerWidth = containerDom?.clientWidth || 100
|
|
||||||
let defaultLength = getLegend(chart)
|
|
||||||
if (l.orient === 'vertical') {
|
|
||||||
defaultLength = containerHeight - containerHeight * 0.5
|
|
||||||
} else {
|
|
||||||
defaultLength = containerWidth - containerWidth * 0.5
|
|
||||||
}
|
}
|
||||||
ev.view.getController('legend').option[extColor[0].dataeaseName]['rail'].defaultLength =
|
|
||||||
defaultLength
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return newChart
|
return newChart
|
||||||
@ -251,12 +250,16 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
tmpOptions.legend.minWidth = 10
|
tmpOptions.legend.minWidth = 10
|
||||||
tmpOptions.legend.maxHeight = 600
|
tmpOptions.legend.maxHeight = 600
|
||||||
tmpOptions.legend.maxWidth = 600
|
tmpOptions.legend.maxWidth = 600
|
||||||
|
const containerDom = document.getElementById(chart.container)
|
||||||
|
const containerHeight = containerDom?.clientHeight || 100
|
||||||
|
const containerWidth = containerDom?.clientWidth || 100
|
||||||
|
let defaultLength = containerHeight - containerHeight * 0.5
|
||||||
if (l.orient === 'vertical') {
|
if (l.orient === 'vertical') {
|
||||||
tmpOptions.legend.offsetY = -5
|
tmpOptions.legend.offsetY = -5
|
||||||
|
} else {
|
||||||
|
defaultLength = containerWidth - containerWidth * 0.5
|
||||||
}
|
}
|
||||||
tmpOptions.legend.rail = {
|
tmpOptions.legend.rail = { defaultLength: defaultLength }
|
||||||
defaultLength: 100
|
|
||||||
}
|
|
||||||
tmpOptions.legend.label = {
|
tmpOptions.legend.label = {
|
||||||
spacing: 10,
|
spacing: 10,
|
||||||
style: {
|
style: {
|
||||||
@ -272,6 +275,7 @@ export class TableHeatmap extends G2PlotChartView<HeatmapOptions, Heatmap> {
|
|||||||
chart.customStyle.legend.orient = 'vertical'
|
chart.customStyle.legend.orient = 'vertical'
|
||||||
chart.customStyle.legend.vPosition = 'center'
|
chart.customStyle.legend.vPosition = 'center'
|
||||||
chart.customStyle.legend.hPosition = 'right'
|
chart.customStyle.legend.hPosition = 'right'
|
||||||
|
chart.customStyle.legend.rail = { defaultLength: 100 }
|
||||||
return chart
|
return chart
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user