137 lines
4.0 KiB
Vue
137 lines
4.0 KiB
Vue
|
<template>
|
|||
|
|
<div id="pieChart" style="width: 150%;height: 150%;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts';
|
|||
|
|
export default {
|
|||
|
|
name: 'pieChart',
|
|||
|
|
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
myChart: null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
mounted() {
|
|||
|
|
// window.addEventListener('resize',()=>{this.resize();getRem(1920,100)})
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// window.removeEventListener('resize',this.resize)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// resize(){
|
|||
|
|
// this.myChart.resize();
|
|||
|
|
// },
|
|||
|
|
init(max, value) {
|
|||
|
|
var max = max?max:100;
|
|||
|
|
var value = value?value:0;
|
|||
|
|
|
|||
|
|
var rate = 0
|
|||
|
|
|
|||
|
|
if (max && value) {
|
|||
|
|
rate = (value / max * 100).toFixed(1)
|
|||
|
|
}
|
|||
|
|
if (rate === "100.0") {
|
|||
|
|
rate = "100"; // 如果百分比等于100，则更新为整数形式
|
|||
|
|
}
|
|||
|
|
var chartDom = document.getElementById('pieChart');
|
|||
|
|
this.myChart = echarts.init(chartDom);
|
|||
|
|
// window.onresize = this.myChart.resize;
|
|||
|
|
var option;
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
title: {
|
|||
|
|
text: (rate || '0.0') + '%',
|
|||
|
|
x: 'center',
|
|||
|
|
y: '20%',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: '18',
|
|||
|
|
fontWeight: '600',
|
|||
|
|
fontFamily: 'YouSheBiaoTiHei'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
angleAxis: {
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
min: 0,
|
|||
|
|
max: max,
|
|||
|
|
startAngle: 60,
|
|||
|
|
},
|
|||
|
|
radiusAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
data: [],
|
|||
|
|
},
|
|||
|
|
polar: {
|
|||
|
|
radius: ['40%', '65%'],
|
|||
|
|
center: ['50%', '30%'],
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [{ name: '预报到填写人数', value: value }],
|
|||
|
|
startAngle: 225,
|
|||
|
|
z: 1,
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
barMaxWidth: 35,
|
|||
|
|
roundCap: 1,
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#5E7DCD'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: '#d81e48'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#db4238'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
data: [max],
|
|||
|
|
z: 0,
|
|||
|
|
silent: true,
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
barMaxWidth: 35,
|
|||
|
|
roundCap: true,
|
|||
|
|
color: '#00214d',
|
|||
|
|
barGap: '-100%',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
option && this.myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped></style>
|