You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.8 KiB
117 lines
2.8 KiB
<template>
|
|
<section ref="echartsContainer"></section>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
props: {
|
|
title: String,
|
|
maxNum: {
|
|
type: Number,
|
|
default: 100,
|
|
},
|
|
nowNum: Number,
|
|
unit: {
|
|
type: String,
|
|
default: '%',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chartOptions: {
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
max: this.maxNum,
|
|
radius: '100%',
|
|
center: ['50%', '50%'],
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: true,
|
|
clip: false,
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#03c2fd',
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: '#1ed3e5',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#2fded6',
|
|
},
|
|
],
|
|
global: false,
|
|
},
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [[1, '#4F518C']],
|
|
opacity: 0.7,
|
|
width: 30,
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
distance: 0,
|
|
length: 10,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
distance: 50,
|
|
},
|
|
data: [
|
|
{
|
|
value: this.nowNum,
|
|
name: this.title,
|
|
title: {
|
|
offsetCenter: ['0%', '20%'],
|
|
fontSize: 22,
|
|
fontFamily: 'Microsoft YaHei',
|
|
color: '#fff',
|
|
overflow: 'break',
|
|
lineHeight: 20,
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
offsetCenter: ['0%', '-15%'],
|
|
fontSize: 40,
|
|
fontFamily: 'DIN-Bold,Microsoft YaHei',
|
|
color: '#03FFFF',
|
|
formatter: `{value}${this.unit}`,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
const chartContainer = this.$refs.echartsContainer;
|
|
const chart = echarts.init(chartContainer);
|
|
chart.setOption(this.chartOptions);
|
|
},
|
|
};
|
|
</script>
|