[JavaScript知识库] echarts根据数据范围显示不同的颜色

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> echarts根据数据范围显示不同的颜色 -> 正文阅读

[JavaScript知识库]echarts根据数据范围显示不同的颜色

<!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>