From 6a8568673bbf163fe4bb353f024bb5edb74fb9ea Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 22 Mar 2021 15:55:39 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=201.=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=20=E9=9B=B7=E8=BE=BE=E5=9B=BE=E3=80=81=E9=9D=A2?= =?UTF-8?q?=E7=A7=AF=E5=A0=86=E5=8F=A0=E5=9B=BE=EF=BC=9B2.iconfont?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=EF=BC=9B3.echarts=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E9=85=8D=E7=BD=AE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/icons/svg/bar-horizontal.svg | 2 +- frontend/src/icons/svg/line-stack.svg | 1 + frontend/src/icons/svg/pie.svg | 2 +- frontend/src/icons/svg/radar.svg | 1 + frontend/src/lang/zh.js | 6 +- frontend/src/views/chart/chart/chart.js | 32 ++++++- frontend/src/views/chart/chart/line/line.js | 12 +++ frontend/src/views/chart/chart/radar/radar.js | 38 ++++++++ .../views/chart/components/ChartComponent.vue | 9 +- .../chart/components/ChartComponentView.vue | 86 ------------------- .../components/shape_attr/SizeSelector.vue | 12 +++ frontend/src/views/chart/view/ChartEdit.vue | 2 + 12 files changed, 111 insertions(+), 92 deletions(-) create mode 100644 frontend/src/icons/svg/line-stack.svg create mode 100644 frontend/src/icons/svg/radar.svg create mode 100644 frontend/src/views/chart/chart/radar/radar.js delete mode 100644 frontend/src/views/chart/components/ChartComponentView.vue 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 @@ + +