diff --git a/frontend/src/icons/svg/gauge.svg b/frontend/src/icons/svg/gauge.svg
new file mode 100644
index 0000000000..c21c854d1b
--- /dev/null
+++ b/frontend/src/icons/svg/gauge.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/icons/svg/scatter.svg b/frontend/src/icons/svg/scatter.svg
new file mode 100644
index 0000000000..a07462aac1
--- /dev/null
+++ b/frontend/src/icons/svg/scatter.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/icons/svg/text.svg b/frontend/src/icons/svg/text.svg
new file mode 100644
index 0000000000..9c52a5a327
--- /dev/null
+++ b/frontend/src/icons/svg/text.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index c23e548dc0..347f79a62f 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -706,7 +706,9 @@ export default {
table_header_bg: '表头背景',
table_item_bg: '表格背景',
table_item_font_color: '字体颜色',
- stripe: '斑马纹'
+ stripe: '斑马纹',
+ start_angle: '起始角度',
+ end_angle: '结束角度'
},
dataset: {
datalist: '数据集',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index a9efd53629..b59fd21f7e 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -24,14 +24,19 @@ export const DEFAULT_SIZE = {
funnelWidth: 80,
radarShape: 'polygon',
tableTitleFontSize: 12,
- tableItemFontSize: 12
+ tableItemFontSize: 12,
+ gaugeMin: 0,
+ gaugeMax: 100,
+ gaugeStartAngle: 225,
+ gaugeEndAngle: -45
}
export const DEFAULT_LABEL = {
show: false,
position: 'top',
color: '#909399',
fontSize: '10',
- formatter: '{c}'
+ formatter: '{c}',
+ gaugeFormatter: '{value}'
}
export const DEFAULT_TOOLTIP = {
show: true,
@@ -297,3 +302,39 @@ export const BASE_RADAR = {
data: []
}]
}
+
+export const BASE_GAUGE = {
+ title: {
+ text: ''
+ },
+ // grid: {
+ // containLabel: true
+ // },
+ tooltip: {},
+ legend: {
+ show: true,
+ type: 'scroll',
+ itemWidth: 10,
+ itemHeight: 10,
+ icon: 'rect'
+ },
+ series: [
+ {
+ name: '',
+ type: 'gauge',
+ startAngle: 225,
+ endAngle: -45,
+ min: 0,
+ max: 100,
+ progress: {
+ show: true
+ },
+ detail: {
+ show: true,
+ valueAnimation: true,
+ formatter: '{value}'
+ },
+ data: []
+ }
+ ]
+}
diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js
new file mode 100644
index 0000000000..fe188df4c0
--- /dev/null
+++ b/frontend/src/views/chart/chart/gauge/gauge.js
@@ -0,0 +1,54 @@
+import { componentStyle } from '../common/common'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+
+export function baseGaugeOption(chart_option, chart) {
+ // 处理shape attr
+ let customAttr = {}
+ if (chart.customAttr) {
+ customAttr = JSON.parse(chart.customAttr)
+ if (customAttr.color) {
+ chart_option.color = customAttr.color.colors
+ }
+ // tooltip
+ if (customAttr.tooltip) {
+ const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+ const reg = new RegExp('\n', 'g')
+ tooltip.formatter = tooltip.formatter.replace(reg, '
')
+ chart_option.tooltip = tooltip
+ }
+ }
+ // 处理data
+ if (chart.data) {
+ chart_option.title.text = chart.title
+ if (chart.data.series.length > 0) {
+ chart_option.series[0].name = chart.data.series[0].name
+ // size
+ if (customAttr.size) {
+ chart_option.series[0].min = customAttr.size.gaugeMin
+ chart_option.series[0].max = customAttr.size.gaugeMax
+ chart_option.series[0].startAngle = customAttr.size.gaugeStartAngle
+ chart_option.series[0].endAngle = customAttr.size.gaugeEndAngle
+ }
+ // detail
+ if (customAttr.label) {
+ const label = JSON.parse(JSON.stringify(customAttr.label))
+ label.formatter = label.gaugeFormatter
+ chart_option.series[0].detail = label
+ }
+ chart_option.series[0].type = 'gauge'
+ // color
+ chart_option.series[0].itemStyle = {
+ color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha)
+ }
+ // data只取第一个
+ const y = {
+ name: chart.data.x[0],
+ value: chart.data.series[0].data[0]
+ }
+ chart_option.series[0].data.push(y)
+ }
+ }
+ // console.log(chart_option);
+ componentStyle(chart_option, chart)
+ return chart_option
+}
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index f4d98672ed..50eb574f26 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -5,12 +5,13 @@