134 lines
3.6 KiB
Vue
134 lines
3.6 KiB
Vue
<template>
|
||
<div id="pieChart" style="width: 150%;height: 150%;">
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="pieChart">
|
||
import * as echarts from 'echarts';
|
||
const myChart = ref(null)
|
||
const chartMax = ref(null)
|
||
const chartValues = ref(null)
|
||
const chartRate = ref(null)
|
||
|
||
onMounted(() => {
|
||
// window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
|
||
var chartDom = document.getElementById('pieChart');
|
||
myChart.value = echarts.init(chartDom);
|
||
})
|
||
// resize(){
|
||
// this.myChart.resize();
|
||
// },
|
||
const init=(max, value) =>{
|
||
|
||
chartMax.value = max ? max : 100;
|
||
chartValues.value = value ? value : 0;
|
||
if (chartMax && chartValues) {
|
||
chartRate.value = (chartValues.value / chartMax.value * 100).toFixed(1)
|
||
}
|
||
if (chartRate.value === "100.0") {
|
||
chartRate.value = "100"; // 如果百分比等于100，则更新为整数形式
|
||
}
|
||
|
||
let option = {
|
||
title: {
|
||
text: (chartRate.value || '0.0') + '%',
|
||
x: 'center',
|
||
y: '25%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '18',
|
||
fontWeight: '600',
|
||
fontFamily: 'YouSheBiaoTiHei'
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
angleAxis: {
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
min: 0,
|
||
max: chartMax.value,
|
||
startAngle: 60,
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
data: [],
|
||
},
|
||
polar: {
|
||
radius: ['40%', '65%'],
|
||
center: ['50%', '35%'],
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
data: [{ name: '预报到填写报到人数', value: chartValues.value }],
|
||
startAngle: 225,
|
||
z: 1,
|
||
coordinateSystem: 'polar',
|
||
barMaxWidth: 35,
|
||
roundCap: 1,
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#5E7DCD'
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: '#d81e48'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#db4238'
|
||
}
|
||
])
|
||
},
|
||
{
|
||
type: 'bar',
|
||
data: [{ name: "新生总人数", value: chartMax.value }],
|
||
startAngle: 0,
|
||
z: 1,
|
||
coordinateSystem: 'polar',
|
||
barMaxWidth: 35,
|
||
roundCap: 1,
|
||
color: '#00214d',
|
||
barGap: '-100%',
|
||
},
|
||
{
|
||
type: 'bar',
|
||
data: [{ name: "新生总人数", value: chartMax.value }],
|
||
z: 0,
|
||
silent: true,
|
||
coordinateSystem: 'polar',
|
||
barMaxWidth: 35,
|
||
roundCap: true,
|
||
color: '#00214d',
|
||
barGap: '-100%',
|
||
},
|
||
],
|
||
}
|
||
option && myChart.value.setOption(option);
|
||
}
|
||
defineExpose({init})
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style> |