173 lines
4.1 KiB
Vue
173 lines
4.1 KiB
Vue
<template>
|
|
<div class="comom-title">
|
|
<span class="title">情报反馈统计</span>
|
|
</div>
|
|
<div class="comom-cnt">
|
|
<div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import 'echarts-gl';
|
|
|
|
const initChart = () => {
|
|
const chartDom = document.getElementById('qbfk');
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
borderColor: '#0C2E5A',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
legend: {
|
|
top: 'middle',
|
|
right: '5%',
|
|
orient: 'vertical',
|
|
itemGap: 20,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
},
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
icon: 'roundRect',
|
|
formatter: function(name) {
|
|
const data = option.series[0].data;
|
|
const target = data.find(item => item.name === name);
|
|
if (target) {
|
|
return `${name} ${target.value} ${(target.value / 50 * 100).toFixed(0)}%`;
|
|
}
|
|
return name;
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '情报反馈统计',
|
|
type: 'pie',
|
|
radius: ['40%', '75%'],
|
|
center: ['30%', '50%'],
|
|
startAngle: 90,
|
|
zlevel: 10,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderWidth: 2,
|
|
borderColor: '#0C2E5A'
|
|
},
|
|
selectedMode: 'single',
|
|
selectedOffset: 30,
|
|
animation: true,
|
|
animationType: 'scale',
|
|
animationEasing: 'elasticOut',
|
|
animationDelay: function (idx) {
|
|
return Math.random() * 200;
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
borderWidth: 2,
|
|
borderColor: '#0C2E5A',
|
|
opacity: 0.8,
|
|
shadowBlur: 20,
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
},
|
|
data: [
|
|
{
|
|
value: 18,
|
|
name: '实反馈',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#FF6B9A' },
|
|
{ offset: 1, color: '#FF4B7A' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 13,
|
|
name: '超时反馈',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#FFAA33' },
|
|
{ offset: 1, color: '#FF8A00' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 17,
|
|
name: '处置下发',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#FFE699' },
|
|
{ offset: 1, color: '#FFD666' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
value: 2,
|
|
name: '未反馈',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#66B5FF' },
|
|
{ offset: 1, color: '#3AA1FF' }
|
|
])
|
|
}
|
|
}
|
|
],
|
|
zlevel: 10,
|
|
emphasis: {
|
|
scale: true,
|
|
scaleSize: 10,
|
|
itemStyle: {
|
|
shadowBlur: 30,
|
|
shadowColor: 'rgba(0,0,0,0.6)'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
initChart();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
.xsBox{
|
|
background: #052249;
|
|
.xs-item{
|
|
width: 31%;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
background: url("~@/assets/images/content-item.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.qbfkBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
</style> |