95 lines
2.2 KiB
Vue
95 lines
2.2 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'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: '60%',
|
||
y: 'center',
|
||
data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
|
||
itemHeight: fitChartSize(8),
|
||
itemWidth: fitChartSize(8),
|
||
itemGap: fitChartSize(10),
|
||
formatter: function (name) {
|
||
return '{title|' + name + '}'
|
||
},
|
||
textStyle: {
|
||
rich: {
|
||
title: {
|
||
color: '#fff',
|
||
fontSize: fitChartSize(14)
|
||
},
|
||
value: {
|
||
color: '#00D5F6',
|
||
fontSize: fitChartSize(14)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
center: ['30%', '50%'],
|
||
radius: ['50%', '70%'],
|
||
itemStyle: {
|
||
borderColor: 'transparent',
|
||
borderRadius: fitChartSize(2),
|
||
borderWidth: fitChartSize(2)
|
||
},
|
||
label: {
|
||
show: false,
|
||
color: '#D3F0FE',
|
||
fontSize: fitChartSize(12)
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{ value: 484, name: '19岁以下' },
|
||
{ value: 300, name: '18-30岁' },
|
||
{ value: 1048, name: '30-40岁' },
|
||
{ value: 580, name: '40-60岁' },
|
||
{ value: 735, name: '60岁以上' }
|
||
]
|
||
}
|
||
]
|
||
})
|
||
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(120);
|
||
}
|
||
</style>
|