diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js index 5bd5d8d7..a8396956 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js @@ -63,6 +63,45 @@ export const widgetPieNightingale = { placeholder: '', value: 60, }, + { + type: 'el-switch', + label: '顺时针排布', + name: 'clockwise', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-select', + label: '起始角度', + name: 'startAngle', + required: false, + placeholder: '', + selectOptions: [ + { code: 0, name: '0度' }, + { code: 30, name: '30度' }, + { code: 90, name: '90度' }, + { code: 180, name: '180度' }, + { code: 360, name: '360度' } + ], + value: 90 + }, + { + type: 'el-slider', + label: '最小角度', + name: 'minAngle', + require: false, + placeholder: '', + value: 0, + }, + { + type: 'el-slider', + label: '不显示标签角度', + name: 'minShowLabelAngle', + require: false, + placeholder: '', + value: 0, + }, /* { type: 'el-slider', label: '圆角属性', @@ -201,86 +240,6 @@ export const widgetPieNightingale = { }, ], }, - { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', - required: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '数值', - name: 'numberValue', - require: false, - placeholder: '', - value: true, - }, - { - type: 'el-switch', - label: '百分比', - name: 'percentage', - require: false, - placeholder: '', - value: false, - }, - { - type: 'el-input-number', - label: '字体字号', - name: 'fontSize', - required: false, - placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'dataColor', - required: false, - placeholder: '', - value: '' - }, - { - 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: 'tipsFontSize', - required: false, - placeholder: '', - value: 16 - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'tipsColor', - required: false, - placeholder: '', - value: '#00FEFF' - }, - ], - }, { name: '图例操作', list: [ @@ -355,6 +314,367 @@ export const widgetPieNightingale = { }, ], }, + { + name: '扇区设置', + list: [ + { + type: 'el-switch', + label: '文字高亮', + name: 'isShowEmphasisLabel', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'emphasisLabelFontSize', + required: false, + placeholder: '', + value: 24, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'emphasisLabelFontColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'emphasisLabelFontWeight', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } + ], + value: 'bold' + }, + { + type: 'el-select', + label: '字体风格', + name: 'emphasisLabelFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'emphasisLabelFontFamily', + required: false, + placeholder: '', + selectOptions: [ + { code: 'Microsoft YaHei', name: '微软雅黑' }, + { code: 'serif', name: 'serif字体' }, + { code: 'Arial', name: 'Arial字体' }, + { code: 'Courier New', name: 'Courier New字体' }, + ], + value: 'Microsoft YaHei' + }, + { + type: 'vue-color', + label: '描边颜色', + name: 'borderColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-input-number', + label: '描边宽度', + name: 'borderWidth', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'el-select', + label: '描边类型', + name: 'borderType', + required: false, + placeholder: '', + selectOptions: [ + { code: 'solid', name: '实线' }, + { code: 'dashed', name: '虚线' }, + { code: 'dotted', name: '斑点' }, + ], + value: 'solid' + }, + { + type: 'el-input-number', + label: '阴影系数', + name: 'shadowBlur', + required: false, + placeholder: '', + value: 10 + }, + { + type: 'vue-color', + label: '阴影颜色', + name: 'shadowColor', + required: false, + placeholder: '', + value: 'rgba(0, 0, 0, 0.5)' + }, + ], + }, + { + name: '数值设定', + list: [ + { + type: 'el-switch', + label: '显示', + name: 'isShow', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '数值显示', + name: 'numberValue', + require: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '百分比显示', + name: 'percentage', + require: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '小数点位数', + name: 'percentPrecision', + required: false, + placeholder: '', + value: 2, + }, + { + type: 'el-select', + label: '位置', + name: 'position', + required: false, + placeholder: '', + selectOptions: [ + { code: 'outside', name: '扇区外侧' }, + { code: 'inside', name: '扇区内侧' }, + { code: 'center', name: '扇区中心' } + ], + value: 'outside' + }, + { + type: 'el-input-number', + label: '边距', + name: 'padding', + require: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '角度', + name: 'rotate', + require: false, + placeholder: '', + value: 0, + }, + { + type: 'el-input-number', + label: '字体字号', + name: 'fontSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'fontColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'fontWeight', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'fontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'fontFamily', + required: false, + placeholder: '', + selectOptions: [ + { code: 'Microsoft YaHei', name: '微软雅黑' }, + { code: 'serif', name: 'serif字体' }, + { code: 'Arial', name: 'Arial字体' }, + { code: 'Courier New', name: 'Courier New字体' }, + ], + value: 'Microsoft YaHei' + }, + { + type: 'el-switch', + label: '引导线显示', + name: 'isShowLabelLine', + required: false, + placeholder: '', + value: true, + }, + { + type: 'el-switch', + label: '平滑引导线', + name: 'labelLineSmooth', + required: false, + placeholder: '', + value: false, + }, + { + type: 'el-input-number', + label: '第一段长度', + name: 'labelLineLength', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'el-input-number', + label: '第二段长度', + name: 'labelLineLength2', + required: false, + placeholder: '', + value: 15, + }, + { + type: 'vue-color', + label: '线条颜色', + name: 'lineStyleColor', + required: false, + placeholder: '', + value: '' + }, + { + type: 'el-input-number', + label: '线条宽度', + name: 'lineStyleWidth', + required: false, + placeholder: '', + value: 1 + }, + { + type: 'el-select', + label: '线条类型', + name: 'lineStyleType', + required: false, + placeholder: '', + selectOptions: [ + { code: 'solid', name: '实线' }, + { code: 'dashed', name: '虚线' }, + { code: 'dotted', name: '斑点' }, + ], + value: 'solid' + }, + ], + }, + { + name: '提示语设置', + list: [ + { + type: 'el-input-number', + label: '字体字号', + name: 'tipsFontSize', + required: false, + placeholder: '', + value: 16 + }, + { + type: 'vue-color', + label: '字体颜色', + name: 'tipsColor', + required: false, + placeholder: '', + value: '#00FEFF' + }, + { + type: 'el-select', + label: '字体粗细', + name: 'tipsFontWeight', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'bold', name: '粗体' }, + { code: 'bolder', name: '特粗体' }, + { code: 'lighter', name: '细体' } + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体风格', + name: 'tipsFontStyle', + required: false, + placeholder: '', + selectOptions: [ + { code: 'normal', name: '正常' }, + { code: 'italic', name: 'italic斜体' }, + { code: 'oblique', name: 'oblique斜体' }, + ], + value: 'normal' + }, + { + type: 'el-select', + label: '字体系列', + name: 'tipsFontFamily', + required: false, + placeholder: '', + selectOptions: [ + { code: 'Microsoft YaHei', name: '微软雅黑' }, + { code: 'serif', name: 'serif字体' }, + { code: 'Arial', name: 'Arial字体' }, + { code: 'Courier New', name: 'Courier New字体' }, + ], + value: 'Microsoft YaHei' + }, + ], + }, { name: '自定义配色', list: [ @@ -465,7 +785,7 @@ export const widgetPieNightingale = { name: 'height', required: false, placeholder: '该容器在1080px大屏中的高度', - value: 200, + value: 300, }, ], } diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js index 79cd0c59..c16eec70 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js @@ -261,7 +261,7 @@ export const widgetPiechart = { name: 'legendWidth', required: false, placeholder: '', - value: 15, + value: 14, }, { type: 'el-select', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue index 84769afc..9a30ba8d 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPieNightingaleRose.vue @@ -89,12 +89,12 @@ export default { methods: { // 修改图标options属性 editorOptions() { + this.setOptionsPie(); this.setOptionsTitle(); this.setOptionsValue(); this.setOptionsTooltip(); this.setOptionsLegend(); this.setOptionsColor(); - this.setOptionsPie(); this.setOptionsData(); }, // 饼图设置 @@ -102,14 +102,42 @@ export default { const optionsSetup = this.optionsSetup; const series = { type: "pie", + center: ["50%", "50%"], // 饼图模式 面积模式"area" 半径模式"radius"//name: "面积模式", roseType: optionsSetup.nightingaleRoseType, radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"], - center: ["50%", "50%"], + clockwise: optionsSetup.clockwise, + startAngle: optionsSetup.startAngle, + minAngle: optionsSetup.minAngle, + minShowLabelAngle: optionsSetup.minShowLabelAngle, + percentPrecision: optionsSetup.percentPrecision, // echarts v5.0.0开始支持 -/* itemStyle: { - borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"], - },*/ + /* itemStyle: { + borderRadius: [optionsSetup.borderRadius + "%", optionsSetup.borderRadius + "%"], + },*/ + // 高亮的扇区 + emphasis: { + label: { + show: optionsSetup.isShowEmphasisLabel, + color: optionsSetup.emphasisLabelFontColor == '' ? null : optionsSetup.EmphasisLabelFontColor, + fontSize: optionsSetup.emphasisLabelFontSize, + fontWeight: optionsSetup.emphasisLabelFontWeight, + fontStyle: optionsSetup.emphasisLabelFontStyle, + fontFamily: optionsSetup.emphasisLabelFontFamily, + }, + // 视觉引导线 + labelLine: { + show: false, + }, + // 色块描边 + itemStyle: { + borderColor: optionsSetup.borderColor == '' ? null : optionsSetup.borderColor, + borderWidth: optionsSetup.borderWidth, + borderType: optionsSetup.borderType, + shadowBlur: optionsSetup.shadowBlur, + shadowColor: optionsSetup.shadowColor, + }, + }, }; this.options.series[0] = series; }, @@ -138,72 +166,67 @@ export default { // 数值设定 setOptionsValue() { const optionsSetup = this.optionsSetup; - const series = this.options.series; - const numberValue = optionsSetup.numberValue ? "{c}" : ""; - const percentage = optionsSetup.percentage ? "({d})%" : ""; + const numberValue = optionsSetup.numberValue ? "\n{c}" : ""; + const percentage = optionsSetup.percentage ? "\n({d}%)" : ""; const label = { show: optionsSetup.isShow, - formatter: `{a|{b}:${numberValue} ${percentage}}`, - rich: { - a: { - padding: [-30, 15, -20, 15], - color: optionsSetup.dataColor, - fontSize: optionsSetup.fontSize, - fontWeight: optionsSetup.fontWeight, - }, - }, + position: optionsSetup.position, + rotate: optionsSetup.rotate, + formatter: `{b}${numberValue}${percentage}`, + padding: optionsSetup.padding, fontSize: optionsSetup.fontSize, - - fontWeight: optionsSetup.optionsSetup, + color: optionsSetup.fontColor == '' ? null : optionsSetup.fontColor, + fontWeight: optionsSetup.fontWeight, + fontStyle: optionsSetup.fontStyle, + fontFamily: optionsSetup.fontFamily, }; - for (const key in series) { - if (series[key].type == "pie") { - series[key].label = label; - series[key].labelLine = {show: optionsSetup.isShow}; + // 引导线 + const labelLine = { + show: optionsSetup.isShowLabelLine, + length: optionsSetup.labelLineLength, + length2: optionsSetup.labelLineLength2, + smooth: optionsSetup.labelLineSmooth, + lineStyle: { + color: optionsSetup.lineStyleColor == '' ? null : optionsSetup.lineStyleColor, + width: optionsSetup.lineStyleWidth, + type: optionsSetup.lineStyleType, } } + this.options.series[0].label = label; + this.options.series[0].labelLine = labelLine; }, // tooltip 设置 setOptionsTooltip() { const optionsSetup = this.optionsSetup; const tooltip = { trigger: "item", - show: true, textStyle: { color: optionsSetup.tipsColor, fontSize: optionsSetup.tipsFontSize, + fontWeight: optionsSetup.tipsFontWeight, + fontStyle: optionsSetup.tipsFontStyle, + fontFamily: optionsSetup.tipsFontFamily, }, }; this.options.tooltip = tooltip; }, - // 边距设置 - setOptionsMargin() { - const optionsSetup = this.optionsSetup; - const grid = { - left: optionsSetup.marginLeft, - right: optionsSetup.marginRight, - bottom: optionsSetup.marginBottom, - top: optionsSetup.marginTop, - containLabel: true, - }; - this.options.grid = grid; - }, // 图例操作 legend setOptionsLegend() { const optionsSetup = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsSetup.isShowLegend; - legend.left = optionsSetup.lateralPosition; - legend.right = optionsSetup.lateralPosition; - legend.top = optionsSetup.longitudinalPosition; - legend.bottom = - optionsSetup.longitudinalPosition; - legend.orient = optionsSetup.layoutFront; - legend.textStyle = { - color: optionsSetup.legendColor, - fontSize: optionsSetup.legendFontSize, - }; - legend.itemWidth = optionsSetup.legendWidth; + const legend = { + show: optionsSetup.isShowLegend, + left: optionsSetup.lateralPosition, + right: optionsSetup.lateralPosition, + top: optionsSetup.longitudinalPosition, + bottom: optionsSetup.longitudinalPosition, + orient: optionsSetup.layoutFront, + textStyle: { + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize, + }, + itemWidth: optionsSetup.legendWidth, + } + this.options.legend = legend; }, // 图例颜色修改 setOptionsColor() { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue index 21b3b5a9..5d102d1b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue @@ -102,13 +102,13 @@ export default { this.setOptionsLegend(); this.setOptionsColor(); this.setOptionsData(); - this.setOptionsPiechartStyle(); }, // 饼图设置 setOptionsPie() { const optionsSetup = this.optionsSetup; const series = { type: "pie", + center: ["50%", "50%"], radius: [optionsSetup.innerNumber + "%", optionsSetup.outerNumber + "%"], clockwise: optionsSetup.clockwise, startAngle: optionsSetup.startAngle, @@ -218,19 +218,20 @@ export default { // 图例操作 legend setOptionsLegend() { const optionsSetup = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsSetup.isShowLegend; - legend.left = optionsSetup.lateralPosition; - legend.right = optionsSetup.lateralPosition; - legend.top = optionsSetup.longitudinalPosition; - legend.bottom = - optionsSetup.longitudinalPosition; - legend.orient = optionsSetup.layoutFront; - legend.textStyle = { - color: optionsSetup.legendColor, - fontSize: optionsSetup.legendFontSize, - }; - legend.itemWidth = optionsSetup.legendWidth; + const legend = { + show: optionsSetup.isShowLegend, + left: optionsSetup.lateralPosition, + right: optionsSetup.lateralPosition, + top: optionsSetup.longitudinalPosition, + bottom: optionsSetup.longitudinalPosition, + orient: optionsSetup.layoutFront, + textStyle: { + color: optionsSetup.legendColor, + fontSize: optionsSetup.legendFontSize, + }, + itemWidth: optionsSetup.legendWidth, + } + this.options.legend = legend; }, // 图例颜色修改 setOptionsColor() {