echarts案例之仪表盘如何单独设置指针颜色？

一、此案例基于Vue3+ts，效果展示：

二、单个属性的值：

1、单独设置指针的颜色

series：[

......

{

......

 itemStyle: {

          color: 'rgba(161, 255, 249, 1)',

        },

......

}

......

]

2、设置最外圈数值的样式

series：[

......

{

......

     detail: {

          offsetCenter: ['50%', '30%'],

          color: 'rgba(61, 255, 243, 1)',

        },

......

}

......

]

三、完整代码如下： 

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