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

指针颜色？"/>

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

一、此案例基于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>