diff --git a/report-ui/src/views/report/bigscreen/designer/tools.js b/report-ui/src/views/report/bigscreen/designer/tools.js index 61e87cb2..46014bfa 100644 --- a/report-ui/src/views/report/bigscreen/designer/tools.js +++ b/report-ui/src/views/report/bigscreen/designer/tools.js @@ -5324,7 +5324,7 @@ const widgetTools = [ name: 'isNoTitle', required: false, placeholder: '', - value: true + value: true, }, { type: 'el-input-text', @@ -5332,7 +5332,7 @@ const widgetTools = [ name: 'titleText', required: false, placeholder: '', - value: '' + value: '', }, { type: 'vue-color', @@ -5340,7 +5340,7 @@ const widgetTools = [ name: 'textColor', required: false, placeholder: '', - value: '#fff' + value: '#FFD700' }, { type: 'el-select', @@ -5375,28 +5375,33 @@ const widgetTools = [ { code: 'left', name: '左对齐' }, { code: 'right', name: '右对齐' }, ], - value: 'left' - }, + value: 'center' + } + ], + }, + { + name: '数值设置', + list: [ { - type: 'el-input-text', - label: '副标题', - name: 'subText', + type: 'vue-color', + label: '数值颜色', + name: 'textColor', required: false, placeholder: '', - value: '' + value: '#fff' }, { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', + type: 'el-input-number', + label: '数值字体', + name: 'textFontSize', required: false, placeholder: '', - value: '' + value: 60 }, { type: 'el-select', label: '字体粗细', - name: 'subTextFontWeight', + name: 'textFontWeight', required: false, placeholder: '', selectOptions: [ @@ -5408,62 +5413,25 @@ const widgetTools = [ value: 'normal' }, { - type: 'el-input-number', - label: '字体大小', - name: 'subTextFontSize', - required: false, - placeholder: '', - value: 12 - }, - ], - }, -/* { - name: '数值设定', - list: [ - { - type: 'el-switch', - label: '显示', - name: 'isShow', + type: 'vue-color', + label: '%号颜色', + name: 'textPerColor', 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, + value: '#fff' }, { type: 'el-input-number', - label: '字体大小', - name: 'fontSize', + label: '%号字体', + name: 'textPerFontSize', required: false, placeholder: '', - value: 14, - }, - { - type: 'vue-color', - label: '字体颜色', - name: 'subTextColor', - required: false, - placeholder: '', - value: '' + value: 30 }, { type: 'el-select', label: '字体粗细', - name: 'fontWeight', + name: 'textPerFontWeight', required: false, placeholder: '', selectOptions: [ @@ -5473,28 +5441,7 @@ const widgetTools = [ { code: 'lighter', name: '细体' } ], value: 'normal' - }, - ], - },*/ - { - name: '提示语设置', - list: [ - { - type: 'el-input-number', - label: '字体大小', - name: 'fontSize', - required: false, - placeholder: '', - value: 12 - }, - { - type: 'vue-color', - label: '网格线颜色', - name: 'lineColor', - required: false, - placeholder: '', - value: '' - }, + } ], }, { @@ -5570,18 +5517,6 @@ const widgetTools = [ }, ], }, -/* { - name: '自定义配色', - list: [ - { - type: 'customColor', - label: '', - name: 'customColor', - required: false, - value: [{ color: '#FF801C' }, { color: '#F5FF46' }, { color: '#00FE65' }, { color: '#00FEFF' }, { color: '#ffa800' }] - }, - ], - },*/ ], ], // 数据 @@ -5621,7 +5556,7 @@ const widgetTools = [ placeholder: 'px', relactiveDom: 'dataType', relactiveDomValue: 'staticData', - value: '[{"value": 1048,"name": "搜索引擎"},{"value": 735, "name": "直接访问"},{"value": 580, "name": "邮件营销"},{"value": 484,"name":"联盟广告"},{"value":300,"name":"视频广告"}]', + value: 60, }, { type: 'dycustComponents', diff --git a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue index 9e872159..9c5db24b 100644 --- a/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue +++ b/report-ui/src/views/report/bigscreen/designer/widget/pie/widgetPiePercentageChart.vue @@ -18,7 +18,7 @@ export default { options: { //backgroundColor: '#061740', title: { - text: '{nums|' + this.value2() + '}{percent|%}', + text: '{nums|' + 60 + '}{percent|%}', x: 'center', y: 'center', textStyle: { @@ -29,7 +29,7 @@ export default { }, percent: { fontSize: 30, - color: '#ffffff', + color: '#29EEF3', }, }, }, @@ -183,7 +183,7 @@ export default { data: [0], }, { - name: 'ring5', //绿点 + //name: 'ring5', //绿点 type: 'custom', coordinateSystem: 'none', renderItem: (params, api) => { @@ -223,7 +223,7 @@ export default { }, data: [ { - value: this.value2(), + value: 60, name: '', itemStyle: { normal: { @@ -244,7 +244,7 @@ export default { }, }, { - value: 100 - this.value2(), + value: 40, name: '', label: { normal: { @@ -260,13 +260,13 @@ export default { ], }, { - name: '', + name: 'percent', type: 'gauge', radius: '58%', center: ['50%', '50%'], startAngle: 0, endAngle: 359.9, - splitNumber: 8, + splitNumber: -1, hoverAnimation: true, axisTick: { show: false, @@ -291,20 +291,18 @@ export default { }, detail: { show: false, + textStyle: { + fontSize: 12 + } }, - data: [ - { - value: 0, - name: '', - }, - ], + data: [], }, ], }, - /* optionsStyle: {}, // 样式 - optionsData: {}, // 数据 - optionsCollapse: {}, // 图标属性 - optionsSetup: {}*/ + optionsStyle: {}, // 样式 + optionsData: {}, // 数据 + optionsCollapse: {}, // 图标属性 + optionsSetup: {} }; }, computed: { @@ -339,22 +337,12 @@ export default { this.editorOptions(); }, mounted() { -/* setInterval(() => { - //this.angle = this.angle + 3 - //myChart.setOption(option,true) - }, 100);*/ + /* setInterval(() => { + //this.angle = this.angle + 3 + //myChart.setOption(option,true) + }, 100);*/ }, methods: { - // 修改图标options属性 - editorOptions() { - this.setOptionsTitle(); - // this.setOptionsValue(); - // this.setOptionsTooltip(); - // this.setOptionsLegend(); - // this.setOptionsColor(); - // this.setOptionsData(); - - }, //轴point设置 getCirlPoint(x0, y0, r, x) { let x1 = x0 + r * Math.cos((x * Math.PI) / 180); @@ -364,113 +352,98 @@ export default { y: y1, }; }, - value2(){ - return 50; + editorOptions() { + //this.setOptionsTitle(); + //this.setOptionsTooltip(); + //this.setOptionsLegend(); + //this.setOptionsColor(); + this.setOptionsData(); }, - // 标题设置 setOptionsTitle() { const optionsCollapse = this.optionsSetup; - const title = {}; - title.show = optionsCollapse.isNoTitle; - title.text = optionsCollapse.titleText; - title.left = optionsCollapse.textAlign; - title.textStyle = { - color: optionsCollapse.textColor, - fontSize: optionsCollapse.textFontSize, - fontWeight: optionsCollapse.textFontWeight - }; - title.subtext = optionsCollapse.subText; - title.subtextStyle = { - color: optionsCollapse.subTextColor, - fontWeight: optionsCollapse.subTextFontWeight, - fontSize: optionsCollapse.subTextFontSize + const title = this.options.title; + title.x = "center"; + title.y = "center"; + const rich = { + nums: { + fontSize: optionsCollapse.textFontSize, + color: optionsCollapse.textColor + }, + percent: { + fontSize: optionsCollapse.textPerFontSize, + color: optionsCollapse.textPerColor + } }; - + title.textStyle['rich'] = rich; this.options.title = title; }, - // 数值设定 - setOptionsValue() { - const optionsCollapse = this.optionsSetup; + setOptions() { + const optionsSetup = this.optionsSetup; const series = this.options.series; - const numberValue = optionsCollapse.numberValue ? "{c}" : ""; - const percentage = optionsCollapse.percentage ? "({d})%" : ""; - const label = { - show: optionsCollapse.isShow, - formatter: `{a|{b}：${numberValue} ${percentage}}`, - rich: { - a: { - padding: [-30, 15, -20, 15], - color: optionsCollapse.subTextColor, - fontSize: optionsCollapse.fontSize, - fontWeight: optionsCollapse.fontWeight - } - }, - fontSize: optionsCollapse.fontSize, - - fontWeight: optionsCollapse.optionsCollapse - }; for (const key in series) { - if (series[key].type == "pie") { - series[key].label = label; - series[key].labelLine = {show: optionsCollapse.isShow}; + if (series[key].type == "gauge") { + series[key].axisLine.lineStyle.width = optionsSetup.tickMarkWeight; + series[key].axisLabel.show = optionsSetup.showScaleValue; + series[key].axisLabel.fontSize = optionsSetup.scaleFontSize; + series[key].axisTick.show = optionsSetup.showTickMarks; + series[key].detail.textStyle.fontSize = optionsSetup.targetFontSize; } } }, - // 提示语设置 tooltip - setOptionsTooltip() { - const optionsCollapse = this.optionsSetup; - const tooltip = { - trigger: "item", - show: true, - textStyle: { - color: optionsCollapse.lineColor, - fontSize: optionsCollapse.fontSize - } - }; - this.options.tooltip = tooltip; - }, - // 图例操作 legend - setOptionsLegend() { - const optionsCollapse = this.optionsSetup; - const legend = this.options.legend; - legend.show = optionsCollapse.isShowLegend; - legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto"; - legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto"; - legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto"; - legend.bottom = - optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto"; - legend.orient = optionsCollapse.layoutFront; - legend.textStyle = { - color: optionsCollapse.lengedColor, - fontSize: optionsCollapse.fontSize - }; - 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); - } - this.options.color = arrColor; - this.options = Object.assign({}, this.options); + setOptionPer(val) { + const data = this.options.series[6]['data']; + data.forEach((ev, index) => { + if (index == 0) { + ev.value = val + const itemStyle = { + normal: { + color: { + colorStops: [ + { + offset: 0, + color: '#4FADFD', // 0% 处的颜色 + }, + { + offset: 1, + color: '#28E8FA', // 100% 处的颜色 + }, + ] + } + } + }; + data['itemStyle'] = itemStyle + } else if (index == 1){ + ev.value = (100 - val) + const label = { + normal: { + show: false, + }, + }; + const itemStyle = { + normal: { + color: '#173164', + }, + }; + data['label'] = label; + data['itemStyle'] = itemStyle; + }else{}; + }) + console.log(data) }, + // 数据解析 setOptionsData() { const optionsData = this.optionsData; // 数据类型 静态 or 动态 optionsData.dataType == "staticData" ? this.staticDataFn(optionsData.staticData) - : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); + : this.dynamicDataFn( + optionsData.dynamicData, + optionsData.refreshTime + ); }, staticDataFn(val) { - const staticData = JSON.parse(val); - for (const key in this.options.series) { - if (this.options.series[key].type == "pie") { - this.options.series[key].data = staticData; - } - } + const title = this.options.title; + title.text = '{nums|' + val + '}{percent|%}'; + this.setOptionPer(val) }, dynamicDataFn(val, refreshTime) { if (!val) return; @@ -486,15 +459,9 @@ export default { getEchartData(val) { const data = this.queryEchartsData(val); data.then(res => { - this.renderingFn(res); + this.styleColor.text = res[0].value + this.$forceUpdate(); }); - }, - renderingFn(val) { - for (const key in this.options.series) { - if (this.options.series[key].type == "pie") { - this.options.series[key].data = val; - } - } } } };