<!-- @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>