Compare commits
No commits in common. "99d60a14bd76727181b24fdbd0b855d4f776c54c" and "efa5a7c383eced5daa2e944696b99e744bac37eb" have entirely different histories.
99d60a14bd
...
efa5a7c383
@ -1,11 +1,10 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-10 15:17:28
|
||||
* @LastEditTime: 2024-07-19 15:18:00
|
||||
* @Date: 2024-06-03 15:38:31
|
||||
* @LastEditTime: 2024-07-09 15:59:41
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<!--
|
||||
filename: ChartContainer.vue
|
||||
author: liubin
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="chart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
@ -70,26 +70,22 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 => {
|
||||
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
|
||||
console.log('params', params)
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -102,24 +98,24 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -137,7 +133,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -172,7 +168,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
@ -218,18 +214,18 @@ export default {
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.options.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 16;
|
||||
item.barWidth = 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.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 : 16;
|
||||
// item.barWidth = 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.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.canvasReset()
|
||||
},
|
||||
|
||||
@ -73,7 +73,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -143,8 +142,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -75,8 +75,8 @@ button {
|
||||
.copilot-btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
border-style: solid;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-09 15:15:00
|
||||
* @LastEditTime: 2024-07-19 16:11:37
|
||||
* @LastEditTime: 2024-07-09 15:36:49
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -73,7 +73,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -147,8 +146,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -74,7 +74,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -148,8 +147,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:49:14
|
||||
* @LastEditTime: 2024-07-19 16:08:27
|
||||
* @LastEditTime: 2024-07-03 14:08:52
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -10,7 +10,7 @@
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="ftoChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
@ -71,26 +71,22 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 => {
|
||||
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
|
||||
console.log('params', params)
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -103,24 +99,24 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -138,7 +134,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -173,7 +169,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
@ -219,18 +215,18 @@ export default {
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.options.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 16;
|
||||
item.barWidth = 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.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 : 16;
|
||||
// item.barWidth = 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.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.canvasReset()
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:43:51
|
||||
* @LastEditTime: 2024-07-19 16:11:59
|
||||
* @LastEditTime: 2024-07-09 15:35:19
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -73,7 +73,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -145,8 +144,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -74,7 +74,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -148,8 +147,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:48:37
|
||||
* @LastEditTime: 2024-07-19 16:14:07
|
||||
* @LastEditTime: 2024-07-09 15:35:04
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -100,7 +100,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -172,8 +171,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 13:22:43
|
||||
* @LastEditTime: 2024-07-19 16:10:10
|
||||
* @LastEditTime: 2024-07-09 14:51:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -9,7 +9,7 @@
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
@ -70,32 +70,25 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
`${params[i].seriesType === "line"
|
||||
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}"></span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -108,23 +101,23 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -142,7 +135,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -177,7 +170,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
@ -257,11 +250,11 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
@ -271,11 +264,11 @@ export default {
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.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.options)
|
||||
this.canvasReset()
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:50:44
|
||||
* @LastEditTime: 2024-07-19 16:10:19
|
||||
* @LastEditTime: 2024-07-09 14:57:49
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -9,7 +9,7 @@
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
@ -70,32 +70,25 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${params[0].axisValueLabel}</span>`;
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
`${params[i].seriesType === "line"
|
||||
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}"></span>`
|
||||
}` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -108,23 +101,23 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -142,7 +135,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -177,7 +170,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
@ -257,11 +250,11 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
@ -271,11 +264,11 @@ export default {
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.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.options)
|
||||
this.canvasReset()
|
||||
},
|
||||
|
||||
@ -24,18 +24,18 @@
|
||||
title: {
|
||||
text: titleValue,
|
||||
left: "48%",
|
||||
top: "middle",
|
||||
top: "37%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 36,
|
||||
color: "rgba(223,241,254,.8)",
|
||||
color: "#fffd",
|
||||
},
|
||||
subtext: `\u2002${yesterday + '日良率'}\u2002`,
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 100,
|
||||
color: "rgba(255,255,255,.7)",
|
||||
color: "#fffd",
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
@ -67,15 +67,8 @@
|
||||
value: currentSum,
|
||||
name: currentName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
|
||||
</div>
|
||||
`
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
|
||||
},
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
@ -100,15 +93,8 @@
|
||||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
|
||||
name: currentName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
|
||||
</div>
|
||||
`
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
@ -132,15 +118,8 @@
|
||||
value: previousSum,
|
||||
name: preName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
|
||||
</div>
|
||||
`
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
|
||||
},
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
@ -165,15 +144,8 @@
|
||||
value:previousSum === 0 ? 1 : 0,
|
||||
name: preName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
|
||||
</div>
|
||||
`
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "9%",
|
||||
left: "6%",
|
||||
right: "3%",
|
||||
bottom: "15%",
|
||||
top: "15%",
|
||||
@ -68,26 +68,21 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = ``;
|
||||
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 +=
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
// return res;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
@ -102,8 +97,8 @@ export default {
|
||||
axisLabel: {
|
||||
interval: 0,//设置横坐标为斜
|
||||
rotate:45,
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
// formatter: function (value) {
|
||||
// console.log(value);
|
||||
|
||||
@ -124,16 +119,16 @@ export default {
|
||||
name: "单位/片",
|
||||
position: 'left',
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize:16,
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 10,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -201,7 +196,7 @@ export default {
|
||||
// { offset: 1, color: "#12FFF5" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -245,11 +240,11 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initOptions(this.actualOptions);
|
||||
// },
|
||||
// series(val) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-30 08:58:39
|
||||
* @LastEditTime: 2024-07-18 16:48:10
|
||||
* @LastEditTime: 2024-07-03 14:10:06
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -9,7 +9,7 @@
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:100%"></div>
|
||||
</chart-container>
|
||||
@ -56,7 +56,7 @@ export default {
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "8%",
|
||||
left: "5%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
@ -97,28 +97,23 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter: params => {
|
||||
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
// return res;
|
||||
},
|
||||
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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
@ -130,8 +125,8 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
@ -139,16 +134,16 @@ export default {
|
||||
name: "单位/片",
|
||||
position: 'left',
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -166,7 +161,7 @@ export default {
|
||||
{
|
||||
name: "FTO", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
@ -201,7 +196,7 @@ export default {
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
@ -233,7 +228,7 @@ export default {
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
barWidth: 16,
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color:'#f3c000'
|
||||
@ -260,11 +255,11 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
this.options.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 16;
|
||||
item.barWidth = 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.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
@ -274,11 +269,11 @@ export default {
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 16;
|
||||
// item.barWidth = 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.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.options)
|
||||
this.canvasReset()
|
||||
},
|
||||
@ -355,7 +350,7 @@ export default {
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
font-size: 1.2vw;
|
||||
// font-size: 12px;
|
||||
margin-right:1.2vw;
|
||||
color: #DFF1FE;
|
||||
&::before {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="order-container">
|
||||
<div class="table">
|
||||
<dv-scroll-board v-if="showTable" :config="config"
|
||||
style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
|
||||
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
@ -13,7 +12,8 @@
|
||||
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
|
||||
:active="i === type" @click="() => $emit('update:type', i)" />
|
||||
</div>
|
||||
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
|
||||
style="height: 0;flex:1"></barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@ export default {
|
||||
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
|
||||
data: [],
|
||||
rowNum: 12,
|
||||
fontSize:16,
|
||||
fontSize:14,
|
||||
waitTime: 3000,
|
||||
columnWidth: [150],
|
||||
align: ["left"],
|
||||
@ -100,20 +100,20 @@ export default {
|
||||
let arr = [];
|
||||
// arr.push(i + 1);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
|
||||
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
|
||||
this.prodOrder[i].workOrderNumber || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
|
||||
`<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
|
||||
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
|
||||
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
|
||||
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
|
||||
}</span>`,
|
||||
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||
}</span>`,
|
||||
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
|
||||
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
|
||||
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
|
||||
: "0%"
|
||||
}</span>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-07 08:37:17
|
||||
* @LastEditTime: 2024-07-18 16:16:24
|
||||
* @LastEditTime: 2024-06-07 11:04:41
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -59,7 +59,7 @@ button {
|
||||
font-size: 18px; */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
letter-spacing: 5px;
|
||||
@ -91,7 +91,7 @@ button {
|
||||
font-size: 18px; */
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
line-height: 22px;
|
||||
letter-spacing: 5px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-05 09:36:07
|
||||
* @LastEditTime: 2024-07-19 16:16:02
|
||||
* @LastEditTime: 2024-07-09 16:54:24
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -81,7 +81,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -153,8 +152,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -79,7 +79,6 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.copilot-container {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
@ -148,8 +147,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 13:32:59
|
||||
* @LastEditTime: 2024-07-19 16:05:46
|
||||
* @LastEditTime: 2024-07-09 08:58:47
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -165,15 +165,10 @@ export default {
|
||||
subtitle =
|
||||
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
|
||||
console.log('titleValue', items)
|
||||
let titleSize = fontSize(0.35)
|
||||
let subtitleSize = fontSize(0.14)
|
||||
|
||||
// console.log(this.valueTuple[2]- this.valueTuple[1])
|
||||
return getOptions({
|
||||
titleValue,
|
||||
subtitle,
|
||||
titleSize,
|
||||
subtitleSize,
|
||||
currentName: items[0].label,
|
||||
preName: items[1].label,
|
||||
previousSum: this.valueTuple[0],
|
||||
@ -224,12 +219,7 @@ export default {
|
||||
// },
|
||||
},
|
||||
};
|
||||
function fontSize(res){
|
||||
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
let fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
|
||||
function calculateItems(period, valueTuple, than) {
|
||||
console.log('valueTuple', valueTuple);
|
||||
let items = [];
|
||||
@ -306,9 +296,8 @@ function calculateItems(period, valueTuple, than) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.double-ring-chart {
|
||||
height: 98%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -332,7 +321,6 @@ function calculateItems(period, valueTuple, than) {
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
/* font-size:16px; */
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -3,8 +3,6 @@ export default ({
|
||||
subtitle,
|
||||
previousSum,
|
||||
currentSum,
|
||||
subtitleSize,
|
||||
titleSize,
|
||||
targetSum,
|
||||
currentName,
|
||||
preName,
|
||||
@ -18,27 +16,25 @@ export default ({
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
// 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',
|
||||
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',
|
||||
},
|
||||
title: {
|
||||
text: titleValue,
|
||||
left: "48.5%",
|
||||
top: "middle",
|
||||
itemGap: 12,
|
||||
textVerticalAlign:'auto',
|
||||
top: "35%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontWeight: 400,
|
||||
fontSize: titleSize,
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 32,
|
||||
color: "#fffd",
|
||||
},
|
||||
subtext: `\u2002${subtitle}\u2002`,
|
||||
subtextStyle: {
|
||||
fontSize: subtitleSize,
|
||||
fontSize: 14,
|
||||
fontWeight: 100,
|
||||
color: "rgba(255,255,255,.7)",
|
||||
color: "#fffd",
|
||||
align: "right",
|
||||
},
|
||||
},
|
||||
@ -47,7 +43,7 @@ export default ({
|
||||
{
|
||||
type: "pie",
|
||||
name: "当前目标",
|
||||
radius: ["74%", "86%"],
|
||||
radius: ["80%", "95%"],
|
||||
center: ["50%", "48%"],
|
||||
emptyCircleStyle: {
|
||||
color: "#042c5f33",
|
||||
@ -56,7 +52,7 @@ export default ({
|
||||
// 数据 series
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["74%", "86%"],
|
||||
radius: ["80%", "95%"],
|
||||
center: ["50%", "48%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
@ -70,16 +66,9 @@ export default ({
|
||||
value: currentSum,
|
||||
name: currentName,
|
||||
selected: false,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
|
||||
</div>
|
||||
`
|
||||
tooltip: {
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
|
||||
},
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@ -102,16 +91,9 @@ export default ({
|
||||
{
|
||||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
|
||||
name: currentName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
|
||||
</div>
|
||||
`
|
||||
tooltip: {
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
@ -121,7 +103,7 @@ export default ({
|
||||
// 数据 series2 - 2023累计
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["61%", "74%"],
|
||||
radius: ["65%", "80%"],
|
||||
center: ["50%", "48%"],
|
||||
avoidLabelOvervlap: false,
|
||||
label: {
|
||||
@ -136,15 +118,8 @@ export default ({
|
||||
name: preName,
|
||||
selected: false,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
|
||||
</div>
|
||||
`
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
|
||||
},
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@ -168,16 +143,9 @@ export default ({
|
||||
|
||||
value:previousSum === 0 ? 1 : 0,
|
||||
name: preName,
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:`
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
|
||||
</div>
|
||||
`
|
||||
tooltip: {
|
||||
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-07-18 16:37:41
|
||||
* @LastEditTime: 2024-07-08 13:43:52
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -61,8 +61,23 @@ export default {
|
||||
// color: "rgba(237,237,237,0.5)",
|
||||
// },
|
||||
// },
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = ``;
|
||||
// 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 +=
|
||||
// // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
||||
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
// }
|
||||
// console.log('res',res)
|
||||
// return res;
|
||||
// },
|
||||
},
|
||||
title: {
|
||||
text: "0%",
|
||||
@ -112,6 +127,7 @@ export default {
|
||||
name: `${year}累计产出`,
|
||||
selected: false,
|
||||
tooltip: {
|
||||
formatter: null,
|
||||
},
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@ -135,6 +151,7 @@ export default {
|
||||
value: 0,
|
||||
name: `${year}目标`,
|
||||
tooltip: {
|
||||
formatter: null,
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
@ -159,17 +176,7 @@ export default {
|
||||
name: `${year - 1}累计产出`,
|
||||
selected: false,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
// axisPointer: {
|
||||
// // type: "cross",
|
||||
// crossStyle: {
|
||||
// color: "rgba(237,237,237,0.5)",
|
||||
// },
|
||||
// },
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter: params => {
|
||||
},
|
||||
formatter: null,
|
||||
},
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@ -193,15 +200,7 @@ export default {
|
||||
value: 0,
|
||||
name: `${year - 1}累计产出`,
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
// axisPointer: {
|
||||
// // type: "cross",
|
||||
// crossStyle: {
|
||||
// color: "rgba(237,237,237,0.5)",
|
||||
// },
|
||||
// },
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
formatter:null,
|
||||
},
|
||||
itemStyle: { color: "transparent" },
|
||||
label: { show: false },
|
||||
@ -264,65 +263,34 @@ export default {
|
||||
this.options.series[1].data[0].value = 0;
|
||||
this.options.series[1].data[1].value = 1;
|
||||
this.options.series[1].data[0].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
|
||||
</div>`;
|
||||
this.options.series[1].data[1].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span>
|
||||
</div>`;
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
||||
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
||||
} else {
|
||||
this.options.series[1].data[0].value = this.output.current;
|
||||
this.options.series[1].data[1].value =
|
||||
this.output.target - this.output.current;
|
||||
this.options.series[1].data[0].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
|
||||
</div>`;
|
||||
this.options.series[1].data[1].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
|
||||
</div>`;
|
||||
this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
|
||||
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
|
||||
}
|
||||
// 内环
|
||||
if (this.output.previous == 0) {
|
||||
this.options.series[2].data[0].value = 0;
|
||||
this.options.series[2].data[1].value = 1;
|
||||
this.options.series[2].data[0].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
|
||||
</div>`;
|
||||
this.options.series[2].data[1].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
|
||||
</div>`;
|
||||
this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
||||
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
||||
} else {
|
||||
this.options.series[2].data[0].value = this.output.previous;
|
||||
this.options.series[2].data[1].value = 0;
|
||||
this.options.series[2].data[0].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
|
||||
</div>`;
|
||||
this.options.series[2].data[1].tooltip.formatter =
|
||||
`<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> +
|
||||
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
|
||||
</div>`;
|
||||
this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
|
||||
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
|
||||
}
|
||||
console.log('options', options);
|
||||
return options;
|
||||
|
||||
@ -8,10 +8,19 @@
|
||||
<template>
|
||||
<chart-container class="left-chart-base">
|
||||
<div class="legend">
|
||||
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
<span
|
||||
v-for="item in legend"
|
||||
:key="item.label"
|
||||
class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
|
||||
>{{ item.label }}</span
|
||||
>
|
||||
</div>
|
||||
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
|
||||
<div
|
||||
ref="chart"
|
||||
style="max-width: 22vw"
|
||||
:style="{ height: vHeight + 'vh' }"
|
||||
></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@ -64,32 +73,25 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value: 0}</span>`;
|
||||
`<span style='display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
// return res;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type:'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
@ -99,27 +101,25 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
},
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
// position:'left',
|
||||
position:'left',
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
align:'right'
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -143,7 +143,7 @@ export default {
|
||||
align: 'right', //在上方显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: "rgba(223,241,254,.8)",
|
||||
color: '#DFF1FE',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
@ -187,8 +187,8 @@ export default {
|
||||
align: 'left', //在上方显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16
|
||||
color: '#DFF1FE',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
@ -260,25 +260,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echarts-tooltip{
|
||||
background: #001829;
|
||||
// background-color: ;
|
||||
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
|
||||
opacity: 0.6;
|
||||
border-radius: 4px;
|
||||
.content {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(6px);
|
||||
// transition: .3s transform;
|
||||
}
|
||||
}
|
||||
|
||||
.left-chart-base {
|
||||
// position: relative;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-28 13:42:51
|
||||
* @LastEditTime: 2024-07-19 15:25:37
|
||||
* @LastEditTime: 2024-07-08 14:30:44
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -15,10 +15,19 @@
|
||||
<template>
|
||||
<chart-container class="right-chart-base">
|
||||
<div class="legend">
|
||||
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
|
||||
<span
|
||||
v-for="item in legend"
|
||||
:key="item.label"
|
||||
class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
|
||||
>{{ item.label }}</span
|
||||
>
|
||||
</div>
|
||||
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
|
||||
<div
|
||||
ref="chart"
|
||||
style="max-width: 22vw"
|
||||
:style="{ height: vHeight + 'vh' }"
|
||||
></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@ -56,7 +65,7 @@ export default {
|
||||
isFullscreen: false,
|
||||
options: {
|
||||
grid: {
|
||||
left: "6%",
|
||||
left: "5%",
|
||||
right: "4%",
|
||||
bottom: "0",
|
||||
top: "18%",
|
||||
@ -70,33 +79,25 @@ export default {
|
||||
color: "rgba(237,237,237,0.5)",
|
||||
},
|
||||
},
|
||||
confine:true,
|
||||
backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色，手动置为透明
|
||||
extraCssText: 'padding:0;border-width:0',
|
||||
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 = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>`;
|
||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
||||
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 +=
|
||||
"<br/>" +
|
||||
`${params[i].seriesType === "line"
|
||||
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
|
||||
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
|
||||
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
|
||||
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
|
||||
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}"></span>`
|
||||
}` +
|
||||
`<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
|
||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
||||
}
|
||||
const htmlContent = `
|
||||
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
|
||||
${res}
|
||||
</div>
|
||||
`;
|
||||
|
||||
return htmlContent;
|
||||
return res;
|
||||
},
|
||||
|
||||
},
|
||||
@ -110,25 +111,25 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
// position: 'left',
|
||||
position: 'left',
|
||||
nameTextStyle: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
align: 'right'
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(223,241,254,.8)",
|
||||
fontSize: 16,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -256,9 +257,9 @@ export default {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = 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.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
|
||||
this.initOptions(this.actualOptions);
|
||||
},
|
||||
series(val) {
|
||||
@ -321,13 +322,13 @@ export default {
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -1.2vw;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.legend-item:nth-child(1):after {
|
||||
@ -337,11 +338,11 @@ export default {
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@ export default {
|
||||
}
|
||||
|
||||
h2 {
|
||||
// padding: 0 1vw;
|
||||
padding: 0 1vw;
|
||||
margin: 6px 0;
|
||||
font-family: 优设标题黑;
|
||||
color: #fff;
|
||||
@ -116,7 +116,7 @@ ul {
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 0.77em;
|
||||
font-size: 0.851em;
|
||||
}
|
||||
|
||||
.corner {
|
||||
|
||||
@ -82,7 +82,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.dashboard-container {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
@ -133,8 +132,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-07-08 13:51:30
|
||||
* @LastEditTime: 2024-07-19 10:43:18
|
||||
* @LastEditTime: 2024-07-08 13:53:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -133,8 +133,8 @@ export default {
|
||||
position: absolute;
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
width: 0.7vw;
|
||||
height: 0.7vw;
|
||||
width: 0.95vw;
|
||||
height: 0.95vw;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
|
||||
@ -70,11 +70,11 @@ const LOCATIONS = [
|
||||
// 蚌埠2
|
||||
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
|
||||
// 江西 瑞昌
|
||||
{ x: 60, y: 58, tx: 68, ty: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' },
|
||||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
|
||||
// 湖南 株洲
|
||||
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
|
||||
// 邯郸
|
||||
{ x: 58, y: 45, tx: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
|
||||
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
|
||||
];
|
||||
// rcLine.style.left = `66.8%`;
|
||||
// rcLine.style.top = `52%`;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-07-23 18:00:55
|
||||
* @LastEditTime: 2024-07-16 17:47:40
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -392,8 +392,8 @@ export default {
|
||||
// 工厂名称 this.factoryListabbr
|
||||
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
|
||||
const seriesArray = []
|
||||
factoryNameArray.forEach((fac, facIndex) => {
|
||||
typeArray.forEach((type, typeIndex) => {
|
||||
typeArray.forEach((type, typeIndex) => {
|
||||
factoryNameArray.forEach((fac, facIndex) => {
|
||||
const series = {
|
||||
data: Array(xAxisData.length).fill(0),
|
||||
type: 'bar',
|
||||
@ -407,26 +407,27 @@ export default {
|
||||
seriesArray.push(series)
|
||||
})
|
||||
})
|
||||
|
||||
// 按工厂分
|
||||
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory)
|
||||
// const seriesDataArray = []
|
||||
let n = 0
|
||||
Object.values(arrayByFacArray).forEach((item) => {
|
||||
typeArray.forEach(type => {
|
||||
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
|
||||
let seriesData = Array(xAxisData.length).fill(0)
|
||||
// 构造series的data
|
||||
const seriesDataArray = []
|
||||
Object.values(data).forEach((item) => {
|
||||
let seriesData = []
|
||||
// item[0].datestr 为日期
|
||||
typeArray.forEach(t => {
|
||||
const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
|
||||
item.forEach(it => {
|
||||
xAxisData.forEach((x, xindex) => {
|
||||
if (x === it['datestr']) {
|
||||
seriesData[xindex] = it[typeName]
|
||||
}
|
||||
})
|
||||
seriesData.push(it[zidr])
|
||||
})
|
||||
seriesArray[n].data = seriesData
|
||||
n ++
|
||||
})
|
||||
seriesDataArray.push(seriesData)
|
||||
})
|
||||
for (let y = 0; y < seriesArray.length; y ++) {
|
||||
const days = []
|
||||
seriesDataArray.forEach(a => {
|
||||
days.push(a[y])
|
||||
})
|
||||
// 赋值完成
|
||||
seriesArray[y].data = days
|
||||
}
|
||||
|
||||
// 添加工厂
|
||||
const validSeriesArray = []
|
||||
|
||||
Loading…
Reference in New Issue
Block a user