From fee68de5515d8e3130ab89398f76f99de9870911 Mon Sep 17 00:00:00 2001 From: Raod <1130305001@qq.com> Date: Mon, 28 Jun 2021 17:56:14 +0800 Subject: [PATCH] WidgetGradientColorBarchart --- .../views/report/bigscreen/designer/tools.js | 550 ++++++------------ .../bar/widgetGradientColorBarchart.vue | 42 +- 2 files changed, 208 insertions(+), 384 deletions(-) diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 9442d7c8..2febb36f 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -1506,14 +1506,6 @@ const widgetTools = [ placeholder: '', value: '柱状图', }, - { - type: 'el-switch', - label: '竖展示', - name: 'verticalShow', - required: false, - placeholder: '', - value: false, - }, { type: 'vue-color', label: '背景颜色', @@ -1523,35 +1515,6 @@ const widgetTools = [ value: '' }, [ - // { - // name: '柱体设置', - // list: [ - // { - // type: 'el-slider', - // label: '最大宽度', - // name: 'maxWidth', - // required: false, - // placeholder: '', - // value: 10, - // }, - // { - // type: 'el-slider', - // label: '圆角', - // name: 'radius', - // require: false, - // placeholder: '', - // value: 5, - // }, - // { - // type: 'el-slider', - // label: '最小高度', - // name: 'minHeight', - // require: false, - // placeholder: '', - // value: 0, - // }, - // ], - // }, { name: '标题设置', list: [ @@ -1654,325 +1617,200 @@ const widgetTools = [ }, ], }, - // { - // name: 'X轴设置', - // list: [ - // { - // type: 'el-input-text', - // label: '名称', - // name: 'xName', - // required: false, - // placeholder: '', - // value: '' - // }, - // { - // type: 'el-switch', - // label: '显示', - // name: 'hideX', - // required: false, - // placeholder: '', - // value: true, - // }, - // { - // type: 'vue-color', - // label: '坐标名颜色', - // name: 'xNameColor', - // required: false, - // placeholder: '', - // value: '#fff' - // }, - // { - // type: 'el-input-number', - // label: '字体大小', - // name: 'xNameFontSize', - // required: false, - // placeholder: '', - // value: 12 - // }, - // { - // type: 'el-slider', - // label: '文字角度', - // name: 'textAngle', - // required: false, - // placeholder: '', - // value: 0 - // }, - // { - // type: 'el-input-number', - // label: '文字间隔', - // name: 'textInterval', - // required: false, - // placeholder: '', - // value: '' - // }, - // { - // type: 'el-switch', - // label: '轴反转', - // name: 'reversalX', - // required: false, - // placeholder: '', - // value: '' - // }, - // { - // type: 'vue-color', - // label: '颜色', - // name: 'Xcolor', - // required: false, - // placeholder: '', - // value: '#fff', - // }, - // { - // type: 'el-input-number', - // label: '字号', - // name: 'fontSizeX', - // required: false, - // placeholder: '', - // value: 12, - // }, - // ], - // }, - // { - // name: 'Y轴设置', - // list: [ - // { - // type: 'el-input-text', - // label: '名称', - // name: 'textNameY', - // require: false, - // placeholder: '', - // value: '' - // }, - // { - // type: 'el-switch', - // label: '显示', - // name: 'isShowY', - // require: false, - // placeholder: '', - // value: true, - // }, - // { - // type: 'vue-color', - // label: '坐标名颜色', - // name: 'NameColorY', - // required: false, - // placeholder: '', - // value: '#fff', - // }, - // { - // type: 'el-input-number', - // label: '字体大小', - // name: 'NameFontSizeY', - // required: false, - // placeholder: '', - // value: 12, - // }, - // { - // type: 'el-switch', - // label: '轴反转', - // name: 'reversalY', - // required: false, - // placeholder: '', - // value: false - // }, - // { - // type: 'vue-color', - // label: '颜色', - // name: 'colorY', - // required: false, - // placeholder: '', - // value: '#fff', - // }, - // { - // type: 'el-input-number', - // label: '字号', - // name: 'fontSizeY', - // required: false, - // placeholder: '', - // value: 12, - // }, - // ], - // }, - // { - // name: '数值设定', - // list: [ - // { - // type: 'el-switch', - // label: '显示', - // name: 'isShow', - // required: false, - // placeholder: '', - // value: false - // }, - // { - // type: 'el-input-number', - // label: '字体大小', - // name: 'fontSize', - // required: false, - // placeholder: '', - // value: 14 - // }, - // { - // type: 'vue-color', - // label: '字体颜色', - // name: 'subTextColor', - // required: false, - // placeholder: '', - // value: '#fff' - // }, - // { - // type: 'el-select', - // label: '字体粗细', - // name: 'fontWeight', - // required: false, - // placeholder: '', - // selectOptions: [ - // { code: 'normal', name: '正常' }, - // { code: 'bold', name: '粗体' }, - // { code: 'bolder', name: '特粗体' }, - // { code: 'lighter', name: '细体' } - // ], - // value: 'normal' - // }, - // ], - // }, - // { - // name: '提示语设置', - // list: [ - // { - // type: 'el-input-number', - // label: '字体大小', - // name: 'fontSize', - // required: false, - // placeholder: '', - // }, - // { - // type: 'vue-color', - // label: '字体颜色', - // name: 'lineColor', - // required: false, - // placeholder: '', - // }, - // ], - // }, - // { - // name: '坐标轴边距设置', - // list: [ - // { - // type: 'el-slider', - // label: '左边距(像素)', - // name: 'marginLeft', - // required: false, - // placeholder: '', - // value: 10, - // }, { - // type: 'el-slider', - // label: '顶边距(像素)', - // name: 'marginTop', - // required: false, - // placeholder: '', - // value: 50, - // }, { - // type: 'el-slider', - // label: '右边距(像素)', - // name: 'marginRight', - // required: false, - // placeholder: '', - // value: 40, - // }, { - // type: 'el-slider', - // label: '底边距(像素)', - // name: 'marginBottom', - // required: false, - // placeholder: '', - // value: 10, - // }, - // ], - // }, - // { - // name: '图例操作', - // list: [ - // { - // type: 'el-switch', - // label: '图例', - // name: 'isShowLegend', - // required: false, - // placeholder: '', - // value: true, - // }, - // { - // type: 'vue-color', - // label: '字体颜色', - // name: 'lengedColor', - // required: false, - // placeholder: '', - // value: '#fff', - // }, - // { - // type: 'el-input-number', - // label: '字体大小', - // name: 'lengedFontSize', - // required: false, - // placeholder: '', - // value: 16, - // }, - // { - // type: 'el-input-number', - // label: '图例宽度', - // name: 'lengedWidth', - // required: false, - // placeholder: '', - // value: 15, - // }, - // { - // type: 'el-select', - // label: '横向位置', - // name: 'lateralPosition', - // required: false, - // placeholder: '', - // selectOptions: [ - // { code: 'left', name: '左对齐' }, - // { code: 'right', name: '右对齐' }, - // ], - // value: '' - // }, - // { - // type: 'el-select', - // label: '纵向位置', - // name: 'longitudinalPosition', - // required: false, - // placeholder: '', - // selectOptions: [ - // { code: 'top', name: '顶部' }, - // { code: 'bottom', name: '底部' }, - // ], - // value: '' - // }, - // { - // type: 'el-select', - // label: '布局前置', - // name: 'layoutFront', - // required: false, - // placeholder: '', - // selectOptions: [ - // { code: 'vertical', name: '竖排' }, - // { code: 'horizontal', name: '横排' }, - // ], - // value: '' - // }, - // ], - // }, - // { - // name: '自定义配色', - // list: [ - // { - // type: 'customColor', - // label: '', - // name: 'customColor', - // required: false, - // value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }], - // }, - // ], - // }, + { + name: 'X轴设置', + list: [ + { + type: 'el-input-text', + label: '名称', + name: 'xName', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '显示', + name: 'hideX', + required: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'xNameColor', + required: false, + placeholder: '', + value: '#fff' + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'xNameFontSize', + required: false, + placeholder: '', + value: 12 + }, + { + type: 'el-slider', + label: '文字角度', + name: 'textAngle', + required: false, + placeholder: '', + value: 0 + }, + { + type: 'el-input-number', + label: '文字间隔', + name: 'textInterval', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalX', + required: false, + placeholder: '', + value: '' + }, + { + type: 'vue-color', + label: '颜色', + name: 'Xcolor', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字号', + name: 'fontSizeX', + required: false, + placeholder: '', + value: 12, + }, + ], + }, + { + name: 'Y轴设置', + list: [ + { + type: 'el-input-text', + label: '名称', + name: 'textNameY', + require: false, + placeholder: '', + value: '' + }, + { + type: 'el-switch', + label: '显示', + name: 'isShowY', + require: false, + placeholder: '', + value: true, + }, + { + type: 'vue-color', + label: '坐标名颜色', + name: 'NameColorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字体大小', + name: 'NameFontSizeY', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'el-switch', + label: '轴反转', + name: 'reversalY', + required: false, + placeholder: '', + value: false + }, + { + type: 'vue-color', + label: '颜色', + name: 'colorY', + required: false, + placeholder: '', + value: '#fff', + }, + { + type: 'el-input-number', + label: '字号', + name: 'fontSizeY', + required: false, + placeholder: '', + value: 12, + }, + ], + }, + { + name: '坐标轴边距设置', + list: [ + { + type: 'el-slider', + label: '左边距(像素)', + name: 'marginLeft', + required: false, + placeholder: '', + value: 10, + }, { + type: 'el-slider', + label: '顶边距(像素)', + name: 'marginTop', + required: false, + placeholder: '', + value: 50, + }, { + type: 'el-slider', + label: '右边距(像素)', + name: 'marginRight', + required: false, + placeholder: '', + value: 40, + }, { + type: 'el-slider', + label: '底边距(像素)', + name: 'marginBottom', + required: false, + placeholder: '', + value: 10, + }, + ], + }, + { + name: '渐变色', + list: [ + { + type: 'vue-color', + label: '0%处', + name: 'barStart', + required: false, + placeholder: '', + value: '#00F4FFFF' + }, + { + type: 'vue-color', + label: '100%处', + name: 'barEnd', + required: false, + placeholder: '', + value: '#004DA7FF' + }, + + ], + }, ], ], // 数据 diff --git a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue index 195c5181..e88f76a2 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/bar/widgetGradientColorBarchart.vue @@ -16,7 +16,7 @@ data() { return { options: { - backgroundColor: '#00265f', + // backgroundColor: '#00265f', "title": { "text": "政策补贴额度", x: "center", @@ -176,13 +176,13 @@ // 修改图标options属性 editorOptions() { this.setOptionsTitle() - // this.setOptionsX() - // this.setOptionsY() + this.setOptionsX() + this.setOptionsY() // this.setOptionsTop() // this.setOptionsTooltip() - // this.setOptionsMargin() + this.setOptionsMargin() // this.setOptionsLegend() - // this.setOptionsColor() + this.setOptionsColor() this.setOptionsData() }, // 标题修改 @@ -331,29 +331,17 @@ } legend.itemWidth = optionsCollapse.lengedWidth }, - // 图例颜色修改 + // 渐变色 setOptionsColor() { const optionsCollapse = this.optionsSetup - const customColor = optionsCollapse.customColor - if (!customColor) return - const arrColor = [] - for (let i = 0; i < customColor.length; i++) { - arrColor.push(customColor[i].color) - } - const itemStyle = { - normal: { - color: (params) => { - return arrColor[params.dataIndex] - }, - barBorderRadius: optionsCollapse.radius, - }, - } - for (const key in this.options.series) { - if (this.options.series[key].type == 'bar') { - this.options.series[key].itemStyle = itemStyle - } - } - this.options = Object.assign({}, this.options) + const barStart = {} + barStart['offset'] = 0 + barStart['color'] = optionsCollapse.barStart + const barEnd = {} + barStart['offset'] = 1 + barStart['color'] = optionsCollapse.barEnd + // this.options.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1,[ barStart, barEnd], false) + }, // 数据解析 setOptionsData() { @@ -419,8 +407,6 @@ .echarts { width: 100%; height: 100%; - min-width: 200px; - min-height: 200px; overflow: hidden; }