diff --git a/src/views/copilot/components/BarChartBase.vue b/src/views/copilot/components/BarChartBase.vue index 0707453..633ad01 100644 --- a/src/views/copilot/components/BarChartBase.vue +++ b/src/views/copilot/components/BarChartBase.vue @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + 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; + }, + }, xAxis: { axisTick: { show: false, @@ -188,13 +213,13 @@ export default { this.canvasReset() }, isFullscreen(val) { - this.actualOptions.series.map((item) => { + this.options.series.map((item) => { item.barWidth = val ? 18 : 12; }); - 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.initChart(this.actualOptions); + 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.initChart(this.options); // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 12; // }); @@ -209,14 +234,14 @@ export default { this.initChart(this.options); return; } - const actualOptions = JSON.parse(JSON.stringify(this.options)); - console.log('actualOptions', this.options) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data || []; - actualOptions.series[1].name = val?.[1]?.name || ""; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)); + // console.log('actualOptions', this.options) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data || []; + this.options.series[1].name = val?.[1]?.name || ""; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -225,7 +250,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -249,7 +274,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.chart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/components/ftoBarChartBase.vue b/src/views/copilot/components/ftoBarChartBase.vue index 5021f78..ccf405e 100644 --- a/src/views/copilot/components/ftoBarChartBase.vue +++ b/src/views/copilot/components/ftoBarChartBase.vue @@ -1,7 +1,7 @@ @@ -63,7 +63,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + 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; + }, + }, xAxis: { axisTick: { show: false, @@ -189,13 +214,13 @@ export default { this.canvasReset() }, isFullscreen(val) { - this.actualOptions.series.map((item) => { + this.options.series.map((item) => { item.barWidth = val ? 18 : 12; }); - 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.initChart(this.actualOptions); + 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.initChart(this.options); // this.actualOptions.series.map((item) => { // item.barWidth = val ? 18 : 12; // }); @@ -210,14 +235,14 @@ export default { this.initChart(this.options); return; } - const actualOptions = JSON.parse(JSON.stringify(this.options)); - console.log('actualOptions', this.options) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val[1].data; - actualOptions.series[1].name = val[1].name; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)); + // console.log('actualOptions', this.options) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val[1].data; + this.options.series[1].name = val[1].name; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -226,7 +251,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -250,7 +275,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.ftoChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue index 6d7f58f..6ae8025 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 @@ @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + 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; + }, + }, xAxis: { axisTick: { show: false, @@ -241,7 +266,7 @@ export default { // 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.initChart(this.actualOptions) + this.initChart(this.options) this.canvasReset() }, series(val) { @@ -252,14 +277,14 @@ export default { // console.log('val', val) const actualOptions = JSON.parse(JSON.stringify(this.options)) console.log(actualOptions) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data; - actualOptions.series[1].name = val?.[1]?.name; - actualOptions.series[2].data = val?.[2]?.data || []; - actualOptions.series[2].name = val?.[2]?.name || ""; + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data; + this.options.series[1].name = val?.[1]?.name; + this.options.series[2].data = val?.[2]?.data || []; + this.options.series[2].name = val?.[2]?.name || ""; this.actualOptions = actualOptions; - this.initChart(actualOptions); + this.initChart(this.options); }, }, mounted() { @@ -273,7 +298,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -296,7 +321,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue index 848f32d..4a60f44 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 @@ @@ -62,7 +62,32 @@ export default { top: "15%", containLabel: true, }, - tooltip: {}, + tooltip: { + trigger: "axis", + axisPointer: { + // type: "cross", + crossStyle: { + 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; + }, + }, xAxis: { axisTick: { show: false, @@ -241,7 +266,7 @@ export default { // 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.initChart(this.actualOptions) + this.initChart(this.options) this.canvasReset() }, series(val) { @@ -250,15 +275,15 @@ export default { return; } console.log(val) - const actualOptions = JSON.parse(JSON.stringify(this.options)) - actualOptions.series[0].data = val[0].data; - actualOptions.series[0].name = val[0].name; - actualOptions.series[1].data = val?.[1]?.data || []; - actualOptions.series[1].name = val?.[1]?.name || ""; - actualOptions.series[2].data = val?.[2]?.data || []; - actualOptions.series[2].name = val?.[2]?.name || ""; - this.actualOptions = actualOptions; - this.initChart(actualOptions); + // const actualOptions = JSON.parse(JSON.stringify(this.options)) + this.options.series[0].data = val[0].data; + this.options.series[0].name = val[0].name; + this.options.series[1].data = val?.[1]?.data || []; + this.options.series[1].name = val?.[1]?.name || ""; + this.options.series[2].data = val?.[2]?.data || []; + this.options.series[2].name = val?.[2]?.name || ""; + // this.actualOptions = actualOptions; + this.initChart(this.options); }, }, mounted() { @@ -272,7 +297,7 @@ export default { this.isFullscreen = screenfull.isFullscreen; }); } - this.actualOptions = this.options + // this.actualOptions = this.options this.canvasReset(); window.addEventListener("resize", this.canvasReset); }, @@ -295,7 +320,7 @@ export default { this.chart.dispose(); } this.chart = echarts.init(this.$refs.oeeChart); - this.chart.setOption(this.actualOptions); + this.chart.setOption(this.options); }, }, }; diff --git a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue index cee0804..40c8a68 100644 --- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue +++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue @@ -318,6 +318,8 @@ export default { .legend-item { margin-left: 15px; display: flex; + font-size: 16px; + // font-weight: 600; flex-direction: column; // align-items: center; align-items: flex-start; @@ -371,8 +373,6 @@ export default { background: #003982; } .legend-item__value { - font-size: 24px; - font-weight: 600; } } diff --git a/src/views/copilot/factoryData/components/BarChartBase.vue b/src/views/copilot/factoryData/components/BarChartBase.vue index 2e118e5..76c4f9f 100644 --- a/src/views/copilot/factoryData/components/BarChartBase.vue +++ b/src/views/copilot/factoryData/components/BarChartBase.vue @@ -80,7 +80,7 @@ export default { res += `` + `${params[0].axisValueLabel}` + - `${params[i].value + '片'}`; + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; } return res; }, @@ -117,6 +117,7 @@ export default { yAxis: { type: "value", name: "单位/片", + position: 'left', nameTextStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 12, diff --git a/src/views/copilot/factoryData/components/BarChartChipOEE.vue b/src/views/copilot/factoryData/components/BarChartChipOEE.vue index 513c740..de0191e 100644 --- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue +++ b/src/views/copilot/factoryData/components/BarChartChipOEE.vue @@ -1,7 +1,7 @@ @@ -110,7 +110,7 @@ export default { "
" + `` + `${params[i].seriesName}` + - `${params[i].value + '片'}`; + `${params[i].value ? params[i].value + '片' : 0 + '片'}`; } return res; }, @@ -132,6 +132,7 @@ export default { }, yAxis: { name: "单位/片", + position: 'left', nameTextStyle: { color: "#fff", fontSize: 12, @@ -337,6 +338,7 @@ export default {