121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<div class="ech">
|
|
<div id="circlecz" style="width: 100%; height: 260px"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { ref, onMounted, defineProps, watch } from "vue";
|
|
const props = defineProps({
|
|
data: { type: Array }
|
|
});
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
lineChartFn();
|
|
}
|
|
);
|
|
function lineChartFn() {
|
|
var chartDom = document.getElementById("circlecz");
|
|
var myChart = echarts.init(chartDom, "dark");
|
|
var option;
|
|
var scale = 1;
|
|
var echartData = props.data
|
|
var rich = {
|
|
yellow: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
padding: [5, 4],
|
|
align: "center"
|
|
},
|
|
total: {
|
|
color: "#ffc72b",
|
|
fontSize: 14 * scale,
|
|
align: "center"
|
|
},
|
|
white: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 14 * scale,
|
|
padding: [0, 0]
|
|
},
|
|
blue: {
|
|
color: "#49dff0",
|
|
fontSize: 14 * scale,
|
|
align: "center"
|
|
}
|
|
};
|
|
|
|
option = {
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
legend: {
|
|
orient: "vertical",
|
|
left: 0,
|
|
top: 5
|
|
},
|
|
series: [
|
|
{
|
|
name: "今日警情处置分析图",
|
|
type: "pie",
|
|
radius: ["32%", "50%"],
|
|
hoverAnimation: false,
|
|
color: [
|
|
"#c487ee",
|
|
"#deb140",
|
|
"#49dff0",
|
|
"#034079",
|
|
"#6f81da",
|
|
"#00ffb4"
|
|
],
|
|
label: {
|
|
normal: {
|
|
formatter: function (params, ticket, callback) {
|
|
var total = 0; //考生总数量
|
|
var percent = 0; //考生占比
|
|
echartData.forEach(function (value, index, array) {
|
|
total += value.value;
|
|
});
|
|
percent = ((params.value / total) * 100).toFixed(1) != NaN ? ((params.value / total) * 100).toFixed(1):0;
|
|
return (
|
|
"{white|" +
|
|
params.name +
|
|
"}\n{yellow|" +
|
|
params.value +
|
|
"}\n{blue|" +
|
|
percent +
|
|
"%}"
|
|
);
|
|
},
|
|
rich: rich
|
|
}
|
|
},
|
|
data: echartData
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
document.getElementById("circlecz").setAttribute("_echarts_instance_", "");
|
|
}
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
window.addEventListener("resize", () => {
|
|
lineChartFn();
|
|
});
|
|
window.onresize = function () {
|
|
lineChartFn();
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ech {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|