|
|
@@ -52,12 +52,13 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (this.dataList.length > 1) { |
|
|
|
const barWidth = 400 / 2 / this.dataList[0].data.length |
|
|
|
this.series = [ |
|
|
|
{ |
|
|
|
// 柱体 |
|
|
|
name: this.dataList[0].name, |
|
|
|
type: 'bar', |
|
|
|
barWidth: 30, |
|
|
|
barWidth, |
|
|
|
itemStyle: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ offset: 0, color: this.dataList[0].topColor }, |
|
|
@@ -70,7 +71,7 @@ export default { |
|
|
|
// 柱顶 |
|
|
|
name: this.dataList[0].name, |
|
|
|
type: 'pictorialBar', |
|
|
|
barWidth: 26, |
|
|
|
barWidth, |
|
|
|
symbol: 'diamond', |
|
|
|
symbolPosition: 'end', |
|
|
|
symbolOffset: [0, '-50%'], |
|
|
@@ -83,7 +84,7 @@ export default { |
|
|
|
// 柱底 |
|
|
|
name: this.dataList[0].name, |
|
|
|
type: 'pictorialBar', |
|
|
|
barWidth: 26, |
|
|
|
barWidth, |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '50%'], |
|
|
|
symbolSize: [30, 15], |
|
|
@@ -94,7 +95,7 @@ export default { |
|
|
|
// 柱体 |
|
|
|
name: this.dataList[1].name, |
|
|
|
type: 'bar', |
|
|
|
barWidth: 30, |
|
|
|
barWidth, |
|
|
|
itemStyle: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ offset: 0, color: this.dataList[1].topColor }, |
|
|
@@ -107,7 +108,7 @@ export default { |
|
|
|
// 柱顶 |
|
|
|
name: this.dataList[1].name, |
|
|
|
type: 'pictorialBar', |
|
|
|
barWidth: 26, |
|
|
|
barWidth, |
|
|
|
symbol: 'diamond', |
|
|
|
symbolPosition: 'end', |
|
|
|
symbolOffset: [0, '-50%'], |
|
|
@@ -120,7 +121,7 @@ export default { |
|
|
|
// 柱底 |
|
|
|
name: this.dataList[1].name, |
|
|
|
type: 'pictorialBar', |
|
|
|
barWidth: 26, |
|
|
|
barWidth, |
|
|
|
symbol: 'diamond', |
|
|
|
symbolOffset: [0, '50%'], |
|
|
|
symbolSize: [30, 15], |
|
|
@@ -272,30 +273,30 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.fault-category-chart >>> div::before { |
|
|
|
/* .fault-category-chart::before { */ |
|
|
|
/* .fault-category-chart::before { */ |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
/* bottom: calc(100vh/1920 * 80); |
|
|
|
left: calc(100vw/1920 * 48); */ |
|
|
|
/* bottom: calc(10% + 100vh/1920 * 28); */ |
|
|
|
bottom: 25px; |
|
|
|
bottom: calc(30px * var(--beilv)); |
|
|
|
left: 9%; |
|
|
|
height: 52px; |
|
|
|
height: calc(32px * var(--beilv)); |
|
|
|
width: 90%; |
|
|
|
background: linear-gradient(to top, #31a2ff6d, transparent); |
|
|
|
transform: skew(-45deg); |
|
|
|
transform: skew(-35deg); |
|
|
|
z-index: 0; |
|
|
|
} |
|
|
|
.process-fault-chart >>> div::before { |
|
|
|
/* .process-fault-chart::before { */ |
|
|
|
/* .process-fault-chart::before { */ |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
bottom: 26px; |
|
|
|
left: 10%; |
|
|
|
height: 48px; |
|
|
|
bottom: 12%; |
|
|
|
left: 8%; |
|
|
|
height: calc(32px * var(--beilv)); |
|
|
|
/* bottom: calc(20px * var(--beilv)); |
|
|
|
left: calc(36px * var(--beilv)); |
|
|
|
height: calc(32px * var(--beilv)); */ |
|
|
|
width: 90%; |
|
|
|
background: linear-gradient(to top, #49fbd789, transparent); |
|
|
|
transform: skew(-45deg); |
|
|
|
transform: skew(-35deg); |
|
|
|
z-index: 0; |
|
|
|
} |
|
|
|
</style> |