146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="chart-card">
|
|||
|
|
<div class="chart-card-header">
|
|||
|
|
<span class="chart-card-title">年度销售额完成率</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="gauge-chart-container" ref="chartRef"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted } from 'vue'
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
|
|||
|
|
const chartRef = ref(null)
|
|||
|
|
let chartInstance = null
|
|||
|
|
|
|||
|
|
const initGaugeChart = () => {
|
|||
|
|
const el = chartRef.value
|
|||
|
|
if (!el) return
|
|||
|
|
|
|||
|
|
chartInstance = echarts.init(el)
|
|||
|
|
|
|||
|
|
const option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
backgroundColor: 'rgba(145, 200, 255, 0.9)',
|
|||
|
|
borderColor: '#409EFF',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
textStyle: { color: '#0a3b70', fontSize: 11 },
|
|||
|
|
padding: [8, 12],
|
|||
|
|
borderRadius: 6,
|
|||
|
|
formatter: '完成率：{c}%<br/>目标：1500万元<br/>已完成：1275万元'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '完成率',
|
|||
|
|
type: 'gauge',
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
splitNumber: 10,
|
|||
|
|
radius: '80%',
|
|||
|
|
center: ['50%', '70%'],
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 15,
|
|||
|
|
color: [
|
|||
|
|
[0.3, '#F56C6C'],
|
|||
|
|
[0.7, '#E6A23C'],
|
|||
|
|
[1, '#409EFF']
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
length: 15,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#b4c7e7',
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
length: 8,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#b4c7e7',
|
|||
|
|
width: 1
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: '#e0e6ff',
|
|||
|
|
fontSize: 10,
|
|||
|
|
distance: 20
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
|||
|
|
length: '85%',
|
|||
|
|
width: 8,
|
|||
|
|
color: '#fff',
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|||
|
|
shadowBlur: 5
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: '#e0e6ff',
|
|||
|
|
offsetCenter: [0, '50%']
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: '#409EFF',
|
|||
|
|
fontWeight: 600,
|
|||
|
|
offsetCenter: [0, '20%'],
|
|||
|
|
formatter: '{value}%'
|
|||
|
|
},
|
|||
|
|
data: [{ value: 85, name: '销售额完成率' }]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chartInstance.setOption(option)
|
|||
|
|
window.addEventListener('resize', () => chartInstance.resize())
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => initGaugeChart())
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.chart-card {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card-header {
|
|||
|
|
height: 40px;
|
|||
|
|
line-height: 40px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
background-color: rgba(26, 80, 139, 0.5);
|
|||
|
|
border-bottom: 1px solid #1a508b;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-card-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #409EFF;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gauge-chart-container {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.echarts-tooltip) {
|
|||
|
|
background-color: rgba(145, 200, 255, 0.9) !important;
|
|||
|
|
border-color: #409EFF !important;
|
|||
|
|
color: #0a3b70 !important;
|
|||
|
|
border-radius: 6px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|