需要实现的效果:
相关实现代码如下:
<template>
<div class="temperature">
<div
ref="temperatureChart"
class="temperature-chart"
/>
<!-- <div
v-else
class="noData"
>
暂无数据
</div> -->
</div>
</template>
<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
name: 'gaugeChart',
props: {
colorStyle: {
type: String,
default: 'rgba(20, 154, 250, 1)',
},
dataObj: {
type: Object,
default: {},
},
},
data() {
return {
// 实例
myChart: null,
options: {},
resizeChart: debounce(() => {
if (!this.myChart) return
this.myChart.resize()
}, 200),
}
},
watch: {
'dataObj.vehicleSpeed'(val) {
this.initChart()
},
// 'dataObj.remainHydrogenPercentage'(val) {
// this.initChart()
// },
'dataObj.soc'(val) {
this.initChart()
},
},
mounted() {
// 初始化
this.initChart()
},
destroyed() {
// 销毁
window.removeEventListener('resize', this.resizeChart)
this.myChart && this.myChart.dispose()
},
methods: {
initChart(val) {
var min = [0, 0, 0]
var max = [280, 100, 100]
var options = {
tooltip: {
show: false
},
toolbox: {
show: false,
},
series: [
{
type: 'gauge',
name: '当前时速',
radius: '80%', // 仪表盘半径
z: 3, // 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
min: min[0],
max: max[0],
splitNumber: 7, // 仪表盘刻度的分割段数
axisLine: {
// 仪表盘轴线 // 无数据的底部背景圆环
show: true,
lineStyle: {
width: 5,
shadowColor: '#fff',
color: [
// 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。
[
this.dataObj.vehicleSpeed / max[0], 'rgba(28, 195, 211, 1)'
// new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: ' rgba(28, 195, 211, 1)',
// },
// {
// offset: 1,
// color: 'rgba(46, 227, 137, 1)',
// },
// ]),
],
[1, '#E5E5E5'],
],
},
},
splitLine: {
// 刻度分隔线
show: true,
length: 10, // 刻度线长
lineStyle: {
color: 'auto',
width: 1, // '#E5E5E5'
}
},
axisTick: {
// 刻度样式// 刻度分割线设置成圆环
show: true,
splitNumber: 10, // 分隔线之间分割的刻度数
length: 8, // 出现刻度文字的线长
lineStyle: {
color: 'auto', // rgba(229, 229, 229, 1)',
width: 1
}
},
axisLabel: {
// 刻度标签
show: true,
distance: 5, // 标签与刻度线的距离
fontSize: 10,
color: '#8b8b8b',
// formatter:'' // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
},
pointer: {
// 仪表盘指针
show: true,
// length: '5%', // 指针长度
width: 1 // 指针宽度
},
title: {
fontSize: 14,
offsetCenter: [0, '80%'],
color: '#666',
},
detail: {
valueAnimation: true,
offsetCenter: [5, 0],
formatter: function (value) {
return '{value|' + value + '} \n{unit|km/h}'
},
align: 'center',
rich: {
value: {
fontSize: 32,
fontWeight: 'bold',
color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
padding: [0, 0, 10, 0],
borderRadius: 25,
backgroundColor: 'rgba(255, 255, 255, .8)'
},
unit: {
fontSize: 12,
padding: [0, 5, 0, 0],
color: '#8B8B8B',
},
},
},
data: [
{
value: this.dataObj.vehicleSpeed || 0,
name: '当前时速',
},
],
},
{
name: '剩余氢量',
type: 'gauge',
center: ['20%', '55%'],
radius: '45%', // 半径
min: min[1],
max: max[1],
clockwise: false, // 仪表盘刻度是否是顺时针增长
startAngle: 45, // 起始角度。圆心 正右手侧为0度,正上方为90度,正左手侧为180度
endAngle: 315, // 结束角度
splitNumber: 40, // 分割线之间的刻度
pointer: {
// 仪表盘指针
show: true,
// showAbove: false, // 指针是否显示在标题和仪表盘详情上方。从 v5.2.0 开始支持
// icon: this.startPointicon, // 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',从 v5.0 开始支持
// keepAspect: false, // 如果图标是 path:// 的形式,是否在缩放时保持该图形的长宽比,从 v5.0 开始支持
// length: '5%', // 指针长度
width: 1, // 指针宽度
// offsetCenter: ['0', '-40%'], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。从 v5.0 开始支持
// itemStyle: {
// // 指针样式
// // color: 'rgba(205, 196, 196, 1)'
// }
},
axisLine: {
// 仪表盘轴线
lineStyle: {
// 控制线条样式
width: 3,
color: [
[
0, 'rgba(28, 195, 211, 1)'
// new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: ' rgba(28, 195, 211, 1)',
// },
// {
// offset: 1,
// color: 'rgba(46, 227, 137, 1)',
// },
// ]),
],
[1, ' #E5E5E5'],
],
},
},
axisTick: {
// 刻度
show: false,
},
axisLabel: {
// //刻度标签
show: false,
distance: -40
},
splitLine: {
// 分隔线
show: true,
length: 6, // -4,
distance: 10,
lineStyle: {
color: '#E5E5E5',
width: 1,
}
},
title: {
fontSize: 10,
offsetCenter: [0, '65%'],
color: '#666',
},
detail: {
// 仪表盘文字
offsetCenter: [0, 0],
formatter: function (value) {
var value = '-'
return '{value|' + value + '} \n{unit|kg}' // %
},
align: 'center',
rich: {
value: {
fontSize: 20,
fontWeight: 'bold',
color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
padding: [0, 0, 4, 10],
borderRadius: 25,
backgroundColor: '#fff'
},
unit: {
fontSize: 10,
padding: [0, 0, 0, 0],
color: '#8B8B8B',
},
},
},
data: [
{
value: this.dataObj.remainHydrogenPercentage || 0,
name: '剩余氢量',
},
],
},
{
name: 'SOC',
type: 'gauge',
center: ['80%', '55%'],
radius: '45%',
min: min[2],
max: max[2],
startAngle: 135,
endAngle: -135,
splitNumber: 40,
pointer: {
// 仪表盘指针
show: true,
// showAbove: false, // 指针是否显示在标题和仪表盘详情上方。从 v5.2.0 开始支持
// icon: this.startPointicon, // 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',从 v5.0 开始支持
// keepAspect: false, // 如果图标是 path:// 的形式,是否在缩放时保持该图形的长宽比,从 v5.0 开始支持
// length: '5%', // 指针长度
width: 1, // 指针宽度
// offsetCenter: ['0', '-40%'], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。从 v5.0 开始支持
// itemStyle: {
// // 指针样式
// // color: 'rgba(205, 196, 196, 1)'
// }
},
axisLine: {
lineStyle: {
width: 3,
color: [
[
this.dataObj.soc / max[2], 'rgba(28, 195, 211, 1)'
// new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: ' rgba(28, 195, 211, 1)',
// },
// {
// offset: 1,
// color: 'rgba(46, 227, 137, 1)',
// },
// ]),
],
[1, ' #E5E5E5'],
],
},
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: true,
length: 6, // 刻度线长
distance: 10, // 刻度线与圆环的距离
lineStyle: {
color: 'auto', // '#E5E5E5',
width: 1,
},
// show: true,
// length: 6, // -4,
// distance: 10,
// lineStyle: {
// color: '#E5E5E5',
// width: 1,
// }
},
title: {
fontSize: 10,
offsetCenter: [0, '65%'],
color: '#666',
},
detail: {
offsetCenter: [0, 0],
formatter: function (value) {
return '{value|' + value + '} \n{unit|%}'
},
align: 'center',
rich: {
value: {
fontSize: 20,
fontWeight: 'bold',
color: 'rgba(28, 195, 211, 1)',// ' #19ACBA',
padding: [0, 0, 8, 10],
borderRadius: 25,
backgroundColor: '#fff'
},
unit: {
fontSize: 10,
padding: [0, 0, 0, 0],
color: '#8B8B8B',
},
},
},
data: [
{
value: this.dataObj.soc || 0,
name: 'SOC',
},
],
},
],
}
this.myChart = echarts.init(this.$refs.temperatureChart)
this.myChart.setOption(options)
window.addEventListener('resize', this.resizeChart)
},
},
}
</script>
<style lang="scss" scoped>
.temperature {
margin-top: -18px;
margin-left: -20px;
// padding: 0.18rem;
height: 100%;
.temperature-chart {
width: 400px;
height: 200px;
font-weight: 400;
color: rgb(0, 0, 0);
text-align: center;
// line-height: 0.36rem;
font-size: 12px;
}
}
</style>
utils:
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
// 据上一次触发时间间隔
const last = +new Date() - timestamp
// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延时不存在,重新设定延时
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}