83 lines
1.8 KiB
Vue
83 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<public-title title="长庆油田大病人数"/>
|
|
<div class="inner" ref="healthChart"></div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import PublicTitle from "../publicTitle.vue";
|
|
|
|
const healthChart = ref<HTMLElement>()
|
|
onMounted(()=>{
|
|
let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他'];
|
|
let ydata = [120, 200, 150, 80, 70, 110, 130];
|
|
initChart(xdata,ydata)
|
|
})
|
|
function initChart(xData,ydata){
|
|
let myChart = echarts.init(healthChart.value)
|
|
let options = {
|
|
title:{
|
|
text:'总人数\n',
|
|
subtext: '1980',
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
fontSize:18,
|
|
color: '#ffffff',
|
|
},
|
|
subtextStyle: {
|
|
color: '#ffffff',
|
|
fontSize: 28,
|
|
},
|
|
},
|
|
color:['#0098FA','#0CD9B5','#3B72AD'],
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
bottom: '0',
|
|
left: 'center',
|
|
icon: 'circle',
|
|
textStyle:{
|
|
color:'#ffffff',
|
|
fontSize:16,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['50%', '80%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inner',
|
|
formatter: '{d}%',
|
|
color:'#ffffff',
|
|
fontSize:16
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 1048, name: '高危人数' },
|
|
{ value: 735, name: '中危人数' },
|
|
{ value: 580, name: '可控人数' },
|
|
]
|
|
}
|
|
]
|
|
}
|
|
myChart.setOption(options)
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: calc(100% - 40px);
|
|
}
|
|
</style> |