diff --git a/report-ui/src/main.js b/report-ui/src/main.js index e9e3524a..abc86422 100644 --- a/report-ui/src/main.js +++ b/report-ui/src/main.js @@ -41,9 +41,6 @@ import Avue from '@smallwei/avue'; import '@smallwei/avue/lib/index.css'; Vue.use(Avue); -import VueSuperSlide from 'vue-superslide' -Vue.use(VueSuperSlide) - // enable element zh-cn Vue.use(ElementUI, { zhLocale }) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 8e77dab7..823e82ea 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -7010,7 +7010,7 @@ const widgetTools = [ code: 'widgetBarCompareChart', type: 'chart', label: '柱状对比图', - icon: 'iconbianzu23', + icon: 'iconduibitupu', options: { // 配置 setup: [ @@ -7022,14 +7022,6 @@ const widgetTools = [ placeholder: '', value: '柱状对比图', }, - { - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - }, { type: 'vue-color', label: '背景颜色', @@ -7048,7 +7040,7 @@ const widgetTools = [ name: 'maxWidth', required: false, placeholder: '', - value: 20, + value: 15, }, { type: 'el-slider', @@ -7122,47 +7114,9 @@ const widgetTools = [ ], value: 'center' }, - { - type: 'el-input-text', - label: '副标题', - name: 'subText', - required: false, - placeholder: '', - value: '' - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: 'rgba(30, 144, 255, 1)' - }, - { - type: 'el-select', - label: '字体粗细', - name: 'subTextFontWeight', - required: false, - placeholder: '', - selectOptions: [ - {code: 'normal', name: '正常'}, - {code: 'bold', name: '粗体'}, - {code: 'bolder', name: '特粗体'}, - {code: 'lighter', name: '细体'} - ], - value: 'normal' - }, - { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 20 - }, ], }, - { + /*{ name: 'X轴设置', list: [ { @@ -7263,8 +7217,8 @@ const widgetTools = [ } ], - }, - { + },*/ + /*{ name: 'Y轴设置', list: [ { @@ -7355,7 +7309,7 @@ const widgetTools = [ } ], - }, + },*/ { name: '数值设定', list: [ @@ -7365,7 +7319,7 @@ const widgetTools = [ name: 'isShow', required: false, placeholder: '', - value: false + value: true }, { type: 'el-input-number', @@ -7419,7 +7373,7 @@ const widgetTools = [ }, ], }, - { + /*{ name: '坐标轴边距设置', list: [ { @@ -7452,7 +7406,7 @@ const widgetTools = [ value: 10, }, ], - }, + },*/ { name: '图例操作', list: [ @@ -7535,7 +7489,7 @@ const widgetTools = [ label: '', name: 'customColor', required: false, - value: [{color: '#ff7f50'}, {color: '#87cefa'}], + value: [{color: '#36c5e7'}, {color: '#e68b55'}], }, ], }, 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 4ee1dd6b..6be98c15 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 @@ -17,7 +17,7 @@ export default { return { options: { title: { - text: '柱状对比图', + //text: '柱状对比图', x: 'center', textStyle: { color: '#ffffff', @@ -28,7 +28,7 @@ export default { show: false, left: '4%', top: 60, - bottom: 60, + bottom: 10, containLabel: true, width: '40%' }, @@ -43,7 +43,7 @@ export default { show: false, right: '4%', top: 60, - bottom: 60, + bottom: 10, containLabel: true, width: '40%' }, @@ -61,8 +61,8 @@ export default { //itemWidth: 0 }, xAxis: [ - { - splitNumber: 2,//左间隔 + {// 左 + splitNumber: 2, type: 'value', inverse: true, axisLine: { @@ -72,14 +72,14 @@ export default { show: false, }, position: 'bottom', - axisLabel: { + axisLabel: { // x轴 show: true, textStyle: { color: '#ffffff', fontSize: 12 } }, - splitLine: { + splitLine: { // 分割线 show: true, lineStyle: { color: '#57617f', @@ -92,7 +92,7 @@ export default { gridIndex: 1, show: false, }, - { + {// 右 gridIndex: 2, type: 'value', axisLine: { @@ -177,7 +177,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, label: { normal: { show: true, @@ -207,7 +207,7 @@ export default { name: '', type: 'bar', barGap: 20, - barWidth: '80%', + barWidth: 15, xAxisIndex: 2, yAxisIndex: 2, label: { @@ -256,7 +256,7 @@ export default { handler(val) { this.optionsStyle = val.position; this.optionsData = val.data; - this.optionsCollapse = val.setup; + this.optionsSetup = val.setup; this.optionsSetup = val.setup; this.editorOptions(); }, @@ -273,8 +273,109 @@ export default { methods: { // 修改图标options属性 editorOptions() { + this.setOptionsTitle(); + this.setOptionsTop(); + this.setOptionsLegend(); + 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; + }, + // 数值设定、柱体设置 + 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, + //color: 'red', + 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; + }, + // 图例操作 + 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, + }, + } + 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; @@ -335,7 +436,6 @@ export default { this.options.series[1]['name'] = arrayList[1].name this.options.series[1]['data'] = arrayList[1].data this.options.yAxis[1]['data'] = xAxisList - /*if (optionsSetup.verticalShow) { this.options.xAxis.data = []; this.options.yAxis.data = xAxisList; diff --git a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue index 7297f22d..91a48967 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/widgetTable.vue @@ -27,7 +27,11 @@