关于Eachrts 自定义按钮，实现右上角toolbox的icon高亮

在官方找了很久没有找到icon默认的高亮效果，于是自己想到了个野路子。 配置中默认选择一张当前图标类型的高亮图片，用自定义按钮去切换图片达到高亮效果。

// 首先引入四张图片
import bar from '../img/bar.png'
import activebar from '../img/activebar.png'
import line from '../img/line.png'
import activeline from '../img/activeline.png'


在 Eachrts配置对象中找到 toolbox对象
	toolbox: {
		show: true,
		right: '20',
		itemGap: 16,
		feature: {
			// 添加自定义按钮
			// magicType: { type: ['line', 'bar'] },
			// 折线图
			myLine: {
				show: true,
				title: '切换为折线图',
				icon: 'image://' + line,
				iconStyle: {
					fontSize: '18px',
					// normal: { opacity: 0.5 }, // 正常状态下样式
					// emphasis: { opacity: 1 } // 高亮状态下样式
				},
				onclick: function () {
					myiconFn('line')
				},

			},
			// 柱状图
			myBar: {
				show: true,
				title: '切换为柱状图',
				icon: 'image://' + activebar, // 因为我默认柱状图，所以默认配置了柱状图的高亮
				iconStyle: {
					fontSize: '18px',
					// normal: { opacity: 0.5 }, // 正常状态下样式
					// emphasis: { opacity: 1 } // 高亮状态下样式
				},
				onclick: function () {
					myiconFn('bar')
				},

			},
			// 刷新
			myRestore: {
				show: true,
				title: '刷新',
				icon: 'path://M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z',
				iconStyle: {
					fontSize: '18px'
				},
				onclick: function () {
					myiconFn('restore')
				},

			},
			saveAsImage: {},
		},
		iconStyle: {
			borderColor: '#bababa',
			emphasis: {
				borderColor: '#ff7f23',
			},
		},
	},
        
        
        // 传递事件以及逻辑处理 tag为line和bar时 切换图标和图标类型即可
        const myiconFn = (tag: string) => {
	if (tag === 'restore') {
		const devlist = ['新增设备统计', '活跃设备统计']
		const gatelist = ['新增网关统计', '活跃网关统计']
		const productlist = ['型号设备量统计排名(Top 20)', '品牌设备量统计排名(Top 20)', '分类设备量统计排名(Top 20)', '型号数据点统计排名(Top 20)', '型号命令本统计排名(Top 20)']
		if (devlist.includes(EachrtsOption.value.title.text)) {
			emit('devreset')
		}
		else if (gatelist.includes(EachrtsOption.value.title.text)) {
			emit('gatereset')
		}
		else if (productlist.includes(EachrtsOption.value.title.text)) {
			emit('productreset')
		}
	}
	else if (tag === 'line') {
		EachrtsOption.value.toolbox.feature.myLine.icon = 'image://' + activeline
		EachrtsOption.value.toolbox.feature.myBar.icon = 'image://' + bar
		EachrtsOption.value.series[0].type = 'line'
		magictypechangedFn('line')
	} else if (tag === 'bar') {
		EachrtsOption.value.toolbox.feature.myBar.icon = 'image://' + activebar
		EachrtsOption.value.toolbox.feature.myLine.icon = 'image://' + line
		EachrtsOption.value.series[0].type = 'bar'
		magictypechangedFn('bar')
	}
}

const magictypechangedFn = (params: string) => {
	if (params == 'bar') {
		let min = seriesData.value[0]; // 假设第一个元素是最小值
		let max = seriesData.value[0]; // 假设第一个元素是最大值
		for (let i = 1; i < seriesData.value.length; i++) {
			if (seriesData.value[i] < min) {
				min = seriesData.value[i]; // 更新最小值
			}
			if (seriesData.value[i] > max) {
				max = seriesData.value[i]; // 更新最大值
			}
		}
		const multiple = max / min
		EachrtsOption.value.series[0].barMinHeight = multiple > 100 ? 5 : 0
	}
	else if (params == 'line') {
		EachrtsOption.value.series[0].barMinHeight = 0
	}
	documentChart.value.setOption(EachrtsOption.value);
}