feat: change chat config

This commit is contained in:
ulleo
2025-07-04 09:39:58 +08:00
parent 705aa9642e
commit 269f16af28
4 changed files with 160 additions and 92 deletions
+40 -22
View File
@@ -1,5 +1,6 @@
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import type { G2Spec } from '@antv/g2'
export class Bar extends BaseG2Chart {
constructor(id: string) {
@@ -17,37 +18,54 @@ export class Bar extends BaseG2Chart {
return
}
this.chart
?.interval()
.coordinate({ transform: [{ type: 'transpose' }] })
.data(data)
.encode('x', x[0].value)
.encode('y', y[0].value)
.axis({
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
data: data,
coordinate: { transform: [{ type: 'transpose' }] },
encode: {
x: x[0].value,
y: y[0].value,
color: series.length > 0 ? series[0].value : undefined,
},
axis: {
x: { title: x[0].name },
y: { title: y[0].name },
})
.scale('x', {
nice: true,
})
.scale('y', {
nice: true,
})
.interaction('elementHighlight', { background: true })
.tooltip((data) => {
},
scale: {
x: {
nice: true,
},
y: {
nice: true,
},
},
interaction: {
elementHighlight: { background: true },
},
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
.label({
text: y[0].value,
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
})
},
labels: [
{
text: y[0].value,
transform: [
{ type: 'overlapDodgeY' },
{ type: 'contrastReverse' },
{ type: 'overlapHide' },
],
},
],
} as G2Spec
if (series.length > 0) {
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
options.transform = [{ type: 'stackY' }]
}
this.chart.options(options)
}
}
@@ -1,5 +1,6 @@
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import type { G2Spec } from '@antv/g2'
export class Column extends BaseG2Chart {
constructor(id: string) {
@@ -17,36 +18,55 @@ export class Column extends BaseG2Chart {
return
}
this.chart
?.interval()
.data(data)
.encode('x', x[0].value)
.encode('y', y[0].value)
.axis({
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
data: data,
encode: {
x: x[0].value,
y: y[0].value,
color: series.length > 0 ? series[0].value : undefined,
},
axis: {
x: { title: x[0].name },
y: { title: y[0].name },
})
.scale('x', {
nice: true,
})
.scale('y', {
nice: true,
})
.interaction('elementHighlight', { background: true })
.tooltip((data) => {
},
scale: {
x: {
nice: true,
},
y: {
nice: true,
},
},
interaction: {
elementHighlight: { background: true },
},
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
.label({
text: y[0].value,
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
})
},
labels: [
{
text: y[0].value,
position: 'top',
dy: -25,
transform: [
{ type: 'overlapDodgeY' },
{ type: 'contrastReverse' },
{ type: 'overlapHide' },
],
},
],
} as G2Spec
if (series.length > 0) {
this.chart?.encode('color', series[0].value).transform({ type: 'stackY' })
options.transform = [{ type: 'stackY' }]
}
this.chart.options(options)
}
}
@@ -1,5 +1,6 @@
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import type { G2Spec } from '@antv/g2'
export class Line extends BaseG2Chart {
constructor(id: string) {
@@ -17,43 +18,62 @@ export class Line extends BaseG2Chart {
return
}
this.chart
?.data(data)
.encode('x', x[0].value)
.encode('y', y[0].value)
.axis({
const options: G2Spec = {
...this.chart.options(),
type: 'view',
data: data,
encode: {
x: x[0].value,
y: y[0].value,
color: series.length > 0 ? series[0].value : undefined,
},
axis: {
x: { title: x[0].name },
y: { title: y[0].name },
})
.scale('x', {
nice: true,
})
.scale('y', {
nice: true,
})
if (series.length > 0) {
this.chart?.encode('color', series[0].value)
}
this.chart
?.line()
.label({
text: y[0].value,
style: {
dx: -10,
dy: -12,
},
scale: {
x: {
nice: true,
},
transform: [{ type: 'overlapDodgeY' }, { type: 'exceedAdjust' }, { type: 'overlapHide' }],
})
.tooltip((data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
})
y: {
nice: true,
},
},
children: [
{
type: 'line',
labels: [
{
text: y[0].value,
style: {
dx: -10,
dy: -12,
},
transform: [
{ type: 'overlapDodgeY' },
{ type: 'exceedAdjust' },
{ type: 'overlapHide' },
],
},
],
tooltip: (data) => {
if (series.length > 0) {
return { name: data[series[0].value], value: data[y[0].value] }
} else {
return { name: y[0].name, value: data[y[0].value] }
}
},
},
{
type: 'point',
style: {
fill: 'white',
},
tooltip: false,
},
],
} as G2Spec
this.chart?.point().style('fill', 'white').tooltip(false)
this.chart.options(options)
}
}
+25 -15
View File
@@ -1,5 +1,6 @@
import { BaseG2Chart } from '@/views/chat/component/BaseG2Chart.ts'
import type { ChartAxis, ChartData } from '@/views/chat/component/BaseChart.ts'
import type { G2Spec } from '@antv/g2'
export class Pie extends BaseG2Chart {
constructor(id: string) {
@@ -15,21 +16,30 @@ export class Pie extends BaseG2Chart {
return
}
this.chart.coordinate({ type: 'theta', outerRadius: 0.8 })
this.chart
?.interval()
.transform({ type: 'stackY' })
.data(data)
.encode('y', y[0].value)
.encode('color', series[0].value)
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
.label({
position: 'outside',
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
})
.tooltip((data) => {
const options: G2Spec = {
...this.chart.options(),
type: 'interval',
coordinate: { type: 'theta', outerRadius: 0.8 },
transform: [{ type: 'stackY' }],
data: data,
encode: {
y: y[0].value,
color: series[0].value,
},
legend: {
color: { position: 'bottom', layout: { justifyContent: 'center' } },
},
labels: [
{
position: 'outside',
text: (data: any) => `${data[series[0].value]}: ${data[y[0].value]}`,
},
],
tooltip: (data) => {
return { name: y[0].name, value: data[y[0].value] }
})
},
}
this.chart.options(options)
}
}