一、此案例基于Vue3+ts，效果展示：
二、单个属性的值：
1、单独设置指针的颜色
series：[
......
{
......
itemStyle: {
color: 'rgba(161, 255, 249, 1)',
},
......
}
......
]
2、设置最外圈数值的样式
series：[
......
{
......
detail: {
offsetCenter: ['50%', '30%'],
color: 'rgba(61, 255, 243, 1)',
},
......
}
......
]
三、完整代码如下：
<template>
<div class="container" ref="barRef"></div>
</template>
<script setup lang="ts" name="todaySAirQualityIndex-dashboard">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const barRef = ref();
let myChart: any = null; // echarts实例对象
onMounted(() => {
initCharts();
});
// 变化尺寸
const onResize = (resize: any) => {
console.log('resize: ', resize);
myChart && myChart.resize();
};
window.addEventListener('resize', onResize);
const initCharts = () => {
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'rgba(73, 255, 255, 1)', // 0% 处的颜色
},
{
offset: 0.2,
color: 'rgba(127, 254, 121, 1)', // 100% 处的颜色
},
{
offset: 0.4,
color: 'rgba(255, 217, 84, 1)', // 100% 处的颜色
},
{
offset: 0.6,
color: 'rgba(255, 142, 67, 1)', // 100% 处的颜色
},
{
offset: 0.8,
color: 'rgba(255, 71, 54, 1)', // 100% 处的颜色
},
{
offset: 1,
color: 'rgba(244, 43, 91, 1)', // 100% 处的颜色
},
]);
const colorSet = [[1, color]];
const rich = {
white: {
fontSize: 50,
color: '#fff',
fontWeight: '500',
padding: [-150, 0, 0, 0],
},
bule: {
fontSize: 70,
fontFamily: 'DINBold',
color: '#fff',
fontWeight: '700',
padding: [-120, 0, 0, 0],
},
radius: {
width: 350,
height: 80,
// lineHeight:80,
borderWidth: 1,
borderColor: '#0092F2',
fontSize: 50,
color: '#fff',
backgroundColor: '#1B215B',
borderRadius: 20,
textAlign: 'center',
},
size: {
height: 400,
padding: [100, 0, 0, 0],
},
};
let option = {
tooltip: {
show: false,
},
series: [
{
type: 'gauge',
center: ['50%', '75%'],
radius: '95%',
startAngle: '180',
endAngle: '0',
pointer: {
show: true,
width: 5,
length: '68%',
color: '#fff',
},
detail: {
formatter: function (value: any) {
return value;
},
rich: rich,
// fontWeight: 'bolder',
// 数值位置
offsetCenter: ['50%', '30%'],
color: 'rgba(61, 255, 243, 1)',
},
data: [
{
name: '空气质量',
value: (40 / 100) * 100,
},
],
title: {
show: true,
fontSize: 14,
color: '#ACCAC9',
// 位置
offsetCenter: ['-20%', '30%'],
},
// 指针的颜色
itemStyle: {
color: 'rgba(161, 255, 249, 1)',
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: 12,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
length: 10,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid',
},
},
axisLabel: {
show: false,
formatter: function (v: any) {
return v.toFixed(0);
},
},
animationDuration: 4000,
},
{
name: '灰色内圈', //刻度背景
type: 'gauge',
z: 2,
center: ['50%', '75%'],
radius: '70%',
startAngle: '180',
endAngle: '0',
//center: ["50%", "75%"], //整体的位置设置
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式(刻度线样式)
color: [[1, 'rgba(82, 255, 252, 0.3)']],
fontSize: 20,
width: 2,
opacity: 1, //刻度背景宽度
},
},
splitLine: {
show: false,
},
axisLabel: {
// show: false,
distance: -70,
color: 'rgba(82, 255, 252, 0.8)',
fontSize: 12,
formatter: function (v: any) {
return v.toFixed(0);
},
},
pointer: {
show: false,
},
axisTick: {
show: false,
},
detail: {
show: 0,
},
},
{
name: '白色圈刻度',
type: 'gauge',
center: ['50%', '75%'],
radius: '95%',
startAngle: 180, //刻度起始
endAngle: 0, //刻度结束
min: 0,
max: 100,
splitNumber: 10,
z: 4,
axisTick: {
show: false,
},
splitLine: {
length: 8, //刻度节点线长度
lineStyle: {
width: 2,
color: 'rgba(82, 255, 252, 0.8)',
}, //刻度节点线
},
axisLabel: {
show: false,
color: 'rgba(82, 255, 252, 0.8)',
fontSize: 14,
formatter: function (v: any) {
return v.toFixed(0);
},
}, //刻度节点文字颜色
pointer: {
show: false,
},
axisLine: {
lineStyle: {
opacity: 0,
},
},
detail: {
show: false,
},
data: [
{
value: 0,
name: '',
},
],
},
{
//内圆
type: 'pie',
radius: '35%',
center: ['50%', '75%'],
z: 1,
itemStyle: {
color: new echarts.graphic.RadialGradient(
0.5,
1,
1,
[
{ offset: 0.5, color: '#1f545c' },
{ offset: 1, color: '#41a1a7' },
],
false
),
label: {
show: false,
},
labelLine: {
show: false,
},
},
emphasis: {
scale: false,
},
label: {
show: false,
},
tooltip: {
show: false,
},
data: [
{
value: 100,
},
{
value: 100,
itemStyle: {
color: 'transparent',
},
},
],
animationType: 'scale',
startAngle: 180,
},
],
};
myChart = echarts.init(barRef.value as HTMLDivElement);
myChart.setOption(option, true);
};
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 100%;
}
</style>