69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
||
<div class="age-ratio" id="age-ratio" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts'
|
||
import { fitChartSize } from '@/utils/dataUtil'
|
||
|
||
let ageChart = null
|
||
|
||
const init = () => {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
ageChart = echarts.init(document.getElementById('age-ratio'))
|
||
ageChart.setOption({
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['30%', '40%'],
|
||
itemStyle: {
|
||
borderColor: 'transparent',
|
||
borderRadius: fitChartSize(2),
|
||
borderWidth: fitChartSize(2)
|
||
},
|
||
label: {
|
||
color: '#D3F0FE',
|
||
fontSize: fitChartSize(12)
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 484, name: '19岁以下', labelLine: { length: 2 } },
|
||
{ value: 300, name: '18-30岁', labelLine: { length: 2 } },
|
||
{ value: 1048, name: '30-40岁', labelLine: { length: 2 } },
|
||
{ value: 580, name: '40-60岁', labelLine: { length: 2 } },
|
||
{ value: 735, name: '60岁以上', labelLine: { length: 2 } }
|
||
]
|
||
}
|
||
]
|
||
})
|
||
window.addEventListener('resize', resize)
|
||
}
|
||
const resize = () => {
|
||
if (ageChart) {
|
||
ageChart.dispose()
|
||
ageChart = null
|
||
init()
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.age-ratio {
|
||
width: vw(253);
|
||
height: vh(100);
|
||
}
|
||
</style>
|