From 2fad12761515bda0e7c2765ce54075f43161b5e0 Mon Sep 17 00:00:00 2001 From: junjie Date: Mon, 22 Mar 2021 13:44:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=8A=A0=E6=A0=87=E9=A2=98?= =?UTF-8?q?=E3=80=81=E5=9B=BE=E4=BE=8B=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 5 +- frontend/src/lang/zh.js | 18 ++- frontend/src/main.js | 4 + frontend/src/views/chart/chart/bar/bar.js | 3 + frontend/src/views/chart/chart/chart.js | 48 ++++++- .../src/views/chart/chart/common/common.js | 20 +++ .../src/views/chart/chart/funnel/funnel.js | 2 + frontend/src/views/chart/chart/line/line.js | 2 + frontend/src/views/chart/chart/pie/pie.js | 2 + .../component_style/LegendSelector.vue | 103 +++++++++++++++ .../component_style/TitleSelector.vue | 117 ++++++++++++++++++ .../components/shape_attr/ColorSelector.vue | 1 - .../components/shape_attr/SizeSelector.vue | 1 - frontend/src/views/chart/group/Group.vue | 6 +- frontend/src/views/chart/view/ChartEdit.vue | 29 ++++- 15 files changed, 346 insertions(+), 15 deletions(-) create mode 100644 frontend/src/views/chart/chart/common/common.js create mode 100644 frontend/src/views/chart/components/component_style/LegendSelector.vue create mode 100644 frontend/src/views/chart/components/component_style/TitleSelector.vue diff --git a/frontend/package.json b/frontend/package.json index 06e9ee05d8..0de68084eb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,14 +28,15 @@ "svg-sprite-loader": "4.1.3", "svgo": "1.2.2", "umy-ui": "^1.1.6", + "vcolorpicker": "^1.1.0", "vue": "2.6.10", "vue-codemirror": "^4.0.6", "vue-i18n": "7.3.2", "vue-router": "3.0.6", + "vue-uuid": "2.0.2", "vuedraggable": "^2.24.3", "vuex": "3.1.0", - "webpack": "^4.46.0", - "vue-uuid": "2.0.2" + "webpack": "^4.46.0" }, "devDependencies": { "@babel/core": "^7.4.0-0", diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index e965d70523..d4aa5382d3 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -638,7 +638,23 @@ export default { pie_inner_radius: '内径', pie_outer_radius: '外径', funnel_width: '宽度', - line_smooth: '平滑折线' + line_smooth: '平滑折线', + title_style: '标题样式', + text_fontsize: '字体大小', + text_color: '字体颜色', + text_h_position: '水平位置', + text_v_position: '垂直位置', + text_pos_left: '左', + text_pos_center: '中', + text_pos_right: '右', + text_pos_top: '上', + text_pos_bottom: '下', + text_italic: '字体倾斜', + italic: '倾斜', + orient: '方向', + horizontal: '水平', + vertical: '垂直', + legend: '图例' }, dataset: { datalist: '数据集', diff --git a/frontend/src/main.js b/frontend/src/main.js index 2c8913a874..cff3b561bc 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -25,6 +25,10 @@ import UmyUi from 'umy-ui' Vue.use(UmyUi) +import vcolorpicker from 'vcolorpicker' + +Vue.use(vcolorpicker) + /** * If you don't want to use mock-server * you want to use MockJs for mock api diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js index 0b6f8185af..1710015b53 100644 --- a/frontend/src/views/chart/chart/bar/bar.js +++ b/frontend/src/views/chart/chart/bar/bar.js @@ -1,4 +1,5 @@ import { hexColorToRGBA } from '../util.js' +import { componentStyle } from '../common/common' export function baseBarOption(chart_option, chart) { // 处理shape attr @@ -35,6 +36,7 @@ export function baseBarOption(chart_option, chart) { } } // console.log(chart_option); + componentStyle(chart_option, chart) return chart_option } @@ -86,6 +88,7 @@ export function horizontalBarOption(chart_option, chart) { } } // console.log(chart_option); + componentStyle(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index be877f189d..fecdd4fdac 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -16,12 +16,27 @@ export const DEFAULT_SIZE = { pieOuterRadius: 60, funnelWidth: 80 } +export const DEFAULT_TITLE_STYLE = { + fontSize: '18', + color: '#000000', + hPosition: 'center', + vPosition: 'top', + isItalic: false +} +export const DEFAULT_LEGEND_STYLE = { + show: true, + hPosition: 'center', + vPosition: 'bottom', + orient: 'horizontal' +} export const BASE_BAR = { title: { text: '' }, tooltip: {}, legend: { + show: true, + type: 'scroll', data: [] }, xAxis: { @@ -30,7 +45,12 @@ export const BASE_BAR = { yAxis: { type: 'value' }, - series: [] + series: [], + dataZoom: [ + { + type: 'inside' + } + ] } export const HORIZONTAL_BAR = { title: { @@ -38,6 +58,8 @@ export const HORIZONTAL_BAR = { }, tooltip: {}, legend: { + show: true, + type: 'scroll', data: [] }, xAxis: { @@ -46,7 +68,12 @@ export const HORIZONTAL_BAR = { yAxis: { data: [] }, - series: [] + series: [], + dataZoom: [ + { + type: 'inside' + } + ] } export const BASE_LINE = { @@ -55,6 +82,8 @@ export const BASE_LINE = { }, tooltip: {}, legend: { + show: true, + type: 'scroll', data: [] }, xAxis: { @@ -63,7 +92,12 @@ export const BASE_LINE = { yAxis: { type: 'value' }, - series: [] + series: [], + dataZoom: [ + { + type: 'inside' + } + ] } export const BASE_PIE = { @@ -74,7 +108,10 @@ export const BASE_PIE = { trigger: 'item', formatter: '{a}
{b}: {c} ({d}%)' }, - legend: {}, + legend: { + show: true, + type: 'scroll' + }, series: [ { name: '', @@ -101,7 +138,8 @@ export const BASE_FUNNEL = { trigger: 'item' }, legend: { - // data: [] + show: true, + type: 'scroll' }, series: [ { diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js new file mode 100644 index 0000000000..97d99c5919 --- /dev/null +++ b/frontend/src/views/chart/chart/common/common.js @@ -0,0 +1,20 @@ +export function componentStyle(chart_option, chart) { + if (chart.customStyle) { + const customStyle = JSON.parse(chart.customStyle) + if (customStyle.text) { + chart_option.title.left = customStyle.text.hPosition + chart_option.title.top = customStyle.text.vPosition + const style = chart_option.title.textStyle ? chart_option.title.textStyle : {} + style.fontSize = customStyle.text.fontSize + style.color = customStyle.text.color + customStyle.text.isItalic ? style.fontStyle = 'italic' : style.fontStyle = 'normal' + chart_option.title.textStyle = style + } + if (customStyle.legend) { + chart_option.legend.show = customStyle.legend.show + chart_option.legend.left = customStyle.legend.hPosition + chart_option.legend.top = customStyle.legend.vPosition + chart_option.legend.orient = customStyle.legend.orient + } + } +} diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js index a1356619ce..23cec85820 100644 --- a/frontend/src/views/chart/chart/funnel/funnel.js +++ b/frontend/src/views/chart/chart/funnel/funnel.js @@ -1,4 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' +import { componentStyle } from '../common/common' export function baseFunnelOption(chart_option, chart) { // 处理shape attr @@ -36,6 +37,7 @@ export function baseFunnelOption(chart_option, chart) { } } // console.log(chart_option); + componentStyle(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js index 0ddc7635d4..3a3321ba1e 100644 --- a/frontend/src/views/chart/chart/line/line.js +++ b/frontend/src/views/chart/chart/line/line.js @@ -1,4 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' +import { componentStyle } from '../common/common' export function baseLineOption(chart_option, chart) { // 处理shape attr @@ -35,6 +36,7 @@ export function baseLineOption(chart_option, chart) { } } // console.log(chart_option); + componentStyle(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js index f45ed8c726..24abb5f9bb 100644 --- a/frontend/src/views/chart/chart/pie/pie.js +++ b/frontend/src/views/chart/chart/pie/pie.js @@ -1,4 +1,5 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' +import { componentStyle } from '../common/common' export function basePieOption(chart_option, chart) { // 处理shape attr @@ -34,6 +35,7 @@ export function basePieOption(chart_option, chart) { } } // console.log(chart_option); + componentStyle(chart_option, chart) return chart_option } diff --git a/frontend/src/views/chart/components/component_style/LegendSelector.vue b/frontend/src/views/chart/components/component_style/LegendSelector.vue new file mode 100644 index 0000000000..3b7c3aefa9 --- /dev/null +++ b/frontend/src/views/chart/components/component_style/LegendSelector.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/frontend/src/views/chart/components/component_style/TitleSelector.vue b/frontend/src/views/chart/components/component_style/TitleSelector.vue new file mode 100644 index 0000000000..80cae71733 --- /dev/null +++ b/frontend/src/views/chart/components/component_style/TitleSelector.vue @@ -0,0 +1,117 @@ + + + + + diff --git a/frontend/src/views/chart/components/shape_attr/ColorSelector.vue b/frontend/src/views/chart/components/shape_attr/ColorSelector.vue index 9b5405dc3a..3202191d6c 100644 --- a/frontend/src/views/chart/components/shape_attr/ColorSelector.vue +++ b/frontend/src/views/chart/components/shape_attr/ColorSelector.vue @@ -26,7 +26,6 @@ {{ $t('chart.color') }} - diff --git a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue b/frontend/src/views/chart/components/shape_attr/SizeSelector.vue index 9150c9ee7e..af7b4db6ff 100644 --- a/frontend/src/views/chart/components/shape_attr/SizeSelector.vue +++ b/frontend/src/views/chart/components/shape_attr/SizeSelector.vue @@ -65,7 +65,6 @@ {{ $t('chart.size') }} - diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index b07baae74e..a5230de522 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -211,7 +211,7 @@