echarts温度计柱状图效果实现

现在官网有部分的温度计图，但是很多都是一个温度计，最近工作过程中遇到了一个需要有很多温度计的柱状图，并且还要根据不同字段的值来改变每个温度计的颜色，稍微研究了一下，这里面的实现方式在这里给大家简单讲解一下吧。

我也很烦那些写了半天的话，代码还是零零散散的，那我就话不多说直接上整体代码吧（里面有讲解，肯定还有可以优化的地方，望大家多多指导）

效果图

var echartOption = {
   
	thermometer: function (data, tagId, color) {
   
		let barSerise = [] // 温度计里面的柱的值
		var emptyArrIn = [] // 温度计最上面带颜色的内圆z:2
		var emptyArrWhite = [] // 温度计底下背景圆z:1
		var emptyArrOut = [] // 温度计最底下外框圆z:0
		// 这上面三个数组emptyArrIn emptyArrWhite emptyArrOut 
		// 其实就是为了保证当温度计的最底下的圆的显示
		// 这下面两个数组maxArrOut maxArrIn 同理
		var maxData = Number(data.dataBar[0]) //先定义一个值的再去遍历
		var maxArrOut = []
		var maxArrIn = []
		// 遍历出来最大值 保证温度计的外框有个固定的高度
		data.dataBar.forEach((item) => {
   
			if (Number(maxData) < item) {
   
				maxData = item
			}
		})
		// 遍历出来温度计背景框的最大值
		data.dataBar.forEach(() => {
   
			maxArrIn.push(maxData * 1.194)
			// 1.194是我自己根据自己的感觉算出来的保证上边框与两边的边框宽度一样
			// 一层背景框盖过底层的颜色框就成了温度计的外边框
		})
		// 判断是否要根据穿的参数来改变温度计的颜色
		// 我这里面穿了两个颜色一个红色一个绿色，中间的背景框和背景圆都设置成白色#fff
		// 这里面我给外框称了1.2是为了保证没有温度计顶到头，为了美观一些
		if (data.dataIsWarning) {
   
			data.dataIsWarning.forEach((item, index) => {
   
				emptyArrWhite.push({
   
					value: 0,
					itemStyle: {
   
						normal: {
   
							color: '#fff',
						},
					}
				})
				if (item == '1') {
   
					barSerise.push({
   
						name: data.dataName1,
						value: data.dataBar[index],
						itemStyle: {
   
							normal: {
   
								color: color[0