Echars 热力图 自定义颜色

最新推荐文章于 2023-06-29 10:41:46 发布
最新推荐文章于 2023-06-29 10:41:46 发布
阅读量3.8k 收藏 6
点赞数 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
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PCL2 GitHub 数据可视化.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
echarts热力图操作集合
happy81997的博客
05-17 1773
echarts热力图操作集合 一、4.X版本 1、修改热力图显示的颜色 visualMap里面添加一个inRange配置项，就可以操控热力区域的渐变颜色了，示例如下： visualMap: { show:true, min: 0, max: 10, calculable: true, orient: 'horizontal', left: 'center', bottom: '15%',
毕业设计：基于垂直搜索引擎的关联关键词数据可视化实现.zip
最新发布
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
大屏演示 echarts 地图 数据 可视化.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
图数据可视化.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
echarts 热力图改变颜色
m0_49004429的博客
03-09 2520
visualMap: { calculable: true, orient: 'vertical', right: '1%',/** 指示器距离画布右侧的间隔 */ top: '5',/** 指示器距离画布顶部的间隔 */ inRange: { color: ['#D9E9F.
Pyecharts热力图——图表颜色控制
qq_45720608的博客
02-10 3708
对pyecharts热力图生成的图标颜色进行控制。
Echarts 热力图自定义开发
虎康的博客
03-07 1137
热力图中的图例信息被默认显示，想要自定义图例内容，但是在 legend 配置中无法对图例进行自定义修改，在研究学习之后，因此，选择对 visualMap 的图例内容进行格式化，判断当前图例是在哪个范围从而return返回自定义指定的图例展示内容，在 formatter 的 function 中，可以拿到两个参数，即下图中的显示的。，在 formatter 的 function 中叫做 value1 和 value2，那么就可以加判断从而让图例展示我们想要的效果。
ECharts热力图指定颜色
quietbxj的博客
09-12 6671
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热力图的神奇光晕
九仞山的专栏
06-24 1060
详细介绍了热力图的特性和应用场景，及Echarts中热力图的使用方法
基于Echarts和outlook数据文件开发的时间管理工具，提供时间数据可视化.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括移动设备上的浏览器）以及部分旧版浏览器（如 IE8/9/10/11）中运行，其底层依赖轻量级矢量图形库 ZRender，确保了图表渲染的高效性和跨平台兼容性。 以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持多种浏览器环境，包括但不限于 Chrome、Firefox、Safari 和 Internet Explorer 系列，保证在不同设备和操作系统上的良好表现。 3. **丰富图表类型**：包括但不限于折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标、漏斗图、仪表盘等，以及三维可视化组件（通过 ECharts GL 扩展）。 4. **交互性强**：图表支持鼠标悬停提示、数据区域缩放、图表联动、图表堆叠、数据过滤、图例开关等多种交互功能，提升用户对数据的探索和理解能力。 5. **个性化定制**：提供详细的配置选项，允许用户自定义图表的颜色、字体、网格线、图例、tooltip、轴标签、数据标签、动画效果等，以满足特定设计需求和品牌风格。 6. **数据更新动态渲染**：能够实时接收新数据并动态更新图表，适用于数据流或实时监控场景。 7. **扩展性**：除了核心库外，有 ECharts GL 用于三维和大规模地理数据可视化，以及周边生态工具（如 ECharts-GL、ZRender）增强其功能和适用范围。 ### 图表类型 ECharts 提供的图表类型涵盖了数据分析和展示的常见需求，包括： - **基础图表**：折线图、柱状图、散点图、饼图、K线图 - **统计图表**：盒形图 - **地理图表**：地图、热力图、线图 - **关系图表**：关系图、treemap、旭日图 - **多维数据可视化**：平行坐标 - **BI图表**：漏斗图、仪表盘 此外，ECharts 支持图表间的混搭，即在一个图表容器内同时展现多种图表类型，以对比或关联不同数据维度。 ### 使用步骤 使用 ECharts 进行数据可视化的一般步骤如下： #### 1. 引入 ECharts 库 在 HTML 文件中通过 `<script>` 标签引入 ECharts 的核心文件： ```html <script src="https://cdn.jsdelivr.net/npm/echarts@版本号/dist/echarts.min.js"></script> ``` 确保替换 `版本号` 为所需的 ECharts 版本。 #### 2. 准备 DOM 容器 在页面上创建一个用于承
echarts-热力图+高亮+轨迹
ingenuou_的博客
06-29 2073
echarts-热力图+高亮+轨迹
pyecharts anaconda_Pyecharts安装使用和绘图案例
weixin_39633090的博客
11-21 1035
一次偶然的机会，接触了pyecharts，发现做图交互效果非常棒，便深究、摸索、入坑。这篇文章主要讲述自己在安装和使用中遇到的问题，解决方法，最后还会有pyecharts中自己比较喜欢的绘图功能。pyecharts是一款将python与echarts结合的强大的数据可视化工具。Echarts 是百度开源的一个数据可视化 JS 库， Echarts可以生成非常棒的可视化交互图，pyecharts的开...
echarts 热力图自定义区间颜色值
yuhuamei的博客
01-05 1584
echarts 热力图自定义区间颜色值
Echarts颜色的设置
qq_42372534的博客
04-23 2176
关于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 中设置图表背景颜色
热门推荐
~~
09-23 2万+
当使用使用'dark'系列主题时，图表为黑色背景色，如果需要将其背景颜色设置为半透明，用类选择器修改样式会发现修改不了。 此时可用以下方式修改 方法一: var option={ backgroundColor:'rgba(128, 128, 128, 0.1)' //rgba设置透明度0.1} 方法二: var option={ backgroundColor:'' //设置无背景色 } ...
基于echarts 数据可视化大屏展示全国热点分布高亮地图特效
qq_365392777
10-23 2197
前言???? 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，...
pyecharts数据标签设置怎么色设置字体大小
weixin_42612804的博客
02-15 1705
使用Pyecharts设置数据标签的颜色和字体大小可以通过调整相应的参数来实现。 要设置数据标签的颜色，可以在相应的图表系列中设置 label_opts 参数的 color 属性。例如： from pyecharts.charts import Bar bar = Bar() bar.add_xaxis(['A', 'B', 'C']) bar.add_yaxis('Series', [1, 2...
echarts热力背景图_ECharts保存背景透明PNG图片
weixin_39653442的博客
12-31 1295
ECharts 前端生成图片后，截图或采用 toolbox 的 saveAsImage 保存的图片存在背景，或为白色背景，下面即为如何保存为背景透明图片的方法。方法一、可以直接在配置项中将backgroundColor设置为rgba(128, 128, 128, 0)var option={backgroundColor: 'rgba(128, 128, 128, 0)', // saveAsIm...
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、付费专栏及课程。

余额充值