echarts自定义仪表盘实现特殊功能：轴线渐变（半透明） + 刻度颜色变化 + 仪表盘轴线宽度自适应

如图是我画的两个仪表盘
第一个仪表盘，实现了：轴线渐变（半透明） + 刻度颜色变化 + 仪表盘轴线宽度自适应
第二个仪表盘，实现了：仪表盘轴线宽度自适应

---

关于轴线的渐变：

本来打算使用img。但是由于此轴线是透明度渐变，不同位置透明度不一样，所以无法使用img。因此就用了echarts.graphic.LinearGradient。这个函数是适用于，线性的。因为我将整个轴线分成了左右2部分来实现。分别使用echarts.graphic.LinearGradient，来实现 360度的渐变（我可太难了！！！）

---

关于刻度颜色变化：

本来看了很多解法都是，直接用img。我用了再刷新的时候会报错，解决不了，就换了种方法，新加一个轴线 ，name: ‘分割线’ 将轴线的宽度置为0，配合着 axisTick.lineStyle.color ：auto 实现 不同位置的刻度线的颜色不一样

---

仪表盘轴线宽度自适应：

因为要兼容不同的浏览器的分辨率，所以为了处理兼容性，实现仪表盘的自适应，仪表盘需要用rem的属性有： 环线的宽度（x） 字体大小（√） radius半径大小（可以用百分比代替）
环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例

---

关于仪表盘实现，整个圆形

用的是 下面的方法。但是这个只适用于，新版本的奥。我再4.16.3版本是OK的，4.15版本就无法实现。

 startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -270,

4.15版本可用下面的方法：

 startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -269.999,

其他细节和功能 代码的备注写的很清晰。就不赘述了。
【这两个玩意整了我几乎一天，感谢我方ui让我探索新世界，】

import * as echarts from 'echarts';
// 动态获取视口宽度，实现echarts仪表盘部分区域的 宽度自适应                
function getCurrentWidth() {
	let percent = 1;
	let currentWidth = window.innerWidth;
	switch (currentWidth) {
		case currentWidth <= 1280:
			percent = 0.72;
			break;
		case currentWidth <= 1366:
			percent = 0.768;
			break;
		case currentWidth <= 1440:
			percent = 0.8;
			break;
		case currentWidth <= 1600:
			percent = 0.864;
			break;
		case currentWidth <= 1680:
			percent = 0.88;
			break;
		default:
			percent = 1;
			break;
	}

	return percent;
}

//仪表盘1 轴线 生成渐变颜色
function getDashbordColor(percent) {
	let currentInfo = [];
	// 这个东西，默认是对称显示,因为 LinearGradient 是线性的，只能再一个方向上渐变。要想实现从0 到 360的渐变，需要分成2段展示
	const baseInfo = [
		// 右半边
		[
			0.5,
			// 前四个方位分别代表 ： 右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置。
			new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{ offset: 0, color: 'rgba(249, 1, 0,0)' }, //   起始位置的颜色
				{ offset: 1, color: 'rgba(249, 1, 0,0.55)' }, //终止位置的颜色------为了过渡自然，增加了0.05
			]),
		],
		// 左半边
		[
			1,
			// 前四个方位分别代表 ： 右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置,
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [
				{ offset: 0, color: 'rgba(249, 1, 0,0.45)' }, //下方起始位置的颜色------为了过渡自然，减少了0.05
				{ offset: 1, color: 'rgba(249, 1, 0,1)' }, //终止位置的颜色
			]),
		],
	];

	// 1、如果是小于0.5 那么只算右边一段。并根据当前的百分比 算出 当前位置的offset 和  透明度
	if (percent <= 0.5) {
		const currentOffset = percent / 0.5;
		const currentOpacity = percent / 1;
		currentInfo = [
			[
				currentOpacity,
				new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: 'rgba(249, 1, 0, 0)' },
					{ offset: currentOffset, color: `rgba(249, 1, 0,${currentOpacity})` },
				]),
			],
		];
	} else if (percent <= 1) {
		// 2、如果 大于0.5
		// 2.1先加上固定的baseinfo的数据。
		currentInfo.push(baseInfo[0]);
		// 2.2再根据当前的百分比 算出 当前位置的offset 和  透明度
		const currentOffset = (percent - 0.5) / 0.5;
		const currentOpacity = percent / 1;
		const left = [
			currentOpacity,
			// 前四个方位分别代表 ： 右下左上，而0 0 0 1则代表渐变色从正上方开始.offset的范围是0 ~ 1, 用于表示位置,
			new echarts.graphic.LinearGradient(0, 1, 0, 0, [
				{ offset: 0, color: 'rgba(249, 1, 0,0.45)' },
				{ offset: currentOffset, color: `rgba(249, 1, 0, ${currentOpacity})` },
			]),
		];
		currentInfo.push(left);
	}
	return currentInfo;
}
// 生成仪表盘1
export function createDashboardTask(num = 151, percent = 0.4, title = '中度') {
	// 0、数据准备
	// 此echarts需要用rem的属性有：  环线的宽度（x） 字体大小（√） radius半径大小（可以用百分比代替）
	// 环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例
	let currentPercent = getCurrentWidth();
	const dashboardBaseWidth = 6 * currentPercent;
	const dashboardOutWidth = 10 * currentPercent;
	const dashboardValueWidth = 10 * currentPercent;

	// 1.基于准备好的dom，初始化echarts图表
	let myChart = echarts.init(document.getElementById('dashbordTask'));
	const option = {
		series: [
			{
				name: '内侧轴线基底',
				type: 'gauge',
				//半径
				radius: '60.6557%',
				//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'],
				splitNumber: 0, //内环刻度的个数
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					lineStyle: {
						// 属性lineStyle控制线条样式
						width: dashboardBaseWidth,
						color: [[1, '#3C82A0']], //轴线的不同位置的颜色
						opacity: 0.15, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
						shadowColor: 'black',
						shadowBlur: 0,
						shadowOffsetX: 0,
					},
				},
				// 分隔线样式。
				splitLine: {
					show: false, // 是否显示分隔线,默认 true。
				},

				//刻度样式
				axisTick: {
					show: false,
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
					show: false,
					//指针长度
					length: '90%',
					width: 10,
				},
				//仪表盘标题。
				title: {
					show: false,
				},
				//仪表盘，用于显示数据。
				detail: {
					show: false,
				},
				zlevel: 1, //如果多个环重复了，指定等级的 类似于 z-index
			},
			{
				name: '内环值',
				type: 'gauge',
				//半径
				radius: '65.57%',
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'], //圆心相对于整个div的位置
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					// 属性lineStyle控制线条样式
					lineStyle: {
						width: dashboardValueWidth,
						color: getDashbordColor(percent),
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},
				//刻度样式
				axisTick: {
					show: false,
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					show: false,
				},

				data: [{ value: num, name: title }],
				//仪表盘标题。
				title: {
					show: true,
					offsetCenter: [0, '-30%'], // x, y，单位px
					textStyle: {
						color: '#FEFEFE',
						fontSize: '0.14rem',
						fontFamily: 'zihun58hao-chuangzhonghei',
						fontWeight: 400,
					},
				},
				//仪表盘详情，用于显示数据。
				detail: {
					show: true,
					offsetCenter: [0, '30%'],
					formatter: '{value}',
					textStyle: {
						color: '#FEFEFE',
						fontSize: '0.2rem',
						fontFamily: 'Fontquan-XinYilogoTi',
						fontWeight: 700,
					},
				},
				zlevel: 1,
			},
			{
				name: '外侧轴线',
				type: 'gauge',
				//半径
				radius: '98.36%',
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'],
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					lineStyle: {
						// 属性lineStyle控制线条样式
						width: dashboardOutWidth,
						color: [[1, '#3C82A0']],
						opacity: 0.15,
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},

				splitNumber: 1.2, //分隔线之间分割的刻度数，不是点的个数    1 是 5个  1.2是6个？？
				//刻度样式
				axisTick: {
					show: false,
					distance: 0,
					length: 1.5,
					lineStyle: {
						color: '#F90100',
						// color: {
						// 	image: document.getElementById('bg_img'),
						// 	repeat: 'no-repeat',
						// },
						width: 8,
						type: 'solid',
						dashOffset: 0,
					},
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
					show: false,
				},
				//仪表盘标题。
				title: {
					show: false,
				},
				//仪表盘详情，用于显示数据。
				detail: {
					show: false,
				},
				zlevel: 1,
			},
			{
				name: '分割线',
				type: 'gauge',
				//半径
				radius: '75%',
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'],
				//仪表盘轴线相关配置。
				axisLine: {
					show: true,
					lineStyle: {
						width: 0,
						color: [
							[0.25, '#FFFF00'],
							[0.45, '#F07108'],
							[0.55, '#F90100'],
							[0.76, '#9E004F'],
							[0.9, '#790222'],
							[1, '#3BAE3E'],
						],
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},
				splitNumber: 6, //将整个轴线分割成n份
				//刻度样式
				axisTick: {
					splitNumber: 1, //分隔线之间分割的n小份，不是点的个数    1 是 5个  1.2是6个？？
					show: true,
					distance: 0,
					length: 3,
					lineStyle: {
						width: 3,
						color: 'auto',
					},
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
					show: false,
				},
				//仪表盘标题。
				title: {
					show: false,
				},
				//仪表盘详情，用于显示数据。
				detail: {
					show: false,
				},
				zlevel: 1,
			},
		],
	};
	myChart.clear();
	// 2.为echarts对象加载数据
	myChart.setOption(option);
}

export function createDashboardAir(total = 123, percent = 60) {
	// 0、数据准备
	// 此echarts需要用rem的属性有：  环线的宽度（x） 字体大小（√） radius半径大小（可以用百分比代替）
	// 环线的宽度：采用了getCurrentWidth函数返回当前的视口宽度下，基于1920x1080宽度的比例
	const currentPercent = getCurrentWidth();
	const dashbordBaseWidth = 10 * currentPercent; //内环基底的宽度
	const dashbordValueWidth = 5 * currentPercent; //内环值的宽度
	// 1、基于准备好的dom，初始化echarts图表
	let myChart = echarts.init(document.getElementById('dashbordAir'));
	const option = {
		series: [
			{
				name: '内环基底',
				type: 'gauge',
				//半径 取值：number  或者  百分比  。 仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
				radius: '89.583%',
				//起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'],
				splitNumber: 0, //内环刻度的个数
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					lineStyle: {
						// 属性lineStyle控制线条样式
						width: dashbordBaseWidth,
						color: [[1, 'rgb(31, 188, 211)']], //轴线的不同位置的颜色
						opacity: 0.1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
						shadowColor: 'black',
						shadowBlur: 0,
						shadowOffsetX: 0,
					},
				},
				// 分隔线样式。--就是刻度
				splitLine: {
					show: false, // 是否显示分隔线,默认 true。
				},

				//刻度样式
				axisTick: {
					show: false,
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					show: false,
				},
				zlevel: 2, //如果多个环重复了，指定等级的 类似于 z-index
			},
			{
				name: '内环值',
				type: 'gauge',
				//半径
				radius: '79.167%',
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'], //圆心相对于整个div的位置
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					lineStyle: {
						// 属性lineStyle控制线条样式
						width: dashbordValueWidth,
						color: [[percent / 100, '#2A79A2']],
					},
				},
				//      刻度值          仪表盘标题
				data: [{ value: percent, name: `总计${total}项` }],
				//仪表盘标题。
				title: {
					show: true,
					offsetCenter: [0, '-20%'], // x, y，单位px
					textStyle: {
						color: '#FEFEFE',
						fontSize: '0.12rem',
						fontFamily: 'zihun58hao-chuangzhonghei',
						fontWeight: 400,
					},
				},
				//仪表盘，用于显示数据。
				detail: {
					show: true,
					offsetCenter: ['5%', '30%'],
					formatter: '{value}%',
					textStyle: {
						fontSize: '0.18rem',
						color: '#FEFEFE',
						fontFamily: 'Fontquan- XinYilogoTi',
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},
				//刻度样式
				axisTick: {
					show: false,
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
					show: false,
				},

				zlevel: 3,
			},
			{
				name: '外侧环线',
				type: 'gauge',
				//半径
				radius: '98%',
				startAngle: 90, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
				endAngle: -270,
				center: ['50%', '50%'],
				//仪表盘轴线相关配置。
				axisLine: {
					// 坐标轴线
					show: true,
					lineStyle: {
						// 属性lineStyle控制线条样式
						width: 1,
						color: [[1, 'rgba(31, 188, 211, 1)']],
						opacity: 0.3,
					},
				},
				//分隔线样式。
				splitLine: {
					show: false,
				},
				//刻度样式
				axisTick: {
					show: false,
				},
				//刻度标签。
				axisLabel: {
					show: false,
				},
				//仪表盘指针。
				pointer: {
					//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
					show: false,
				},
				//仪表盘标题。
				title: {
					show: false,
				},
				//仪表盘详情，用于显示数据。
				detail: {
					show: false,
				},
				zlevel: 1,
			},
		],
	};

	// 2、为echarts对象加载数据
	myChart.setOption(option);
}