186 lines
3.3 KiB
Vue
186 lines
3.3 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-06-01 10:47:42
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2023-08-31 16:23:08
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
require('echarts/theme/macarons'); // echarts theme
|
|
import resize from '../mixins/resize';
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '300px',
|
|
},
|
|
occupancyData: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
name: 'echarts',
|
|
data() {
|
|
return {
|
|
echart: '',
|
|
};
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chart = echarts.init(this.$el, 'macarons');
|
|
|
|
this.chart.setOption({
|
|
title: {
|
|
text: '{space|}{tip|}{space|}{value|' + this.title + '}',
|
|
left: '0%',
|
|
top: '2%',
|
|
textStyle: {
|
|
rich: {
|
|
tip: {
|
|
width: 4,
|
|
height: 16,
|
|
backgroundColor: '#1FC495',
|
|
marginRight: 6,
|
|
},
|
|
space: {
|
|
width: 8,
|
|
},
|
|
value: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
min: 0,
|
|
max: 100,
|
|
splitNumber: 5,
|
|
itemStyle: {
|
|
color: '#47E282',
|
|
shadowColor: 'rgba(0,138,255,0.45)',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 2,
|
|
shadowOffsetY: 2,
|
|
},
|
|
pointer: {
|
|
itemStyle: {
|
|
color: 'auto',
|
|
},
|
|
},
|
|
axisLine: {
|
|
roundCap: true,
|
|
lineStyle: {
|
|
width: 16,
|
|
},
|
|
},
|
|
axisTick: {
|
|
distance: 5,
|
|
splitNumber: 2,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#999',
|
|
},
|
|
},
|
|
splitLine: {
|
|
distance: 6,
|
|
length: 14,
|
|
lineStyle: {
|
|
width: 4,
|
|
color: '#999',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
distance: -55,
|
|
color: '#999',
|
|
fontSize: 15,
|
|
},
|
|
title: {
|
|
show: false,
|
|
},
|
|
detail: {
|
|
backgroundColor: '#fff',
|
|
width: '80%',
|
|
lineHeight: 15,
|
|
height: 15,
|
|
offsetCenter: [0, '20%'],
|
|
valueAnimation: true,
|
|
formatter: function (value) {
|
|
return '{side| }{value|' + value + '}{unit|%}{side1| }';
|
|
},
|
|
rich: {
|
|
value: {
|
|
fontSize: 18,
|
|
color: '#1FC495',
|
|
padding: [0, 0, 0, 16],
|
|
},
|
|
side: {
|
|
width: 35,
|
|
height: 5,
|
|
backgroundColor: '#fff',
|
|
opacity: 0.5,
|
|
shadowColor: '#43E084',
|
|
shadowOffsetX: 10,
|
|
},
|
|
side1: {
|
|
width: 35,
|
|
height: 5,
|
|
backgroundColor: '#fff',
|
|
opacity: 0.5,
|
|
shadowColor: '#43E084',
|
|
shadowOffsetX: -10,
|
|
},
|
|
unit: {
|
|
fontSize: 12,
|
|
color: '#999',
|
|
padding: [0, 16, 0, 0],
|
|
},
|
|
},
|
|
},
|
|
data: [
|
|
{
|
|
value: this.occupancyData * 100,
|
|
},
|
|
],
|
|
radius: '90%',
|
|
center: ['50%', '70%'],
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|