<template>
<div class="gague-wrap">
<div class="gague" ref="gagueEchart"></div>
</div>
</template>
<script>
import * as $echarts from 'echarts'
export default {
name: 'gagueChart',
props: {
data: {
type: Object,
required: true,
default: () => {
return {
name: 'Km/h',
value: 50
}
}
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
}
},
watch: {
data: {
deep: true,
handler() {
this.init();
}
}
},
data() {
return {
// 图表类型
myEchart: null,
// 图标配置项
options: {
backgroundColor: ['#000'],
tooltip: {show: false},
series: [
{
type: 'gauge',
min: this.min,
max: this.max,
// 仪表盘宽度及颜色
axisLine: {
lineStyle: {
width: 3,
color: [
[1, '#000']
]
}
},
// 不显示指针
pointer: {
show: false
},
// 小刻度
axisTick: {
// show: false,
distance: 10,
length: 2,
lineStyle: {
color: '#fff',
width: 1
}
},
// 大刻度
splitLine: {
// show: false,
distance: -5,
length: 5,
lineStyle: {
color: '#fff',
width: 1
}
},
// 刻度值
axisLabel: {
// show: false,
color: '#fff',
distance: 2,
fontSize: 5
},
// name位置
title: {offsetCenter: [0, '80%'], color: '#fff',fontSize:8},
// value位置
detail: {
formatter: '{value}',
offsetCenter: [0, 0],
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
},
data: [
{
value: 70
}
]
}
]
}
};
},
// 创建元素
mounted() {
this.init();
},
// 销毁
destroyed() {
// 销毁图表
this.destroyedChart();
},
methods: {
/**
* @description 初始化的方法
* @name init
* @return {*} 无
*/
init() {
// 更新数据
this.update(this.data);
},
/**
* @description 刷新图表
* @return {*} 无
*/
refresh() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 更新
* @param {Object} data 图标数据
* @name update
* @return {*} 无
*/
update(data) {
// 如果不存在echarts
if (!this.myEchart) {
// 图表对象
this.myEchart = $echarts.init(this.$refs.gagueEchart);
// 绑定resize 事件
this.bindResizeEvent();
}
// 更新数据
this.updateData(data);
// 清空图表
this.myEchart.clear();
// 生成图表
this.myEchart.setOption(this.options);
},
/**
* @description 更新数据
* @name updateData
* @param {object} data 参数
* @return {*} 无
*/
updateData(data) {
this.options.series[0].data[0].name = data.name;
this.options.series[0].data[0].value = data.value;
},
/**
* @description 事件处理函数
* @name resizeHandler
* @return {*} 无
*/
resizeHandler() {
if (this.myEchart) {
this.myEchart.resize();
}
},
/**
* @description 绑定resize 事件
* @name init
* @return {*} 无
*/
bindResizeEvent() {
// 绑定resize事件
window.addEventListener('resize', this.resizeHandler);
},
// 取消事件绑定
unbindResizeEvent() {
// 取消绑定resize事件
window.removeEventListener('resize', this.resizeHandler);
},
/**
* @description 销毁图表
* @name destroyedChart
* @return {*} 无
*/
destroyedChart() {
// 如果存在echarts
if (this.myEchart) {
// 销毁实例,销毁后实例无法再被使用。
this.myEchart.dispose();
this.myEchart = null;
// 取消事件绑定
this.unbindResizeEvent();
}
}
}
};
</script>
<style lang="scss">
.gague-wrap {
.gague {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
}
}
</style>
06-13
4387
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-07
321
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-26
8134
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-26
402
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-21
1777
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
03-01
631
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)