diff --git a/core/core-frontend/src/models/chart/chart-senior.d.ts b/core/core-frontend/src/models/chart/chart-senior.d.ts
index ab9d0cdceb..30747503dd 100644
--- a/core/core-frontend/src/models/chart/chart-senior.d.ts
+++ b/core/core-frontend/src/models/chart/chart-senior.d.ts
@@ -123,6 +123,10 @@ declare interface ChartThreshold {
* 仪表盘阈值: x,y,z
*/
gaugeThreshold: string
+ /**
+ * 水波图阈值: x,y,z
+ */
+ liquidThreshold: string
/**
* 指标卡阈值
*/
diff --git a/core/core-frontend/src/models/chart/chart.d.ts b/core/core-frontend/src/models/chart/chart.d.ts
index a39be37515..9de6ebdd0e 100644
--- a/core/core-frontend/src/models/chart/chart.d.ts
+++ b/core/core-frontend/src/models/chart/chart.d.ts
@@ -117,6 +117,14 @@ declare interface Axis extends ChartViewField {
* 维度/指标分组类型
*/
groupType: 'q' | 'd'
+ /**
+ * 排序规则
+ */
+ sort: 'asc' | 'desc' | 'none' | 'custom_sort'
+ /**
+ * 自定义排序项
+ */
+ customSort: string[]
}
declare interface ChartViewField {
/**
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
index f10de480e6..589eb39de0 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@@ -61,10 +61,10 @@ const init = () => {
const changeThreshold = () => {
emit('onThresholdChange', state.thresholdForm)
}
-const gaugeThresholdChange = () => {
+const changeSplitThreshold = (threshold: string) => {
// check input
- if (state.thresholdForm.gaugeThreshold) {
- const arr = state.thresholdForm.gaugeThreshold.split(',')
+ if (threshold) {
+ const arr = threshold.split(',')
for (let i = 0; i < arr.length; i++) {
const ele = arr[i]
if (parseFloat(ele).toString() === 'NaN' || parseFloat(ele) <= 0 || parseFloat(ele) >= 100) {
@@ -246,7 +246,7 @@ init()
style="width: 100px; margin: 0 10px"
size="small"
clearable
- @change="gaugeThresholdChange"
+ @change="changeSplitThreshold"
/>
,100
@@ -260,6 +260,36 @@ init()
+
+
+
+ 0,
+
+ ,100
+
+
+
+ 阈值设置,决定水波图颜色,为空则不开启阈值,范围(0-100),逐级递增
+
+ 例如:输入 30,70;表示:分为3段,分别为[0,30],(30,70],(70,100]
+
+
+
+
+
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 29e38eebe1..4e7bd2fa6e 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -675,6 +675,7 @@ export const DEFAULT_ASSIST_LINE_CFG: ChartAssistLineCfg = {
export const DEFAULT_THRESHOLD: ChartThreshold = {
enable: false,
gaugeThreshold: '',
+ liquidThreshold: '',
labelThreshold: [],
tableThreshold: [],
textLabelThreshold: []
diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
index 40de8d9e64..bdbd824b2d 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts
@@ -19,7 +19,8 @@ export class Liquid extends G2PlotChartView {
'basic-style-selector',
'label-selector',
'misc-selector',
- 'title-selector'
+ 'title-selector',
+ 'threshold'
]
propertyInner: EditorPropertyInner = {
'background-overall-component': ['all'],
@@ -37,7 +38,8 @@ export class Liquid extends G2PlotChartView {
'fontFamily',
'letterSpace',
'fontShadow'
- ]
+ ],
+ threshold: ['liquidThreshold']
}
axis: AxisType[] = ['yAxis', 'filter']
axisConfig: AxisConfig = {
@@ -147,6 +149,31 @@ export class Liquid extends G2PlotChartView {
}
}
+ protected configThreshold(chart: Chart, options: LiquidOptions): LiquidOptions {
+ const senior = parseJson(chart.senior)
+ if (senior?.threshold?.enable) {
+ const { liquidThreshold } = senior?.threshold
+ if (liquidThreshold) {
+ const { paletteQualitative10: colors } = (options.theme as any).styleSheet
+ const liquidStyle = () => {
+ const thresholdArr = liquidThreshold.split(',')
+ let index = 0
+ thresholdArr.forEach((v, i) => {
+ if (options.percent > parseFloat(v) / 100) {
+ index = i + 1
+ }
+ })
+ return {
+ fill: colors[index % colors.length],
+ stroke: colors[index % colors.length]
+ }
+ }
+ return { ...options, liquidStyle }
+ }
+ }
+ return options
+ }
+
setupDefaultOptions(chart: ChartObj): ChartObj {
chart.customAttr.label = {
...chart.customAttr.label,
@@ -162,7 +189,12 @@ export class Liquid extends G2PlotChartView {
}
protected setupOptions(chart: Chart, options: LiquidOptions): LiquidOptions {
- return flow(this.configTheme, this.configMisc, this.configLabel)(chart, options)
+ return flow(
+ this.configTheme,
+ this.configMisc,
+ this.configLabel,
+ this.configThreshold
+ )(chart, options)
}
constructor() {
super('liquid', DEFAULT_LIQUID_DATA)