diff --git a/frontend/src/icons/svg/bar-horizontal.svg b/frontend/src/icons/svg/bar-horizontal.svg
index 6ade56b3c8..58cf2715fa 100644
--- a/frontend/src/icons/svg/bar-horizontal.svg
+++ b/frontend/src/icons/svg/bar-horizontal.svg
@@ -1 +1 @@
-
+
diff --git a/frontend/src/icons/svg/line-stack.svg b/frontend/src/icons/svg/line-stack.svg
new file mode 100644
index 0000000000..8b95da5fa8
--- /dev/null
+++ b/frontend/src/icons/svg/line-stack.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/icons/svg/pie.svg b/frontend/src/icons/svg/pie.svg
index 7d7c52824e..7360f1d777 100644
--- a/frontend/src/icons/svg/pie.svg
+++ b/frontend/src/icons/svg/pie.svg
@@ -1 +1 @@
-
+
diff --git a/frontend/src/icons/svg/radar.svg b/frontend/src/icons/svg/radar.svg
new file mode 100644
index 0000000000..3034dbc524
--- /dev/null
+++ b/frontend/src/icons/svg/radar.svg
@@ -0,0 +1 @@
+
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index d4aa5382d3..82640d8487 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -635,6 +635,7 @@ export default {
line_symbol_pin: '钉子',
line_symbol_arrow: '箭头',
line_symbol_none: '无',
+ line_area: '面积',
pie_inner_radius: '内径',
pie_outer_radius: '外径',
funnel_width: '宽度',
@@ -654,7 +655,10 @@ export default {
orient: '方向',
horizontal: '水平',
vertical: '垂直',
- legend: '图例'
+ legend: '图例',
+ shape: '形状',
+ polygon: '多边形',
+ circle: '圆形'
},
dataset: {
datalist: '数据集',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 4b98b8af2d..8e11dc813e 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -12,9 +12,11 @@ export const DEFAULT_SIZE = {
lineSymbol: 'emptyCircle',
lineSymbolSize: 4,
lineSmooth: false,
+ lineArea: false,
pieInnerRadius: 0,
pieOuterRadius: 60,
- funnelWidth: 80
+ funnelWidth: 80,
+ radarShape: 'polygon'
}
export const DEFAULT_TITLE_STYLE = {
show: true,
@@ -88,6 +90,7 @@ export const BASE_LINE = {
data: []
},
xAxis: {
+ boundaryGap: false,
data: []
},
yAxis: {
@@ -180,3 +183,30 @@ export const BASE_FUNNEL = {
}
]
}
+
+export const BASE_RADAR = {
+ title: {
+ text: ''
+ },
+ tooltip: {},
+ legend: {
+ data: []
+ },
+ radar: {
+ shape: 'polygon',
+ name: {
+ textStyle: {
+ color: '#000000'
+ // backgroundColor: '#999',
+ // borderRadius: 3,
+ // padding: [3, 5]
+ }
+ },
+ indicator: []
+ },
+ series: [{
+ type: 'radar',
+ // areaStyle: {normal: {}},
+ data: []
+ }]
+}
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index 3a3321ba1e..dc9bf65664 100644
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@@ -29,6 +29,7 @@ export function baseLineOption(chart_option, chart) {
type: customAttr.size.lineType
}
y.smooth = customAttr.size.lineSmooth
+ customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 }
}
y.type = 'line'
chart_option.legend.data.push(y.name)
@@ -40,3 +41,14 @@ export function baseLineOption(chart_option, chart) {
return chart_option
}
+export function stackLineOption(chart_option, chart) {
+ baseLineOption(chart_option, chart)
+
+ // ext
+ chart_option.tooltip.trigger = 'axis'
+ chart_option.series.forEach(function(s) {
+ s.stack = 'stack'
+ })
+ return chart_option
+}
+
diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js
new file mode 100644
index 0000000000..1ea585dc35
--- /dev/null
+++ b/frontend/src/views/chart/chart/radar/radar.js
@@ -0,0 +1,38 @@
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+import { componentStyle } from '../common/common'
+
+export function baseRadarOption(chart_option, chart) {
+ // 处理shape attr
+ let customAttr = {}
+ if (chart.customAttr) {
+ customAttr = JSON.parse(chart.customAttr)
+ if (customAttr.color) {
+ chart_option.color = customAttr.color.colors
+ }
+ // size
+ if (customAttr.size) {
+ chart_option.radar.shape = customAttr.size.radarShape
+ }
+ }
+ // 处理data
+ if (chart.data) {
+ chart_option.title.text = chart.title
+ chart.data.x.forEach(function(ele) {
+ chart_option.radar.indicator.push({ name: ele })
+ })
+ for (let i = 0; i < chart.data.series.length; i++) {
+ const y = chart.data.series[i]
+ // color
+ y.itemStyle = {
+ color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
+ }
+ chart_option.legend.data.push(y.name)
+ y.value = JSON.parse(JSON.stringify(y.data))
+ 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 afdf5003ed..59bf4f9e45 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -5,11 +5,12 @@
-
-
diff --git a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue b/frontend/src/views/chart/components/shape_attr/SizeSelector.vue
index af7b4db6ff..6db1e32b7a 100644
--- a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape_attr/SizeSelector.vue
@@ -45,6 +45,9 @@
{{ $t('chart.line_smooth') }}
+
+ {{ $t('chart.show') }}
+
@@ -61,6 +64,15 @@
+
+
+
+
+ {{ $t('chart.polygon') }}
+ {{ $t('chart.circle') }}
+
+
+
{{ $t('chart.size') }}
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index b09d48a1ec..8c342e7d0e 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -85,8 +85,10 @@
+
+