Echars 热力图 自定义颜色

最新推荐文章于 2024-05-30 23:16:00 发布
最新推荐文章于 2024-05-30 23:16:00 发布
阅读量4.1k 收藏 9
点赞数 3
分类专栏： 前端 echarts 文章标签： echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39251440/article/details/124248296
版权

以下仅供参考~
注意: 一定要注意echars版本
需要实现的效果是: target 、 Safe Time 单独指定颜色，超时时间数量根据条件指定对应颜色

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热力图 自定义颜色</title>
		<style type="text/css">
			body {
				background-color: #183B64;
			}
		</style>
	</head>
	<body>
		<div id="echarsID" style="width: 100%;height: 400px;"></div>
	</body>
	<!-- echars版本一定要注意，否则无法使用itemStyle指定颜色 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function showEchars() {
			let myChart = echarts.getInstanceByDom(document.getElementById("echarsID"));
			if (myChart === undefined) {
				myChart = echarts.init(document.getElementById("echarsID"));
			};
			//横坐标name
			var xAxis = ['IQC in', 'Flex bending', 'Aperture PF', 'RCVR', 'RCVR Inspection PDCA', '7P', 'Frame attach',
				'Overflow Cleaning', 'Ground Tape', 'Ring Welding', 'UMP', 'QQC-CG-ALT', 'OQC-Resistance', 'OQC-TSP', 'FQC in'
			];
			//纵坐标name
			var yAxis = ['target', 'Safe Time', '2H', '4H', '8H', '12H', '>12'];
			var data = [];
			for (var i = 0; i < xAxis.length; i++) {
				let arr = [];
				for (var j = 0; j < yAxis.length; j++) {
					let value = parseInt(Math.random() * 1200);
					//需求: 指定目标和安全时间固定颜色，剩下的超时时间数量根据条件判断来决定颜色
					// 值，下标
					let itemStyle = setColors(value, j);
					let obj = {};
					obj.itemStyle = itemStyle;
					obj.value = [i, j, value];
					data.push(obj)
				}
			}

			var option = {
				title: {
					text: "热力图 自定义颜色",
					left: 'center',
					textStyle: {
						color: "#fff"
					},
					top: '2%'
				},
				tooltip: {
					position: 'top',
					backgroundColor: 'rgba(42, 47, 53, 0.9)',
					borderColor: '#ffffff',
					textStyle: {
						color: "#fff"
					},
					axisPointer: {
						lineStyle: {
							color: '#fff'
						}
					}
				},
				grid: {
					left: '2%',
					right: '6%',
					bottom: '2%',
					top: '15%',
					containLabel: true
				},
				xAxis: [{
					show: false,
					type: '',
					data: xAxis,
					splitArea: {
						show: true
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff',
						},
					},
				}, {
					type: 'category',
					data: xAxis,
					splitArea: {
						show: true
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff',
						},
						interval: 0,
						rotate: 10
					},
				}],
				yAxis: {
					type: 'category',
					data: yAxis,
					splitArea: {
						show: true
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#fff',
						},
						interval: 0,
						// rotate: 15
					},
				},
				visualMap: {
					min: 0,
					max: 1200,
					calculable: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					textStyle: {
						color: "#fff"
					},
					// bottom: '15%',
					//自定义热力图颜色
					inRange: {
						color: ['#15B1F4', '#16c573', '#d18a17', '#ffac1d', '#D1621D']
					},
				},
				series: [{
					name: '数值',
					type: 'heatmap',
					data: data,
					label: {
						show: true,
						textStyle: {
							color: "#fff"
						}
					},
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			myChart.clear();
			myChart.setOption(option);
			carouselTooltip(myChart, option);
			window.addEventListener('resize', function() {
				myChart.resize();
			})
		}

		//轮播展示tooltip提示框
		function carouselTooltip(chart, option) {
			var currentIndex = -1;
			let obj = {};
			obj.chart = chart;
			obj.time = setInterval(() => {
				let dataLen = option.series[0].data.length;
				// 取消之前高亮的图形
				chart.dispatchAction({
					type: 'downplay',
					seriesIndex: 0,
					dataIndex: currentIndex
				});
				currentIndex = (currentIndex + 1) % dataLen;
				// 高亮当前图形
				chart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: currentIndex,
				});
				// 显示 tooltip
				chart.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: currentIndex
				});
			}, 1000)
		}
		
		// 筛选颜色
		function setColors(val, index) {
			let obj = {};
			let color = null;
			if (index == 0) {
				color = "#0288d1";
			} else if (index == 1) {
				color = "#16c573";
			} else {
				if (val <= 800) {
					color = '#15B1F4';
				} else if (val > 800 && val < 1000) {
					color = '#ffac1d';
				} else if (val >= 1000) {
					color = '#D1621D';
				}
			}
			if (color != null) {
				obj = {
					normal: {
						color: color,
					}
				}
			}
			return obj;
		}

		//调用方法
		showEchars()
	</script>
</html>
万德佛
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts 热力图修改颜色
Tine Aine
11-16 2935
// 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', 'Fr
Echarts 热力图自定义开发
虎康的博客
03-07 1417
热力图中的图例信息被默认显示，想要自定义图例内容，但是在 legend 配置中无法对图例进行自定义修改，在研究学习之后，因此，选择对 visualMap 的图例内容进行格式化，判断当前图例是在哪个范围从而return返回自定义指定的图例展示内容，在 formatter 的 function 中，可以拿到两个参数，即下图中的显示的。，在 formatter 的 function 中叫做 value1 和 value2，那么就可以加判断从而让图例展示我们想要的效果。
四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你
最新发布
weixin_57818879的博客
05-30 3365
主要通过直接赋值、回调函数静态映射和回调函数动态生成（包括渐变色）这几种方式来设置不同柱子的不同颜色。具体采用哪种方法取决于需求的复杂度和个性化程度，我相信总有一款适合你。
echarts热力背景图_ECharts保存背景透明PNG图片
weixin_39653442的博客
12-31 1342
ECharts 前端生成图片后，截图或采用 toolbox 的 saveAsImage 保存的图片存在背景，或为白色背景，下面即为如何保存为背景透明图片的方法。方法一、可以直接在配置项中将backgroundColor设置为rgba(128, 128, 128, 0)var option={backgroundColor: 'rgba(128, 128, 128, 0)', // saveAsIm...
ECharts热力图指定颜色
quietbxj的博客
09-12 6854
ECharts是便捷使用的图标框架，绘制热力图和方便： 热力图官方链接 https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian&theme=light 自定义热力图颜色 设置visualMap中的inRange，源码如下： visualMap: { min: 0, max: 15, calculable: true, orient:
echarts 热力图改变颜色
m0_49004429的博客
03-09 2596
visualMap: { calculable: true, orient: 'vertical', right: '1%',/** 指示器距离画布右侧的间隔 */ top: '5',/** 指示器距离画布顶部的间隔 */ inRange: { color: ['#D9E9F.
Pyecharts热力图——图表颜色控制
qq_45720608的博客
02-10 4021
对pyecharts热力图生成的图标颜色进行控制。
Echarts 表格热力图文字根据数据范围设置不同的颜色
jimjiayu
07-21 4163
label: { normal: { show: true, formatter:function(params){ if (params.data['2'] == 0){ return '{g|' + params.data['2'] + '}'; }else if (params.data['2'] >= 1 &&amp
基于ECharts & 百度地图的热力图展示设计与实现
04-15
ECharts是一个由百度开发的开源JavaScript图表库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及我们这里关注的热力图。热力图通常用于表示地理位置上的数据密度，例如人口分布、交通流量或天气状况等。本...
echarts2.0热力图实例
12-01
**ECharts 2.0 热力图实例详解** ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图以及我们今天要讨论的热力图等。在ECharts 2.0版本中，热力...
中国地图echarts热力图（含全国以及各省json文件），以颜色深浅来展现全国各地用户数量
01-14
本资源提供了一种使用Echarts库创建的中国地图热力图，该图能够以颜色深浅直观地展示全国各地的用户数量。Echarts是一个流行的开源JavaScript图表库，广泛应用于数据可视化，尤其在前端开发中深受青睐。下面将详细...
echarts百度地图热力图踩坑后项目实践案例源文件
07-04
在本项目实践中，我们主要探讨了如何在ECharts 2.0中利用百度地图实现热力图，并在遇到一系列挑战后找到解决方案。ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括热力图，能够清晰地展示...
echarts+mapbox 轨迹热力图
11-14
5. **自定义配置**：ECharts允许用户自定义颜色、样式、动画效果等，以满足个性化需求。 **Mapbox知识点：** 1. **Mapbox GL JS**：是Mapbox的JavaScript库，用于创建交互式、高性能的地图。 2. **自定义地图风格**...
Echarts颜色的设置
qq_42372534的博客
04-23 2231
关于echarts中color属性的设置，可以是常规的和css一样的样式： 如： ”rgba(255,255,255,0.2)“ rgb(255,255,255,0.2)" "#fff" "blue" 也可以是渐变，如线性渐变和径向渐变，如下： // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置 color: { type: 'linear'
echarts 热力图自定义区间颜色值
yuhuamei的博客
01-05 1768
echarts 热力图自定义区间颜色值
echarts地图根据接口数据的值显示每一块区域代表的不同颜色绘制销量热度等级地图...
热门推荐
走在路上的张先森
09-17 4万+
预计项目的初步效果图 接口提供的数据类型： 在这里根据value值的不同，显示不同的颜色，分别代表不同的等级划分 在绘图之前引入echarts的js文件，里面的市州名字需要与接口的数据相对应 <script type="text/javascript" src="js/echarts.js"> </script> var mapData = {};......
echarts热力背景图_echarts各种字体颜色的修改
weixin_35662493的博客
02-01 1077
这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记，希望文章对你有所帮助，主要是自己的在线笔记吧。我在前面先放各种修改前后图片颜色的对照，后面再详细介绍代码。这样更方便阅读及读者知道，是否对自己有所帮助，其重点是如何在模板动态网页或JSP网站中插入Echarts图片。1.修改标题及背景颜色2.设置柱形图颜色3.修改坐标轴字体颜色4.设置Legend颜色5.修改折线颜色6.修改油...
极致呈现系列之：Echarts热力图的神奇光晕
九仞山的专栏
06-24 1294
详细介绍了热力图的特性和应用场景，及Echarts中热力图的使用方法
Pyecharts绘制日历热力图
m0_58152036的博客
06-14 1817
热力图主要通过颜色去表现数值的大小，必须要配合 visualMap 组件使用。 Pyecharts==0.5.11
echarts 热力图颜色渐变
09-14
在 ECharts 中，可以通过自定义渐变色来实现热力图的颜色渐变效果。以下是一个示例代码： ```javascript option = { visualMap: { min: 0, max: 100, calculable: true, orient: 'horizontal', left: 'center', bottom: '10%', inRange: { color: ['#ebedf0', '#ff4500'] // 渐变色范围，可以自定义 } }, series: [{ type: 'heatmap', data: [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]], label: { show: true }, emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 使用刚指定的配置项和数据显示图表。myChart.setOption(option); ``` 在上面的示例中，`visualMap` 配置项定义了最小值为 0，最大值为 100 的渐变色范围，可以根据需求自定义这个范围。`inRange` 属性指定了渐变色的起始颜色和结束颜色，这里使用了浅灰色 `#ebedf0` 和橙红色 `#ff4500`。你可以根据自己的需要修改这些颜色值。 热力图的数据可以通过 `series` 的 `data` 属性传入，每个数据项包含三个值，分别是 x 坐标、y 坐标和值。在上面的示例中，展示了一个简单的热力图，包含了四个数据点。 最后使用 `myChart.setOption(option)` 来将配置项应用到图表中，其中 `myChart` 是 ECharts 实例化后的对象。 你可以根据自己的需求修改上述代码来实现不同的热力图颜色渐变效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值