echarts根据数据范围显示不同的颜色_echarts水球图属性设置剩余部分的颜色-CSDN博客

本文链接：https://blog.csdn.net/weixin_54366356/article/details/124228842

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script src="js/echarts5.0.2.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="vm" style="width: 90vw;height: 90vh;">

		</div>
		<script type="text/javascript">
			var chart = echarts.init(document.getElementById("vm"))
			// prettier-ignore
			const hours = [
				'12a', '1a', '2a', '3a', '4a', '5a', '6a',
				'7a', '8a', '9a', '10a', '11a',
				'12p', '1p', '2p', '3p', '4p', '5p',
				'6p', '7p', '8p', '9p', '10p', '11p'
			];
			// prettier-ignore
			const days = [
				'Saturday', 'Friday', 'Thursday',
				'Wednesday', 'Tuesday', 'Monday', 'Sunday'
			];
			// prettier-ignore
			const data = [
				[0, 0, 5],
				[1, 1, 9],
				[3, 5, 2],
				[5,5,8],
				[5,4,2]
			]

			option = {
				tooltip: {
					position: 'top'
				},
				grid: {
					height: '50%',
					top: '10%'
				},
				xAxis: {
					type: 'category',
					data: hours,
					splitArea: {
						show: true
					}
				},
				yAxis: {
					type: 'category',
					data: days,
					splitArea: {
						show: true
					}
				},
				visualMap: {
					type: 'piecewise',//设置此属性
					min: 0,
					max: 12,
					splitNumber: 3,
					calculable: true,
					orient: 'horizontal',
					left: 'center',
					bottom: '15%',
					inRange: {
						color: ['#ff5f37', 'rgba(34, 212, 21, 0.7)', 'rgba(112, 131, 255, 1.0)']//分三段颜色显示
					},
					textStyle: {
						color: '#f00'
					}
				},
				series: [{
					name: 'Punch Card',
					type: 'heatmap',
					data: data,
					label: {
						show: true
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			chart.setOption(option, true)
		</script>
	</body>
</html>