From 7d6a0e228f5dc378defe202865c98f641cc7f79f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Fri, 19 Jul 2024 08:37:54 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/copilot/components/BarChartBase.vue | 54 +++++---- .../copilot/components/ftoBarChartBase.vue | 56 ++++----- .../components/sub/bar/BarChartChipOEE.vue | 53 +++++---- .../components/sub/bar/BarChartChipTrans.vue | 61 +++++----- .../copilot/efficiency/options/chipOptions.js | 50 ++++++-- .../factoryData/components/BarChartBase.vue | 45 ++++---- .../components/BarChartChipOEE.vue | 81 +++++++------ .../copilot/factoryData/components/Order.vue | 22 ++-- .../factoryData/components/chartButton.vue | 6 +- .../components/sub/ring/DoubleRingChart.vue | 16 ++- .../options/double-ring-chart-options.js | 80 +++++++++---- src/views/dashboard/charts/ChipYieldChart.vue | 108 ++++++++++++------ src/views/dashboard/charts/LeftChartBase.vue | 80 +++++++------ src/views/dashboard/charts/RightChartBase.vue | 72 ++++++------ .../dashboard/components/CompanyInfo.vue | 4 +- src/views/index.vue | 4 +- 16 files changed, 467 insertions(+), 325 deletions(-) diff --git a/src/views/copilot/components/BarChartBase.vue b/src/views/copilot/components/BarChartBase.vue index 633ad01..f18bc4e 100644 --- a/src/views/copilot/components/BarChartBase.vue +++ b/src/views/copilot/components/BarChartBase.vue @@ -70,22 +70,26 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', formatter: params => { - console.log('params', params) - var res = `${params[0].axisValueLabel}`; + var res = `${params[0].axisValueLabel}`; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); res += "
" + - `` + - `${params[i].seriesName}` + - `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value : 0}`; } - return res; + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; }, }, xAxis: { @@ -98,24 +102,24 @@ export default { }, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, data: this.xAxis, }, yAxis: { name: "单位/片", nameTextStyle: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, align: "right", }, axisTick: { show: false, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisLine: { show: true, @@ -133,7 +137,7 @@ export default { { name: "", // this.series[0].name, type: "bar", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -168,7 +172,7 @@ export default { { name: "", // this.series[1].name, type: "bar", - barWidth: 12, + barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; @@ -214,18 +218,18 @@ export default { }, isFullscreen(val) { this.options.series.map((item) => { - item.barWidth = val ? 18 : 12; + item.barWidth = val ? 18 : 16; }); - this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options); // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.initChart(this.actualOptions); this.canvasReset() }, diff --git a/src/views/copilot/components/ftoBarChartBase.vue b/src/views/copilot/components/ftoBarChartBase.vue index ccf405e..f7fb8a0 100644 --- a/src/views/copilot/components/ftoBarChartBase.vue +++ b/src/views/copilot/components/ftoBarChartBase.vue @@ -1,7 +1,7 @@ @@ -71,22 +71,26 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', formatter: params => { - console.log('params', params) - var res = `${params[0].axisValueLabel}`; + var res = `${params[0].axisValueLabel}`; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); res += "
" + - `` + - `${params[i].seriesName}` + - `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value : 0 }`; } - return res; + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; }, }, xAxis: { @@ -99,24 +103,24 @@ export default { }, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, data: this.xAxis, }, yAxis: { name: "单位/片", nameTextStyle: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, align: "right", }, axisTick: { show: false, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisLine: { show: true, @@ -134,7 +138,7 @@ export default { { name: "", // this.series[0].name, type: "bar", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -169,7 +173,7 @@ export default { { name: "", // this.series[1].name, type: "bar", - barWidth: 12, + barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; @@ -215,18 +219,18 @@ export default { }, isFullscreen(val) { this.options.series.map((item) => { - item.barWidth = val ? 18 : 12; + item.barWidth = val ? 18 : 16; }); - this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options); // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.initChart(this.actualOptions); this.canvasReset() }, diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue index 0ff569d..8c0212e 100644 --- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue +++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -70,12 +70,11 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', formatter: params => { console.log('params', params) - var res = `${params[0].axisValueLabel}`; + var res = `${params[0].axisValueLabel}`; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); @@ -85,10 +84,16 @@ export default { ? '' : `` }` + - `${params[i].seriesName}` + - `${params[i].value ? params[i].value + '%' : 0 + '%'}`; + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '%' : 0 + '%'}`; } - return res; + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; }, }, xAxis: { @@ -101,23 +106,23 @@ export default { }, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, data: this.xAxis, }, yAxis: { name: "单位/%", nameTextStyle: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisTick: { show: false, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisLine: { show: true, @@ -135,7 +140,7 @@ export default { { name: "", // this.series[0].name, type: "bar", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -170,7 +175,7 @@ export default { { name: "", // this.series[1].name, type: "bar", - barWidth: 12, + barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; @@ -250,11 +255,11 @@ export default { /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ isFullscreen(val) { // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // if (val === false && this.isOpen === true) { // console.log(val) // this.width = 97 + '%' @@ -264,11 +269,11 @@ export default { // this.canvasReset() // } // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options) this.canvasReset() }, diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue index c048f9f..69bd295 100644 --- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue +++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue @@ -1,7 +1,7 @@ @@ -70,25 +70,30 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', formatter: params => { console.log('params', params) - var res = `${params[0].axisValueLabel}`; + var res = `${params[0].axisValueLabel}`; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); res += "
" + - `${params[i].seriesType === "line" - ? '' - : `` - }` + - `${params[i].seriesName}` + - `${params[i].value ? params[i].value + '%' : 0 + '%'}`; + `${params[i].seriesType === "line" + ? '' + : `` + }` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value + '%' : 0 + '%'}`; } - return res; + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; }, }, xAxis: { @@ -101,23 +106,23 @@ export default { }, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, data: this.xAxis, }, yAxis: { name: "单位/%", nameTextStyle: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisTick: { show: false, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisLine: { show: true, @@ -135,7 +140,7 @@ export default { { name: "", // this.series[0].name, type: "bar", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -170,7 +175,7 @@ export default { { name: "", // this.series[1].name, type: "bar", - barWidth: 12, + barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; @@ -250,11 +255,11 @@ export default { /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ isFullscreen(val) { // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // if (val === false && this.isOpen === true) { // console.log(val) // this.width = 97 + '%' @@ -264,11 +269,11 @@ export default { // this.canvasReset() // } // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options) this.canvasReset() }, diff --git a/src/views/copilot/efficiency/options/chipOptions.js b/src/views/copilot/efficiency/options/chipOptions.js index 9ef3b4f..a3f8408 100644 --- a/src/views/copilot/efficiency/options/chipOptions.js +++ b/src/views/copilot/efficiency/options/chipOptions.js @@ -24,18 +24,18 @@ title: { text: titleValue, left: "48%", - top: "37%", + top: "middle", textAlign: "center", textStyle: { fontWeight: 600, fontSize: 36, - color: "#fffd", + color: "rgba(223,241,254,.8)", }, subtext: `\u2002${yesterday + '日良率'}\u2002`, subtextStyle: { fontSize: 16, fontWeight: 100, - color: "#fffd", + color: "rgba(255,255,255,.7)", align: "right", }, }, @@ -67,8 +67,15 @@ value: currentSum, name: currentName, tooltip: { - formatter: `${currentName}` + - `${currentSum}` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', + formatter:` +
+ + ${currentName} + ${currentSum} +
+ ` }, selected: false, itemStyle: { @@ -93,8 +100,15 @@ value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), name: currentName, tooltip: { - formatter: `${currentName}` + - `${currentSum}` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', + formatter:` +
+ + ${currentName} + ${currentSum} +
+ ` }, itemStyle: { color: "transparent" }, label: { show: false }, @@ -118,8 +132,15 @@ value: previousSum, name: preName, tooltip: { - formatter: `${preName}` + - `${previousSum}` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', + formatter:` +
+ + ${preName} + ${previousSum} +
+ ` }, selected: false, itemStyle: { @@ -144,8 +165,15 @@ value:previousSum === 0 ? 1 : 0, name: preName, tooltip: { - formatter: `${preName}` + - `${previousSum}` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', + formatter:` +
+ + ${preName} + ${previousSum} +
+ ` }, itemStyle: { color: "transparent" }, label: { show: false }, diff --git a/src/views/copilot/factoryData/components/BarChartBase.vue b/src/views/copilot/factoryData/components/BarChartBase.vue index 76c4f9f..8bf1db4 100644 --- a/src/views/copilot/factoryData/components/BarChartBase.vue +++ b/src/views/copilot/factoryData/components/BarChartBase.vue @@ -55,7 +55,7 @@ export default { options: { color: ["#FFD160", "#2760FF", "#12FFF5"], grid: { - left: "6%", + left: "9%", right: "3%", bottom: "15%", top: "15%", @@ -68,21 +68,26 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', formatter: params => { - console.log('params', params) var res = ``; for (var i = 0, l = params.length; i < l; i++) { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' // console.log(item.color, color); res += - `` + - `${params[0].axisValueLabel}` + - `${params[i].value ? params[i].value + '片' : 0 + '片'}`; + `` + + `${params[0].axisValueLabel}` + + `${params[i].value ? params[i].value : 0}`; } - return res; + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; + // return res; }, }, xAxis: { @@ -97,8 +102,8 @@ export default { axisLabel: { interval: 0,//设置横坐标为斜 rotate:45, - color: "rgba(255, 255, 255, 0.7)", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, // formatter: function (value) { // console.log(value); @@ -119,16 +124,16 @@ export default { name: "单位/片", position: 'left', nameTextStyle: { - color: "rgba(255, 255, 255, 0.7)", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, align: "right", }, axisTick: { show: false, }, axisLabel: { - color: "rgba(255, 255, 255, 0.7)", - fontSize: 10, + color: "rgba(223,241,254,.8)", + fontSize:16, }, axisLine: { show: true, @@ -196,7 +201,7 @@ export default { // { offset: 1, color: "#12FFF5" + "00" }, // ]), // }, - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -240,11 +245,11 @@ export default { /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ // isFullscreen(val) { // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.initOptions(this.actualOptions); // }, // series(val) { diff --git a/src/views/copilot/factoryData/components/BarChartChipOEE.vue b/src/views/copilot/factoryData/components/BarChartChipOEE.vue index de0191e..b19919a 100644 --- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue +++ b/src/views/copilot/factoryData/components/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -9,7 +9,7 @@
{{ item.label }} + :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}
@@ -56,7 +56,7 @@ export default { actualOptions: null, options: { grid: { - left: "5%", + left: "8%", right: "0%", bottom: "3%", top: "15%", @@ -97,23 +97,28 @@ export default { color: "rgba(237,237,237,0.5)", }, }, - extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', - backgroundColor: '#001829', - borderColor: '#001829', - formatter: params => { - console.log('params', params) - var res = `${params[0].axisValueLabel}`; - for (var i = 0, l = params.length; i < l; i++) { - let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' - // console.log(item.color, color); - res += - "
" + - `` + - `${params[i].seriesName}` + - `${params[i].value ? params[i].value + '片' : 0 + '片'}`; - } - return res; - }, + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 + extraCssText: 'padding:0;border-width:0', + formatter: params => { + var res = `${params[0].axisValueLabel}`; + for (var i = 0, l = params.length; i < l; i++) { + let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' + // console.log(item.color, color); + res += + "
" + + `` + + `${params[i].seriesName}` + + `${params[i].value ? params[i].value : 0}`; + } + const htmlContent = ` +
+ ${res} +
+ `; + + return htmlContent; + // return res; + }, }, xAxis: { axisTick: { @@ -125,8 +130,8 @@ export default { }, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, data: this.xAxis, }, @@ -134,16 +139,16 @@ export default { name: "单位/片", position: 'left', nameTextStyle: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, align: "right", }, axisTick: { show: false, }, axisLabel: { - color: "#fff", - fontSize: 12, + color: "rgba(223,241,254,.8)", + fontSize: 16, }, axisLine: { show: true, @@ -161,7 +166,7 @@ export default { { name: "FTO", // this.series[0].name, type: "bar", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color: { @@ -196,7 +201,7 @@ export default { { name: "", // this.series[1].name, type: "bar", - barWidth: 12, + barWidth: 16, // tooltip: { // valueFormatter: function (value) { // return value + " ml"; @@ -228,7 +233,7 @@ export default { { name: "", // "2024年目标值", type: "line", - barWidth: 12, + barWidth: 16, itemStyle: { borderRadius: [10, 10, 0, 0], color:'#f3c000' @@ -255,11 +260,11 @@ export default { /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ isFullscreen(val) { this.options.series.map((item) => { - item.barWidth = val ? 18 : 12; + item.barWidth = val ? 18 : 16; }); - this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; - this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; + this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // if (val === false && this.isOpen === true) { // console.log(val) // this.width = 97 + '%' @@ -269,11 +274,11 @@ export default { // this.canvasReset() // } // this.actualOptions.series.map((item) => { - // item.barWidth = val ? 18 : 12; + // item.barWidth = val ? 18 : 16; // }); - // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; - // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; + // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; + // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.initChart(this.options) this.canvasReset() }, @@ -350,7 +355,7 @@ export default { .legend-item { position: relative; - // font-size: 12px; + font-size: 1.2vw; margin-right:1.2vw; color: #DFF1FE; &::before { diff --git a/src/views/copilot/factoryData/components/Order.vue b/src/views/copilot/factoryData/components/Order.vue index b5ad1e7..3b37f8d 100644 --- a/src/views/copilot/factoryData/components/Order.vue +++ b/src/views/copilot/factoryData/components/Order.vue @@ -1,7 +1,8 @@