diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue index f5416345..18142593 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetBarCompareChart.vue @@ -61,6 +61,7 @@ export default { xAxis: [ {// 左 splitNumber: 2, + show: true, type: 'value', inverse: true, axisLine: {//底分割线 @@ -92,6 +93,7 @@ export default { }, {// 右 gridIndex: 2, + show: true, type: 'value', axisLine: { show: false, @@ -302,6 +304,7 @@ export default { const xAxisLeft = { splitNumber: optionsSetup.splitNumberLeft, type: 'value', + show : optionsSetup.hideXLeft, inverse: true, axisLine: {//X轴线 show: optionsSetup.xLineLeft, @@ -314,7 +317,7 @@ export default { }, position: 'bottom', axisLabel: { // x轴 - show: optionsSetup.hideXLeft, + show: true, textStyle: { color: optionsSetup.XcolorLeft, fontSize: optionsSetup.fontSizeXLeft @@ -337,6 +340,7 @@ export default { const xAxisRight = { gridIndex: 2, splitNumber: optionsSetup.splitNumberRight, + show : optionsSetup.hideXRight, type: 'value', axisLine: {//X轴线 show: optionsSetup.xLineRight, @@ -349,7 +353,7 @@ export default { }, position: 'bottom', axisLabel: { // x轴 - show: optionsSetup.hideXRight, + show: true, textStyle: { color: optionsSetup.XcolorRight, fontSize: optionsSetup.fontSizeXRight @@ -444,16 +448,6 @@ 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 = [ @@ -469,7 +463,7 @@ export default { show: false, left: "51%", top: optionsSetup.marginTop, - bottom: this.getOptionsBottom(), + bottom: optionsSetup.marginBottom + 15, width: '0%' }, {//右 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 0f22eeef..d4142328 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 @@ -16,13 +16,27 @@ export default { data() { return { options: { + axisPointer: { + link: { + xAxisIndex: "all", + }, + }, title: { - //text: '柱状对比图', x: 'center', textStyle: { color: '#ffffff', }, }, + tooltip: { + show: true, + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + type: "dashed", + }, + }, + }, //边距 grid: [ {// 上 @@ -52,60 +66,92 @@ export default { {// gridIndex: 0, type: 'category', - boundaryGap: false, - axisLine: { //分割线 - onZero: false, + boundaryGap: true, // 居中 + axisLine: { //x轴线 + show: true, + lineStyle: { + color: '#ffffff', + } }, - splitNumber: 2, - inverse: true, - axisTick: { - show: false, + axisTick: { // 刻度 + show: true, }, - //position: 'bottom', - axisLabel: { // x轴 + axisLabel: { // X轴数据 show: true, textStyle: { color: '#ffffff', - fontSize: 12 + fontSize: 14 } }, - data: [] + data: [], }, {// gridIndex: 1, type: 'category', position: 'top', - boundaryGap: false, - axisLine: { - show: false, + boundaryGap: true, // 居中 + axisLine: { // x轴线 + show: true, + lineStyle: { + color: '#ffffff', + } }, - axisTick: { - show: false, + axisTick: { // 刻度 + show: true, }, - //position: 'bottom', axisLabel: { - show: true, - textStyle: { - color: '#ffffff', - fontSize: 12, - }, + show: false, }, + data: [], }, ], yAxis: [ { gridIndex: 0, - scale: true, + show: true, + scale: true, // 是否不从0开始,false从0开始 + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', + fontSize: 14, + }, + }, + axisLine: { // 轴线 + show: true, + lineStyle: { + color: '#ffffff', + }, + }, splitLine: { show: false, + lineStyle: { + color: '#ffffff', + }, }, }, { gridIndex: 1, - scale: true, - inverse: true, + scale: false, // 是否从0开始 + inverse: true, // 翻转 + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', + fontSize: 14, + }, + }, + axisLine: { // 轴线 + show: true, + lineStyle: { + color: '#ffffff', + }, + }, splitLine: { show: false, + lineStyle: { + color: '#ffffff', + }, }, }, ], @@ -115,32 +161,21 @@ export default { type: 'line', xAxisIndex: 0, yAxisIndex: 0, - smooth: true, - barGap: 20, - barWidth: 15, - /*label: { - normal: { - show: true, - color: 'red', - position: 'insideLeft', - textStyle: { - color: '#ffffff', - } - - }, - emphasis: { - show: false, - }, - }, + smooth: true, // 曲线，折线 itemStyle: { - normal: { - color: '#36c5e7', - barBorderRadius: [8, 0, 0, 8], - }, - emphasis: { - show: false, - }, - },*/ + color: '#36c5e7', + }, + lineStyle: { + color: '#36c5e7', + width: 2, + }, + label: { + position: 'top', + distance: 10, + show: true, + color: '#36c5e7', + fontSize: 14, + }, data: [], }, { @@ -148,28 +183,21 @@ export default { type: 'line', xAxisIndex: 1, yAxisIndex: 1, - smooth: true, - barGap: 20, - barWidth: 15, - /*label: { - normal: { - show: true, - color: 'red', - position: 'insideRight', - textStyle: { - color: '#ffffff', - } - }, - }, + smooth: true, // 曲线，折线 itemStyle: { - normal: { - color: '#e68b55', - barBorderRadius: [0, 8, 8, 0], - }, - emphasis: { - show: false, - }, - },*/ + color: '#e68b55', + }, + lineStyle: { + color: '#e68b55', + width: 2, + }, + label: { + position: 'bottom', + distance: 10, + show: true, + color: '#e68b55', + fontSize: 16, + }, data: [], }, ] @@ -225,249 +253,249 @@ export default { this.setOptionsColor();*/ this.setOptionsData(); }, -/* // 标题修改 - setOptionsTitle() { - const optionsCollapse = this.optionsSetup; - const title = {}; - title.text = optionsCollapse.titleText; - title.show = optionsCollapse.isNoTitle; - title.left = optionsCollapse.textAlign; - title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight - }; - this.options.title = title; - }, - // 左X轴设置 - setOptionsXLeft() { - const optionsSetup = this.optionsSetup; - const xAxisLeft = { - splitNumber: optionsSetup.splitNumberLeft, - type: 'value', - inverse: true, - axisLine: {//X轴线 - show: optionsSetup.xLineLeft, - lineStyle: { - color: optionsSetup.lineColorXLeft, - }, - }, - axisTick: { - show: optionsSetup.tickLineLeft, + /* // 标题修改 + setOptionsTitle() { + const optionsCollapse = this.optionsSetup; + const title = {}; + title.text = optionsCollapse.titleText; + title.show = optionsCollapse.isNoTitle; + title.left = optionsCollapse.textAlign; + title.textStyle = { + color: optionsCollapse.textColor, + fontSize: optionsCollapse.textFontSize, + fontWeight: optionsCollapse.textFontWeight + }; + this.options.title = title; }, - position: 'bottom', - axisLabel: { // x轴 - show: optionsSetup.hideXLeft, - textStyle: { - color: optionsSetup.XcolorLeft, - fontSize: optionsSetup.fontSizeXLeft + // 左X轴设置 + setOptionsXLeft() { + const optionsSetup = this.optionsSetup; + const xAxisLeft = { + splitNumber: optionsSetup.splitNumberLeft, + type: 'value', + inverse: true, + axisLine: {//X轴线 + show: optionsSetup.xLineLeft, + lineStyle: { + color: optionsSetup.lineColorXLeft, + }, + }, + axisTick: { + show: optionsSetup.tickLineLeft, + }, + position: 'bottom', + axisLabel: { // x轴 + show: optionsSetup.hideXLeft, + textStyle: { + color: optionsSetup.XcolorLeft, + fontSize: optionsSetup.fontSizeXLeft + } + }, + splitLine: { // 分割线 + show: optionsSetup.SplitLineLeft, + lineStyle: { + color: optionsSetup.SplitLineColorLeft, + width: optionsSetup.SplitLinefontSizeLeft, + type: 'solid' + } + } } + this.options.xAxis[0] = xAxisLeft; }, - splitLine: { // 分割线 - show: optionsSetup.SplitLineLeft, - lineStyle: { - color: optionsSetup.SplitLineColorLeft, - width: optionsSetup.SplitLinefontSizeLeft, - type: 'solid' + // 右X轴设置 + setOptionsXRight() { + const optionsSetup = this.optionsSetup; + const xAxisRight = { + gridIndex: 2, + splitNumber: optionsSetup.splitNumberRight, + type: 'value', + axisLine: {//X轴线 + show: optionsSetup.xLineRight, + lineStyle: { + color: optionsSetup.lineColorXRight, + }, + }, + axisTick: { + show: optionsSetup.tickLineRight, + }, + position: 'bottom', + axisLabel: { // x轴 + show: optionsSetup.hideXRight, + textStyle: { + color: optionsSetup.XcolorRight, + fontSize: optionsSetup.fontSizeXRight + } + }, + splitLine: { // 分割线 + show: optionsSetup.SplitLineRight, + lineStyle: { + color: optionsSetup.SplitLineColorRight, + width: optionsSetup.SplitLinefontSizeRight, + type: 'solid' + } + } } - } - } - this.options.xAxis[0] = xAxisLeft; - }, - // 右X轴设置 - setOptionsXRight() { - const optionsSetup = this.optionsSetup; - const xAxisRight = { - gridIndex: 2, - splitNumber: optionsSetup.splitNumberRight, - type: 'value', - axisLine: {//X轴线 - show: optionsSetup.xLineRight, - lineStyle: { - color: optionsSetup.lineColorXRight, - }, + this.options.xAxis[2] = xAxisRight; }, - axisTick: { - show: optionsSetup.tickLineRight, + // Y轴设置 + setOptionsY() { + 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; }, - position: 'bottom', - axisLabel: { // x轴 - show: optionsSetup.hideXRight, - textStyle: { - color: optionsSetup.XcolorRight, - fontSize: optionsSetup.fontSizeXRight + // 数值设定、柱体设置 + setOptionsTop() { + const optionsSetup = this.optionsSetup; + const series = this.options.series; + for (const key in series) { + if (series[key].type == "bar") { + series[0].label = { + normal: { + show: optionsSetup.isShow, + position: 'insideLeft', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[1].label = { + normal: { + show: optionsSetup.isShow, + color: 'red', + position: 'insideRight', + textStyle: { + fontSize: optionsSetup.fontSize, + color: optionsSetup.subTextColor, + fontWeight: optionsSetup.fontWeight + } + }, + emphasis: { + show: false, + }, + }, + series[key].barWidth = optionsSetup.maxWidth; + } } + this.options.series = series; + }, + // tooltip 提示语设置 + setOptionsTooltip() { + const optionsSetup = this.optionsSetup; + const tooltip = { + trigger: "item", + show: true, + textStyle: { + color: optionsSetup.lineColor, + fontSize: optionsSetup.fontSize + } + }; + this.options.tooltip = tooltip; }, - splitLine: { // 分割线 - show: optionsSetup.SplitLineRight, - lineStyle: { - color: optionsSetup.SplitLineColorRight, - width: optionsSetup.SplitLinefontSizeRight, - type: 'solid' + // 边距设置 + getOptionsBottom(){ + const optionsSetup = this.optionsSetup; + let bottom = optionsSetup.marginBottom; + if (optionsSetup.hideXLeft) { + bottom = optionsSetup.marginBottom + 15 + }else if (optionsSetup.hideXRight){ + bottom = optionsSetup.marginBottom + 15 } - } - } - this.options.xAxis[2] = xAxisRight; - }, - // Y轴设置 - setOptionsY() { - 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; - }, - // 数值设定、柱体设置 - setOptionsTop() { - const optionsSetup = this.optionsSetup; - const series = this.options.series; - for (const key in series) { - if (series[key].type == "bar") { - series[0].label = { - normal: { - show: optionsSetup.isShow, - position: 'insideLeft', - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight - } + return bottom + }, + setOptionsGrid() { + const optionsSetup = this.optionsSetup; + const grid = [ + {//左 + show: optionsSetup.frameLineLeft, + left: optionsSetup.marginLeftRight, + top: optionsSetup.marginTop, + bottom: optionsSetup.marginBottom, + containLabel: true, + width: '40%' }, - emphasis: { + {//中间字体位置 show: false, + left: "51%", + top: optionsSetup.marginTop, + bottom: this.getOptionsBottom(), + width: '0%' }, - }, - series[1].label = { - normal: { - show: optionsSetup.isShow, - color: 'red', - position: 'insideRight', - textStyle: { - fontSize: optionsSetup.fontSize, - color: optionsSetup.subTextColor, - fontWeight: optionsSetup.fontWeight - } - }, - emphasis: { - show: false, - }, + {//右 + show: optionsSetup.frameLineRight, + right: optionsSetup.marginLeftRight, + top: optionsSetup.marginTop, + bottom: optionsSetup.marginBottom, + containLabel: true, + width: '40%' }, - series[key].barWidth = optionsSetup.maxWidth; - } - } - this.options.series = series; - }, - // tooltip 提示语设置 - setOptionsTooltip() { - const optionsSetup = this.optionsSetup; - const tooltip = { - trigger: "item", - show: true, - textStyle: { - color: optionsSetup.lineColor, - fontSize: optionsSetup.fontSize - } - }; - 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, - top: optionsSetup.marginTop, - bottom: optionsSetup.marginBottom, - containLabel: true, - width: '40%' - }, - {//中间字体位置 - show: false, - left: "51%", - top: optionsSetup.marginTop, - bottom: this.getOptionsBottom(), - width: '0%' - }, - {//右 - show: optionsSetup.frameLineRight, - right: optionsSetup.marginLeftRight, - top: optionsSetup.marginTop, - bottom: optionsSetup.marginBottom, - containLabel: true, - width: '40%' - }, - ] - this.options.grid = grid; - }, - // 图例操作 - setOptionsLegend() { - const optionsSetup = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsSetup.isShowLegend; - legend.left = optionsSetup.lateralPosition; - legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; - legend.bottom = - optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsSetup.layoutFront; - legend.textStyle = { - color: optionsSetup.lengedColor, - fontSize: optionsSetup.lengedFontSize - }; - legend.itemWidth = optionsSetup.lengedWidth; - }, - // 颜色修改、圆角修改 - setOptionsColor() { - const optionsSetup = this.optionsSetup; - const customColor = optionsSetup.customColor; - if (!customColor) return; - const itemStyleLeft = { - normal: { - color: customColor[0].color, - barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] - }, - emphasis: { - show: false, + ] + this.options.grid = grid; }, - } - const itemStyleRight = { - normal: { - color: customColor[1].color, - barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] - }, - emphasis: { - show: false, + // 图例操作 + setOptionsLegend() { + const optionsSetup = this.optionsSetup; + const legend = this.options.legend; + legend.show = optionsSetup.isShowLegend; + legend.left = optionsSetup.lateralPosition; + legend.top = optionsSetup.longitudinalPosition == "top" ? 0 : "auto"; + legend.bottom = + optionsSetup.longitudinalPosition == "bottom" ? 0 : "auto"; + legend.orient = optionsSetup.layoutFront; + legend.textStyle = { + color: optionsSetup.lengedColor, + fontSize: optionsSetup.lengedFontSize + }; + legend.itemWidth = optionsSetup.lengedWidth; }, - } - this.options.series[0].itemStyle = itemStyleLeft; - this.options.series[1].itemStyle = itemStyleRight; - },*/ + // 颜色修改、圆角修改 + setOptionsColor() { + const optionsSetup = this.optionsSetup; + const customColor = optionsSetup.customColor; + if (!customColor) return; + const itemStyleLeft = { + normal: { + color: customColor[0].color, + barBorderRadius: [optionsSetup.radius, 0, 0, optionsSetup.radius] + }, + emphasis: { + show: false, + }, + } + const itemStyleRight = { + normal: { + color: customColor[1].color, + barBorderRadius: [0, optionsSetup.radius, optionsSetup.radius, 0] + }, + emphasis: { + show: false, + }, + } + this.options.series[0].itemStyle = itemStyleLeft; + this.options.series[1].itemStyle = itemStyleRight; + },*/ // 数据解析 setOptionsData() { const optionsSetup = this.optionsSetup; @@ -522,6 +550,7 @@ export default { this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['data'] = arrayList[1].data this.options.xAxis[0]['data'] = xAxisList + this.options.xAxis[1]['data'] = xAxisList }, // 动态数据 dynamicDataFn(val, refreshTime, optionsSetup) { @@ -543,7 +572,7 @@ export default { }, renderingFn(optionsSetup, val) { this.options.yAxis[1]['data'] = val.xAxis - if (val.series[0].type == "bar"){ + if (val.series[0].type == "bar") { this.options.series[0]['name'] = val.series[0].name this.options.series[0]['data'] = val.series[0].data this.options.series[1]['name'] = val.series[1].name diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue index a554e8f2..955fa859 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetLinechart.vue @@ -180,7 +180,7 @@ export default { axisLabel: { show: true, textStyle: { - color: optionsCollapse.colorY, // x轴 坐标文字颜色 + color: optionsCollapse.colorY, // y轴 坐标文字颜色 fontSize: optionsCollapse.fontSizeY } },