119 lines
2.5 KiB
Vue
119 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<el-card>
|
||
|
|
<div id="main2" />
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onBeforeUnmount, onMounted } from "vue";
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { getRiskManagement } from "@/request/large_screen_data_display.js";
|
||
|
|
|
||
|
|
let myChart2;
|
||
|
|
const fnGetData = async () => {
|
||
|
|
const { riskAll } = await getRiskManagement();
|
||
|
|
fnInitEcharts(riskAll);
|
||
|
|
};
|
||
|
|
const fnInitEcharts = (data) => {
|
||
|
|
myChart2 = echarts.init(document.querySelector("#main2"));
|
||
|
|
let acount = 0;
|
||
|
|
let bcount = 0;
|
||
|
|
let ccount = 0;
|
||
|
|
let dcount = 0;
|
||
|
|
for (let i = 0; data.length > i; i++) {
|
||
|
|
if (data[i].LEVELID) {
|
||
|
|
if (data[i].LEVELID === "levelA") acount = data[i].COUNT;
|
||
|
|
if (data[i].LEVELID === "levelB") bcount = data[i].COUNT;
|
||
|
|
if (data[i].LEVELID === "levelC") ccount = data[i].COUNT;
|
||
|
|
if (data[i].LEVELID === "levelD") dcount = data[i].COUNT;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: "风险分级统计",
|
||
|
|
textStyle: {
|
||
|
|
fontSize: "14",
|
||
|
|
color: "#fff",
|
||
|
|
fontWeight: "700",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: ["#10b9f8", "#ffc600", "#f49545", "#ec2c26"],
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
},
|
||
|
|
grid: {},
|
||
|
|
legend: {
|
||
|
|
orient: "vertical",
|
||
|
|
left: "6%",
|
||
|
|
top: "20%",
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "风险类型",
|
||
|
|
type: "pie",
|
||
|
|
radius: ["30%", "70%"],
|
||
|
|
center: ["64%", "49%"],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
itemStyle: {
|
||
|
|
borderColor: "rgb(8, 24, 58)",
|
||
|
|
borderWidth: 2,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: "center",
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
fontSize: "18",
|
||
|
|
fontWeight: "bold",
|
||
|
|
color: "#fff",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: dcount,
|
||
|
|
name: "低风险",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: ccount,
|
||
|
|
name: "一般风险",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: bcount,
|
||
|
|
name: "较大风险",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: acount,
|
||
|
|
name: "重大风险",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
myChart2.setOption(option);
|
||
|
|
};
|
||
|
|
onMounted(() => {
|
||
|
|
fnGetData();
|
||
|
|
window.onresize = function () {
|
||
|
|
myChart2 && myChart2.resize();
|
||
|
|
};
|
||
|
|
});
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
myChart2 = null;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
#main2 {
|
||
|
|
width: 100%;
|
||
|
|
height: 305px;
|
||
|
|
}
|
||
|
|
</style>
|