309 lines
8.5 KiB
309 lines
8.5 KiB
<!-- @format -->
|
|
|
|
<script>
|
|
import { defineComponent } from 'vue';
|
|
import BaseBar from './BaseGauge.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'SimpleGauge',
|
|
extends: BaseBar,
|
|
props: {
|
|
datas: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
min: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
max: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#73FBFD',
|
|
},
|
|
textColor: {
|
|
type: String,
|
|
default: '#C0FAFF',
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {},
|
|
created() {},
|
|
mounted() {
|
|
let optionData = this.optionHandle();
|
|
|
|
this.setOption(optionData);
|
|
this.renderChart();
|
|
},
|
|
methods: {
|
|
optionHandle() {
|
|
let _this = this;
|
|
let option = {
|
|
series: [
|
|
{
|
|
radius: '80%',
|
|
type: 'gauge',
|
|
detail: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [[1, _this.color]],
|
|
width: 2,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'gauge',
|
|
min: _this.min,
|
|
max: _this.max,
|
|
radius: '75%',
|
|
splitNumber: 12,
|
|
itemStyle: {
|
|
color: _this.color,
|
|
},
|
|
center: ['50%', '50%'],
|
|
progress: {
|
|
show: true,
|
|
width: _this.progress,
|
|
itemStyle: {
|
|
color: _this.color,
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
icon: 'path://M1.6861, 33.5189L1.33874, 1.07101L2.2249, 1.06152L2.57226, 33.5094L1.6861, 33.5189Z,M0.649407, 20.0229L0.760354, 0.860351L3.41895, 0.875744L3.308, 20.0382L0.649407, 20.0229Z',
|
|
// keepAspect:true,
|
|
// icon:'path://M7.15528, 44.1242C8.9665, 44.1242, 10.4348, 42.656, 10.4348, 40.8447C10.4348, 39.0335, 8.9665, 37.5652, 7.15528, 37.5652C5.34406, 37.5652, 3.87578, 39.0335, 3.87578, 40.8447C3.87578, 42.656, 5.34406, 44.1242, 7.15528, 44.1242ZM7.15528, 48C11.107, 48, 14.3106, 44.7965, 14.3106, 40.8447C14.3106, 36.893, 11.107, 33.6895, 7.15528, 33.6895C3.20353, 33.6895, 0, 36.893, 0, 40.8447C0, 44.7965, 3.20353, 48, 7.15528, 48Z,M6.70801, 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',
|
|
// icon:'path://M7.15528 44.1242C8.9665 44.1242 10.4348 42.656 10.4348 40.8447C10.4348 39.0335 8.9665 37.5652 7.15528 37.5652C5.34406 37.5652 3.87578 39.0335 3.87578 40.8447C3.87578 42.656 5.34406 44.1242 7.15528 44.1242ZM7.15528 48C11.107 48 14.3106 44.7965 14.3106 40.8447C14.3106 36.893 11.107 33.6895 7.15528 33.6895C3.20353 33.6895 0 36.893 0 40.8447C0 44.7965 3.20353 48 7.15528 48Z,M6.70801 0H7.60242V33.9876H6.70801V0Z,M5.81348 0H8.49671V19.2298H5.81348V0Z',
|
|
|
|
length: '75%',
|
|
},
|
|
// anchor:{
|
|
// show: true,
|
|
// size:6,
|
|
// icon:'circle',
|
|
// itemStyle:{
|
|
// color:'#fff'
|
|
// }
|
|
// },
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
detail: {
|
|
color: _this.textColor,
|
|
fontSize: 26,
|
|
fontWeight: 400,
|
|
offsetCenter: [0, '70%'],
|
|
formatter: function (value) {
|
|
// '{80|' + value.toFixed(0) + '}{unit|%}';
|
|
return `${value}{unit|${_this.label}}`;
|
|
},
|
|
rich: {
|
|
unit: {
|
|
fontSize: 9,
|
|
color: _this.textColor,
|
|
|
|
padding: [0, 0, -15, 3],
|
|
},
|
|
},
|
|
},
|
|
data: _this.datas,
|
|
},
|
|
{
|
|
radius: '58%',
|
|
type: 'gauge',
|
|
detail: { show: false },
|
|
axisLine: {
|
|
// 坐标轴线
|
|
lineStyle: {
|
|
// 属性lineStyle控制线条样式
|
|
color: [[1, _this.color]],
|
|
width: 2,
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
radius: '58%',
|
|
type: 'gauge',
|
|
detail: { show: false },
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: [[1, _this.color]],
|
|
width: 16,
|
|
opacity: 0.2,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
//内圆1
|
|
type: 'pie',
|
|
radius: '25%',
|
|
center: ['50%', '50%'],
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
animation: false,
|
|
itemStyle: {
|
|
color: '#6DB9C6',
|
|
opacity: 0.2,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [100],
|
|
},
|
|
{
|
|
//内圆1
|
|
type: 'pie',
|
|
radius: '20%',
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
animation: false,
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
color: '#6DB9C6',
|
|
opacity: 0.2,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [100],
|
|
},
|
|
{
|
|
//内圆1
|
|
type: 'pie',
|
|
radius: ['8%', '4%'],
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
animation: false,
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
color: '#6DB9C6',
|
|
opacity: 1,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [100],
|
|
},
|
|
{
|
|
//内圆1
|
|
type: 'pie',
|
|
radius: '4%',
|
|
emphasis: {
|
|
disabled: true,
|
|
},
|
|
animation: false,
|
|
center: ['50%', '50%'],
|
|
itemStyle: {
|
|
color: '#274348',
|
|
opacity: 1,
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
data: [100],
|
|
},
|
|
],
|
|
};
|
|
return option;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|