diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js index 2e2cd339..0f123c57 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-bar-stack.js @@ -1,6 +1,6 @@ /* * @Descripttion: 柱状堆叠图 - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:37:09 * @LastEditors: qianlishi @@ -350,7 +350,8 @@ export const widgetBarStack = { required: false, placeholder: '', value: '#fff', - }, { + }, + { type: 'el-switch', label: '分割线显示', name: 'isShowSplitLineY', @@ -364,7 +365,6 @@ export const widgetBarStack = { required: false, placeholder: '', value: '#fff', - } ], }, diff --git a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js index d42af828..7c68b7da 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js +++ b/report-ui/src/views/report/bigscreen/designer/tools/componentsJSON/widget-line-compare.js @@ -160,13 +160,29 @@ export const widgetLineCompare = { value: true, }, { - type: 'el-input-number', - label: '数值间隔', - name: 'splitNumberX', + type: 'el-input-text', + label: '坐标名', + name: 'xName', required: false, placeholder: '', value: '' }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorX', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '坐标字号', + name: 'nameFontSizeX', + required: false, + placeholder: '', + value: 14, + }, { type: 'el-switch', label: '数值居中', @@ -191,6 +207,14 @@ export const widgetLineCompare = { placeholder: '', value: 14, }, + { + type: 'el-input-number', + label: '数值间隔', + name: 'splitNumberX', + required: false, + placeholder: '', + value: '' + }, { type: 'el-switch', label: '刻度线', @@ -228,9 +252,40 @@ export const widgetLineCompare = { placeholder: '', value: true, }, + { + type: 'el-input-text', + label: '坐标名', + name: 'textNameYTop', + require: false, + placeholder: '', + value: '' + },{ + type: 'vue-color', + label: '坐标名颜色', + name: 'nameColorYTop', + required: false, + placeholder: '', + value: '#fff', + }, { type: 'el-input-number', - label: '数值间隔', + label: '坐标字号', + name: 'namefontSizeYTop', + required: false, + placeholder: '', + value: 14, + }, + { + type: 'el-switch', + label: '缩放', + name: 'scaleYTop', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '数值切分', name: 'splitNumberYTop', required: false, placeholder: '', @@ -239,7 +294,7 @@ export const widgetLineCompare = { { type: 'vue-color', label: '数值颜色', - name: 'XcolorRight', + name: 'colorYTop', required: false, placeholder: '', value: '#fff', @@ -247,7 +302,7 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '数值字号', - name: 'fontSizeXRight', + name: 'fontSizeYTop', required: false, placeholder: '', value: 14, @@ -255,31 +310,31 @@ export const widgetLineCompare = { { type: 'el-switch', label: '刻度线', - name: 'tickLineRight', + name: 'tickLineYTop', require: false, placeholder: '', - value: false, + value: true, }, { type: 'el-switch', - label: 'X轴线', - name: 'xLineRight', + label: 'y轴线', + name: 'lineYTop', require: false, placeholder: '', - value: false, + value: true, }, { type: 'vue-color', label: '轴颜色', - name: 'lineColorXRight', + name: 'lineColorYTop', required: false, placeholder: '', value: '#fff', }, { type: 'el-switch', - label: '竖分割线', - name: 'SplitLineRight', + label: '分割线', + name: 'splitLineYTop', require: false, placeholder: '', value: false, @@ -287,7 +342,7 @@ export const widgetLineCompare = { { type: 'vue-color', label: '分割线颜色', - name: 'SplitLineColorRight', + name: 'splitLineColorYTop', required: false, placeholder: '', value: '#fff', @@ -295,85 +350,127 @@ export const widgetLineCompare = { { type: 'el-input-number', label: '分割线宽度', - name: 'SplitLinefontSizeRight', + name: 'splitLinefontSizeYTop', required: false, placeholder: '', value: 1, }, - { - type: 'el-switch', - label: '边框线', - name: 'frameLineRight', - require: false, - placeholder: '', - value: false, - }, ], }, { - name: '下Y轴设置', + name: '下y轴设置', list: [ { type: 'el-switch', label: '显示', - name: 'hideY', + name: 'isShowYBottom', required: false, placeholder: '', value: true, }, { + type: 'el-input-text', + label: '坐标名', + name: 'textNameYBottom', + require: false, + placeholder: '', + value: '' + },{ type: 'vue-color', - label: '数值颜色', - name: 'colorY', + label: '坐标名颜色', + name: 'nameColorYBottom', required: false, placeholder: '', value: '#fff', }, { type: 'el-input-number', - label: '数值字号', - name: 'fontSizeY', + label: '坐标字号', + name: 'namefontSizeYBottom', required: false, placeholder: '', value: 14, }, { - type: 'el-select', - label: '数值对齐', - name: 'textAlign', + type: 'el-switch', + label: '缩放', + name: 'scaleYBottom', required: false, placeholder: '', - selectOptions: [ - {code: 'center', name: '居中'}, - {code: 'left', name: '左对齐'}, - {code: 'right', name: '右对齐'}, - ], - value: 'center' + value: true, + }, + { + type: 'el-input-number', + label: '数值切分', + name: 'splitNumberYBottom', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '数值颜色', + name: 'colorYBottom', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '数值字号', + name: 'fontSizeYBottom', + required: false, + placeholder: '', + value: 14, }, { type: 'el-switch', label: '刻度线', - name: 'tickLineY', + name: 'tickLineYBottom', require: false, placeholder: '', - value: false, + value: true, }, { type: 'el-switch', - label: 'Y轴线', - name: 'lineY', + label: 'y轴线', + name: 'lineYBottom', require: false, placeholder: '', - value: false, + value: true, }, { type: 'vue-color', label: '轴颜色', - name: 'lineColorY', + name: 'lineColorYBottom', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-switch', + label: '分割线', + name: 'splitLineYBottom', + require: false, + placeholder: '', + value: false, + }, + { + type: 'vue-color', + label: '分割线颜色', + name: 'splitLineColorYBottom', required: false, placeholder: '', value: '#fff', }, + { + type: 'el-input-number', + label: '分割线宽度', + name: 'splitLinefontSizeYBottom', + required: false, + placeholder: '', + value: 1, + }, ], }, { @@ -444,11 +541,19 @@ export const widgetLineCompare = { list: [ { type: 'el-slider', - label: '左右边距(像素)', - name: 'marginLeftRight', + label: '左边距(像素)', + name: 'marginLeft', required: false, placeholder: '', - value: 10, + value: 20, + }, + { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 50, }, { type: 'el-slider', @@ -464,7 +569,7 @@ export const widgetLineCompare = { name: 'marginBottom', required: false, placeholder: '', - value: 10, + value: 40, }, ], }, diff --git a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue index 00912883..8dece481 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/line/widgetLineCompareChart.vue @@ -265,11 +265,11 @@ export default { editorOptions() { this.setOptionsTitle(); this.setOptionsX(); - // this.setOptionsXRight(); - // this.setOptionsY(); + this.setOptionsYTop(); + this.setOptionsYBottom(); // this.setOptionsTop(); // this.setOptionsTooltip(); - // this.setOptionsGrid(); + this.setOptionsGrid(); // this.setOptionsLegend(); // this.setOptionsColor(); this.setOptionsData(); @@ -294,6 +294,11 @@ export default { const xAxis0 = { gridIndex: 0, show: optionsSetup.isShowX, + name: optionsSetup.xName, // 坐标轴名称 + nameTextStyle: { + color: optionsSetup.nameColorX, + fontSize: optionsSetup.nameFontSizeX + }, type: 'category', boundaryGap: optionsSetup.boundaryX, // 值居中 axisLine: { //x轴线 @@ -337,64 +342,90 @@ export default { this.options.xAxis[0] = xAxis0; this.options.xAxis[1] = xAxis1; }, - // 右X轴设置 - setOptionsXRight() { + // 上y轴设置 + setOptionsYTop() { const optionsSetup = this.optionsSetup; - const xAxisRight = { - gridIndex: 2, - splitNumber: optionsSetup.splitNumberRight, - type: 'value', - axisLine: {//X轴线 - show: optionsSetup.xLineRight, - lineStyle: { - color: optionsSetup.lineColorXRight, + const yAxis = { + gridIndex: 0, + splitNumber: optionsSetup.splitNumberYTop, + show: optionsSetup.isShowYTop, + scale: optionsSetup.scaleYTop, // 缩放 + name: optionsSetup.textNameYTop, // 坐标轴名称 + nameTextStyle: { + color: optionsSetup.nameColorYTop, + fontSize: optionsSetup.namefontSizeYTop + }, + axisLabel: { + show: true, + textStyle: { + color: optionsSetup.colorYTop, + fontSize: optionsSetup.fontSizeYTop, }, }, - axisTick: { - show: optionsSetup.tickLineRight, + axisTick: { // 刻度 + show: optionsSetup.tickLineYTop, }, - position: 'bottom', - axisLabel: { // x轴 - show: optionsSetup.hideXRight, - textStyle: { - color: optionsSetup.XcolorRight, - fontSize: optionsSetup.fontSizeXRight - } + axisLine: { // 轴线 + show: optionsSetup.lineYTop, + lineStyle: { + color: optionsSetup.lineColorYTop, + }, }, - splitLine: { // 分割线 - show: optionsSetup.SplitLineRight, + splitLine: { + show: optionsSetup.splitLineYTop, lineStyle: { - color: optionsSetup.SplitLineColorRight, - width: optionsSetup.SplitLinefontSizeRight, - type: 'solid' - } - } + width: optionsSetup.splitLinefontSizeYTop, + color: optionsSetup.splitLineColorYTop, + }, + }, + axisPointer: { + snap: true + }, } - this.options.xAxis[2] = xAxisRight; + this.options.yAxis[0] = yAxis }, - // Y轴设置 - setOptionsY() { + // 下Y轴设置 + setOptionsYBottom() { const optionsSetup = this.optionsSetup; - const axisLine = { - show: optionsSetup.lineY, - lineStyle: { - color: optionsSetup.lineColorY - } - }; - const axisTick = { - show: optionsSetup.tickLineY - }; - const axisLabel = { - show: optionsSetup.hideY, - textStyle: { - align: optionsSetup.textAlign, - color: optionsSetup.colorY, - fontSize: optionsSetup.fontSizeY, - } - }; - this.options.yAxis[1]['axisLine'] = axisLine; - this.options.yAxis[1]['axisTick'] = axisTick; - this.options.yAxis[1]['axisLabel'] = axisLabel; + const yAxis = { + gridIndex: 1, + splitNumber: optionsSetup.splitNumberYBottom, + show: optionsSetup.isShowYBottom, + scale: optionsSetup.scaleYBottom, // 缩放 + name: optionsSetup.textNameYBottom, // 坐标轴名称 + nameTextStyle: { + color: optionsSetup.nameColorYBottom, + fontSize: optionsSetup.namefontSizeYBottom + }, + inverse: true, // 翻转 + axisLabel: { + show: true, + textStyle: { + color: optionsSetup.colorYBottom, + fontSize: optionsSetup.fontSizeYBottom, + }, + }, + axisTick: { // 刻度 + show: optionsSetup.tickLineYBottom, + }, + axisLine: { // 轴线 + show: optionsSetup.lineYBottom, + lineStyle: { + color: optionsSetup.lineColorYBottom, + }, + }, + splitLine: { + show: optionsSetup.splitLineYBottom, + lineStyle: { + width: optionsSetup.splitLinefontSizeYBottom, + color: optionsSetup.splitLineColorYBottom, + }, + }, + axisPointer: { + snap: true + }, + } + this.options.yAxis[1] = yAxis }, // 数值设定、柱体设置 setOptionsTop() { @@ -450,41 +481,22 @@ export default { this.options.tooltip = tooltip; }, // 边距设置 - getOptionsBottom() { - const optionsSetup = this.optionsSetup; - let bottom = optionsSetup.marginBottom; - if (optionsSetup.hideXLeft) { - bottom = optionsSetup.marginBottom + 15 - } else if (optionsSetup.hideXRight) { - bottom = optionsSetup.marginBottom + 15 - } - return bottom - }, setOptionsGrid() { const optionsSetup = this.optionsSetup; const grid = [ - {//左 - show: optionsSetup.frameLineLeft, - left: optionsSetup.marginLeftRight, + {// 上 + left: optionsSetup.marginLeft, + right: optionsSetup.marginRight, top: optionsSetup.marginTop, - bottom: optionsSetup.marginBottom, containLabel: true, - width: '40%' + bottom: '50%', }, - {//中间字体位置 - show: false, - left: "51%", - top: optionsSetup.marginTop, - bottom: this.getOptionsBottom(), - width: '0%' - }, - {//右 - show: optionsSetup.frameLineRight, - right: optionsSetup.marginLeftRight, - top: optionsSetup.marginTop, - bottom: optionsSetup.marginBottom, + { // 下 + left: optionsSetup.marginLeft, + right: optionsSetup.marginRight, containLabel: true, - width: '40%' + top: '51%', + bottom: optionsSetup.marginBottom, }, ] this.options.grid = grid;