|
|
|
@ -15,12 +15,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import 'echarts-liquidfill'; |
|
|
|
import 'echarts-liquidfill/src/liquidFill.js'; |
|
|
|
import { ref, onMounted, onBeforeUnmount } from "vue"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import "echarts-liquidfill"; |
|
|
|
import "echarts-liquidfill/src/liquidFill.js"; |
|
|
|
defineOptions({ |
|
|
|
name: 'RiskInspectionCard' |
|
|
|
name: "RiskInspectionCard", |
|
|
|
}); |
|
|
|
const problemEchartRef = ref(); |
|
|
|
const questEchartRef = ref(); |
|
|
|
@ -33,144 +33,144 @@ const handleResize = () => { |
|
|
|
onMounted(() => { |
|
|
|
leftChart = echarts.init(problemEchartRef.value); |
|
|
|
|
|
|
|
const color = ['#FFBC37', '#429BF4']; |
|
|
|
const color = ["#FFBC37", "#429BF4"]; |
|
|
|
const dataStyle = { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
shadowBlur: 40, |
|
|
|
borderWidth: 10, |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影 |
|
|
|
} |
|
|
|
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影 |
|
|
|
}, |
|
|
|
}; |
|
|
|
const placeHolderStyle = { |
|
|
|
normal: { |
|
|
|
color: 'rgba(255, 255, 255, 0.4)', |
|
|
|
color: "rgba(255, 255, 255, 0.4)", |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
color: 'rgba(255, 255, 255, 0.4)' |
|
|
|
color: "rgba(255, 255, 255, 0.4)", |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}; |
|
|
|
const legendName = ['数量', '问题数']; |
|
|
|
const legendName = ["数量", "问题数"]; |
|
|
|
const pieValue = [98, 56]; |
|
|
|
var pieData: any = []; |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
pieData.push({ |
|
|
|
name: legendName[i], |
|
|
|
value: pieValue[i] |
|
|
|
value: pieValue[i], |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// Chart options for the left side (nested pie) |
|
|
|
const leftOption = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: '{b}: {c}' |
|
|
|
trigger: "item", |
|
|
|
formatter: "{b}: {c}", |
|
|
|
}, |
|
|
|
color: ['#FFBC37', '#FFBC37'], |
|
|
|
color: ["#FFBC37", "#FFBC37"], |
|
|
|
title: { |
|
|
|
text: pieValue[0], |
|
|
|
subtext: '工程总数', |
|
|
|
x: 'center', |
|
|
|
y: '20%', |
|
|
|
subtext: "工程总数", |
|
|
|
x: "center", |
|
|
|
y: "20%", |
|
|
|
textStyle: { |
|
|
|
color: 'rgba(0, 0, 0, 0.9)', |
|
|
|
color: "rgba(0, 0, 0, 0.9)", |
|
|
|
fontSize: 32, |
|
|
|
lineHeight: 32, // 39 |
|
|
|
fontWeight: 'bold', |
|
|
|
fontFamily: 'DIN' |
|
|
|
fontWeight: "bold", |
|
|
|
fontFamily: "DIN", |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
color: 'rgba(0, 0, 0, 0.6)', |
|
|
|
color: "rgba(0, 0, 0, 0.6)", |
|
|
|
fontSize: 14, |
|
|
|
fontWeight: 500, |
|
|
|
lineHeight: 2, // 24 |
|
|
|
padding: [-20, 0, 0, 0], |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
} |
|
|
|
fontFamily: "PingFang SC", |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: true, |
|
|
|
// orient: 'vertical', |
|
|
|
// x: '50%', |
|
|
|
icon: 'circle', |
|
|
|
top: 'bottom', |
|
|
|
icon: "circle", |
|
|
|
top: "bottom", |
|
|
|
itemGap: 10, // 16 |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
width: '100%', |
|
|
|
width: "100%", |
|
|
|
textStyle: { |
|
|
|
rich: { |
|
|
|
name: { |
|
|
|
fontSize: 14, |
|
|
|
height: 25, |
|
|
|
padding: [0, 8, 0, 5], |
|
|
|
color: 'rgba(0, 0, 0, 0.55)' |
|
|
|
color: "rgba(0, 0, 0, 0.55)", |
|
|
|
}, |
|
|
|
rate: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 500, |
|
|
|
height: 35, |
|
|
|
color: 'rgba(0, 0, 0, 0.9)' |
|
|
|
} |
|
|
|
} |
|
|
|
color: "rgba(0, 0, 0, 0.9)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: legendName, |
|
|
|
formatter: function (name: any) { |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
if (name == pieData[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + pieValue[i] + '}'; |
|
|
|
} |
|
|
|
return "{name|" + name + "}{rate|" + pieValue[i] + "}"; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '数量', |
|
|
|
type: 'pie', |
|
|
|
name: "数量", |
|
|
|
type: "pie", |
|
|
|
clockWise: false, |
|
|
|
radius: ['74%', '82%'], |
|
|
|
center: ['50%', '40%'], |
|
|
|
radius: ["74%", "82%"], |
|
|
|
center: ["50%", "40%"], |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
label: { |
|
|
|
borderRadius: '10' |
|
|
|
borderRadius: "10", |
|
|
|
}, |
|
|
|
color: color[0], |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[1], |
|
|
|
name: '', |
|
|
|
name: "", |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
itemStyle: placeHolderStyle, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[0], |
|
|
|
name: '数量' |
|
|
|
} |
|
|
|
] |
|
|
|
name: "数量", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '问题数', |
|
|
|
type: 'pie', |
|
|
|
radius: ['54%', '62%'], |
|
|
|
center: ['50%', '40%'], |
|
|
|
name: "问题数", |
|
|
|
type: "pie", |
|
|
|
radius: ["54%", "62%"], |
|
|
|
center: ["50%", "40%"], |
|
|
|
clockWise: false, |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
@ -179,19 +179,19 @@ onMounted(() => { |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[0], |
|
|
|
name: '', |
|
|
|
name: "", |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
itemStyle: placeHolderStyle, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[1], |
|
|
|
name: '问题数' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
name: "问题数", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render left chart |
|
|
|
@ -203,99 +203,99 @@ onMounted(() => { |
|
|
|
const rightOption = { |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: 'liquidFill', |
|
|
|
radius: '30%', |
|
|
|
type: "liquidFill", |
|
|
|
radius: "30%", |
|
|
|
z: 4, |
|
|
|
center: ['50%', '50%'], |
|
|
|
center: ["50%", "50%"], |
|
|
|
amplitude: 5, |
|
|
|
data: [0.5], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#28CE8E', |
|
|
|
color: "#28CE8E", |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
backgroundStyle: { |
|
|
|
borderWidth: 0, |
|
|
|
color: 'transparent' |
|
|
|
color: "transparent", |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
formatter: '' |
|
|
|
} |
|
|
|
formatter: "", |
|
|
|
}, |
|
|
|
}, |
|
|
|
outline: { |
|
|
|
show: true, |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 0 |
|
|
|
borderWidth: 0, |
|
|
|
}, |
|
|
|
borderDistance: 0, |
|
|
|
}, |
|
|
|
borderDistance: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: legendName[0], |
|
|
|
type: 'pie', |
|
|
|
type: "pie", |
|
|
|
z: 1, |
|
|
|
radius: ['0%', '31%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
radius: ["0%", "31%"], |
|
|
|
center: ["50%", "50%"], |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'rgba(255, 255, 255, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: legendName[1], |
|
|
|
type: 'pie', |
|
|
|
type: "pie", |
|
|
|
z: 1, |
|
|
|
radius: ['0%', '31%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
radius: ["0%", "31%"], |
|
|
|
center: ["50%", "50%"], |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'rgba(255, 255, 255, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
color: "rgba(255, 255, 255, 1)", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render right chart |
|
|
|
rightChart.setOption(rightOption); |
|
|
|
|
|
|
|
window.addEventListener('resize', handleResize); |
|
|
|
window.addEventListener("resize", handleResize); |
|
|
|
}); |
|
|
|
onBeforeUnmount(() => { |
|
|
|
leftChart?.dispose(); |
|
|
|
rightChart?.dispose(); |
|
|
|
window.removeEventListener('resize', handleResize); |
|
|
|
window.removeEventListener("resize", handleResize); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -305,6 +305,7 @@ onBeforeUnmount(() => { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 16px; |
|
|
|
margin-bottom: 16px; |
|
|
|
.inspection-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
@ -328,7 +329,7 @@ onBeforeUnmount(() => { |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
.echart-wrapper { |
|
|
|
height: 192px - 24px - 12px; |
|
|
|
height: 192px; |
|
|
|
width: 170px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
chenhaojie
1 month ago