|
|
|
@ -15,10 +15,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref, onMounted, onBeforeUnmount } from "vue"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
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(); |
|
|
|
@ -31,57 +33,165 @@ const handleResize = () => { |
|
|
|
onMounted(() => { |
|
|
|
leftChart = echarts.init(problemEchartRef.value); |
|
|
|
|
|
|
|
const color = ['#FFBC37', '#429BF4']; |
|
|
|
const dataStyle = { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
shadowBlur: 40, |
|
|
|
borderWidth: 10, |
|
|
|
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影 |
|
|
|
} |
|
|
|
}; |
|
|
|
const placeHolderStyle = { |
|
|
|
normal: { |
|
|
|
color: 'rgba(255, 255, 255, 0.4)', |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
color: 'rgba(255, 255, 255, 0.4)' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}; |
|
|
|
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] |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// Chart options for the left side (nested pie) |
|
|
|
const leftOption = { |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
formatter: "{b}: {c}", |
|
|
|
trigger: 'item', |
|
|
|
formatter: '{b}: {c}' |
|
|
|
}, |
|
|
|
color: ['#FFBC37', '#FFBC37'], |
|
|
|
title: { |
|
|
|
text: pieValue[0], |
|
|
|
subtext: '工程总数', |
|
|
|
x: 'center', |
|
|
|
y: '20%', |
|
|
|
textStyle: { |
|
|
|
color: 'rgba(0, 0, 0, 0.9)', |
|
|
|
fontSize: 32, |
|
|
|
lineHeight: 32, // 39 |
|
|
|
fontWeight: 'bold', |
|
|
|
fontFamily: 'DIN' |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
color: 'rgba(0, 0, 0, 0.6)', |
|
|
|
fontSize: 14, |
|
|
|
fontWeight: 500, |
|
|
|
lineHeight: 2, // 24 |
|
|
|
padding: [-20, 0, 0, 0], |
|
|
|
fontFamily: 'PingFang SC' |
|
|
|
} |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
show: true, |
|
|
|
// orient: 'vertical', |
|
|
|
// x: '50%', |
|
|
|
icon: 'circle', |
|
|
|
top: 'bottom', |
|
|
|
itemGap: 10, // 16 |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
width: '100%', |
|
|
|
textStyle: { |
|
|
|
rich: { |
|
|
|
name: { |
|
|
|
fontSize: 14, |
|
|
|
height: 25, |
|
|
|
padding: [0, 8, 0, 5], |
|
|
|
color: 'rgba(0, 0, 0, 0.55)' |
|
|
|
}, |
|
|
|
rate: { |
|
|
|
fontSize: 16, |
|
|
|
fontWeight: 500, |
|
|
|
height: 35, |
|
|
|
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] + '}'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
color: ["#FFCD56", "#4285F4"], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "pie", |
|
|
|
radius: ["65%", "90%"], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
name: '数量', |
|
|
|
type: 'pie', |
|
|
|
clockWise: false, |
|
|
|
radius: ['74%', '82%'], |
|
|
|
center: ['50%', '40%'], |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: "center", |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
borderRadius: '10' |
|
|
|
}, |
|
|
|
color: color[0], |
|
|
|
data: [ |
|
|
|
{ value: 98, name: "工程总数", itemStyle: { color: "#FFCD56" } }, |
|
|
|
{ value: 0, name: "", itemStyle: { color: "transparent" } }, |
|
|
|
], |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[1], |
|
|
|
name: '', |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[0], |
|
|
|
name: '数量' |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "pie", |
|
|
|
radius: ["40%", "60%"], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
position: "center", |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
labelLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
name: '问题数', |
|
|
|
type: 'pie', |
|
|
|
radius: ['54%', '62%'], |
|
|
|
center: ['50%', '40%'], |
|
|
|
clockWise: false, |
|
|
|
itemStyle: dataStyle, |
|
|
|
hoverAnimation: false, |
|
|
|
color: color[1], |
|
|
|
data: [ |
|
|
|
{ value: 56, name: "问题数", itemStyle: { color: "#4285F4" } }, |
|
|
|
{ value: 42, name: "", itemStyle: { color: "transparent" } }, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
{ |
|
|
|
// 灰色部分数据 |
|
|
|
value: pieValue[0], |
|
|
|
name: '', |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
itemStyle: placeHolderStyle |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: pieValue[1], |
|
|
|
name: '问题数' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render left chart |
|
|
|
@ -93,55 +203,99 @@ onMounted(() => { |
|
|
|
const rightOption = { |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "liquidFill", |
|
|
|
radius: "80%", |
|
|
|
data: [0.165], |
|
|
|
type: 'liquidFill', |
|
|
|
radius: '30%', |
|
|
|
z: 4, |
|
|
|
center: ['50%', '50%'], |
|
|
|
amplitude: 5, |
|
|
|
data: [0.5], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#28CE8E', |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
backgroundStyle: { |
|
|
|
borderWidth: 0, |
|
|
|
color: 'transparent' |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
textStyle: { |
|
|
|
fontSize: 35, |
|
|
|
fontWeight: "bold", |
|
|
|
color: "#000", |
|
|
|
}, |
|
|
|
position: ["50%", "45%"], |
|
|
|
formatter: function () { |
|
|
|
return "16.5%"; |
|
|
|
}, |
|
|
|
}, |
|
|
|
formatter: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
outline: { |
|
|
|
show: true, |
|
|
|
borderDistance: 0, |
|
|
|
itemStyle: { |
|
|
|
borderWidth: 1, |
|
|
|
borderColor: "#20C997", |
|
|
|
borderWidth: 0 |
|
|
|
}, |
|
|
|
}, |
|
|
|
color: ["#20C997"], |
|
|
|
backgroundStyle: { |
|
|
|
color: "rgba(32, 201, 151, 0.1)", |
|
|
|
}, |
|
|
|
borderDistance: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: legendName[0], |
|
|
|
type: 'pie', |
|
|
|
z: 1, |
|
|
|
radius: ['0%', '31%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
opacity: 0.7, |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
itemStyle: { |
|
|
|
opacity: 0.9, |
|
|
|
}, |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'rgba(255, 255, 255, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
], |
|
|
|
{ |
|
|
|
name: legendName[1], |
|
|
|
type: 'pie', |
|
|
|
z: 1, |
|
|
|
radius: ['0%', '31%'], |
|
|
|
center: ['50%', '50%'], |
|
|
|
hoverAnimation: false, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
value: 0, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
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> |
|
|
|
|
|
|
|
|
ruancuihong
1 month ago