Echarts折线图区域填充及同表切换

最新推荐文章于 2024-08-20 12:00:00 发布
最新推荐文章于 2024-08-20 12:00:00 发布
阅读量3.2k 收藏 5
点赞数 2
文章标签： Echarts折线图 区域填充 同表切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PFchange/article/details/88032453
版权

Echarts折线图区域填充及同表切换

body部分代码

<body>
         //这个部分主要为切换设置
        <div class="button" style="width: 13%; height: 3%; z-index: 500;">
			<ul class="u_tab">
				<li id="nav1_1" onclick="show('nav1',1,5);" style="cursor: pointer;">近7日</li>
				<li id="nav1_2" onclick="show('nav1',2,5);" style="cursor: pointer;"
					class="current">近12月</li>
			</ul>
		</div>
		<script type="text/javascript">
			function show(obj, num, len) {
				try {
					for (var id = 1; id <= len; id++) {
						var setid = obj + id;
						var setnavid = obj + "_" + id;
						if (id == num) {
							document.getElementById(setnavid).className = "current";
							document.getElementById(setid).style.display = "block";
						} else {
							document.getElementById(setnavid).className = "";
							document.getElementById(setid).style.display = "none";
						}
					}
				} catch (e) {
				}
			}
		</script>
		<div id="line2" class="list2"></div>
		<!-- 近7天 -->
		<ul id="nav11" style="display: none;">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td>
							<div id="line2" class="list2"></div>
						</td>
					</tr>

				</tbody>
			</table>
		</ul>
		<!-- 近12月 -->
		<ul id="nav12" style="display: block;">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td>
							<div id="line1" class="list1"></div>

						</td>
					</tr>

				</tbody>
			</table>
		</ul>
		<!-- 近12月 -->
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById("line1"));
			//指定图标的配置和区域
			var option = {
				backgroundColor : '#042b53',
				//标题
				title : {
					text : "折线区域填充",
					padding : [ 5, 10, 5, 20 ],//上右下左
					textStyle : {
						color : '#fff',
						fontWeight : 'normal',
						fontSize : 35
					}
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'cross',
						label : {
							backgroundColor : '#6a7985'
						}
					}
				},
				//color : [ '#fff', '#fff', '#fff', '#fff' ],//在这配置自己想要的颜色
				//图例
				legend : {
					data : [ '邮件营销','联盟广告','视频广告','直接访问' ],
					x : 'center',
					bottom : '1%',
					textStyle : {//图例文字的样式
						color : '#fff',
						fontSize : 15
					}
				},
				grid : {
					top : '18%',
					left : '2%',
					right : '2%',
					bottom : '8%',
					borderWidth : '0',
					show : true,
					containLabel : true
				},
				//x轴数据
				xAxis : [ {
					data : ['2018/1','2018/2','2018/3','2018/4','2018/5','2018/6','2018/7','2018/8','2018/9','2018/10','2018/11','2018/12'],
					axisLine : {
						show : false
					},
					axisTick : {
						show : false
					},
					axisLabel : {
						textStyle : {
							color : '#fff',
							fontSize : 13
						}
					}
				} ],
				yAxis : {
					axisLine : {
						show : false
					},
					axisTick : {
						show : false
					},
					axisLabel : {
						textStyle : {
							color : '#fff',
							fontSize : 13
						}
					}
				},
				//这个部分主要为折线图区域填充
				series : [ {
					name : '邮件营销',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2//设置透明度
						}
					},
					data : [ 2,3,5,6,1,0,7,8,3,5,4,3]
				}, {
					name : '联盟广告',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 8,6,4,7,2,8,9,6,1,3,4,5]
				}, {
					name : '视频广告',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 5,6,2,1,4,3,5,8,4,2,6,5]
				}, {
					name : '直接访问',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 8,0,5,6,4,3,5,4,7,6,2,1]
				} ]
			};
			//渲染图表
			myChart.setOption(option);
		</script>
		<!-- 近7天 -->
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById("line2"));
			//指定图标的配置和区域
			var option = {
				backgroundColor : '#042b53',
				//标题
				title : {
					text : "折线区域填充",
					padding : [ 5, 10, 5, 20 ],
					textStyle : {
						color : '#fff',
						fontWeight : 'normal',
						fontSize : 35
					}
				},
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'cross',
						label : {
							backgroundColor : '#6a7985'
						}
					}
				},
				//color : [ '#fff', '#fff', '#fff', '#fff' ],//在这配置自己想要的颜色
				//图例
				legend : {
					data : [ '邮件营销','联盟广告','视频广告','直接访问' ],
					x : 'center',
					bottom : '1%',
					textStyle : {//图例文字的样式
						color : '#fff',
						fontSize : 15
					}
				},
				grid : {
					top : '18%',
					left : '2%',
					right : '2%',
					bottom : '8%',
					borderWidth : '0',
					show : true,
					containLabel : true
				},
				//x轴数据
				xAxis : [ {
					data : ['2019/2/1','2019/2/2','2019/2/3','2019/2/4','2019/2/5','2019/2/6','2019/2/7'],
					axisLine : {
						show : false
					},
					axisTick : {
						show : false
					},
					axisLabel : {
						textStyle : {
							color : '#fff',
							fontSize : 13
						}
					}
				} ],
				yAxis : {
					axisLine : {
						show : false
					},
					axisTick : {
						show : false
					},
					axisLabel : {
						textStyle : {
							color : '#fff',
							fontSize : 13
						}
					}
				},
				series : [ {
					name : '邮件营销',
					type : 'line',
					areaStyle: { //区域填充样式
			            normal: {
			               opacity : 0.2	                    
			            }
			        },
					data : [ 5,6,2,1,4,3,5]
				}, {
					name : '联盟广告',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 8,6,4,7,2,8,9]
				}, {
					name : '视频广告',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 8,0,5,6,4,3,5]
				}, {
					name : '直接访问',
					type : 'line',
					areaStyle : {
						normal : {
							opacity : 0.2
						}
					},
					data : [ 2,3,5,6,1,0,7]
				} ]
			};
			//渲染图表
			myChart.setOption(option);
		</script>

</body>

效果如下

在这里插入图片描述
在这里插入图片描述
新手请多多指教，仅作参考，欢迎评论。

PFchange
关注
Echarts 展示——给折线图区域填充颜色
虎康的博客
03-28 811
【代码】Echarts 给折线图区域填充颜色。
【爱编程】Echarts折线图区域填充效果
weixin_44711285的博客
04-02 928
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/echarts.js"> </script> </head> <body> &l...
echarts折线图 - 区域图 -如何设置填充色
毒王的博客
09-30 6211
option = { xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 13.
echarts 实现区域划分 折线图
晨曦月的博客
11-26 4121
先给出图表样式 这张图看上去是个普通的折线图，但是仔细看又有一些不同，首先它是有区域划分的，不同区域，对应的线条颜色不一样，其次y轴是自定义的，还有各种标记等，总之是有很多构思在里面。 echarts图例当中找了很多相似的折线图，但是都不能满足需求，于是动手自己绘制。 废话不多说，直接上代码，小伙伴们可以参考下： let dom = document.getElementById("ichart"); dom.style.width = window.innerWidth / 4 + "px";
echarts 折线图_数据分区_左右滑动_可拖拽_常用图表配置_数据可视化
最新发布
aibujin的博客
08-20 881
echarts 项目可视化、echarts 折线图数据分区、echnarts 横向柱状图滚动、echatrs 折线图自动滑动、echarts 数据量大，自定滚动，加载数据、echarts 阶梯瀑布图、echarts 阶梯折线图、 ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts 关系图、echarts 知识图谱、ecahrts 地图、ecahrts 地图 josn 文件、地图json免费下载、echarts k线图、echarts环形图
ECharts关于不同区间 区域填充实现
weixin_43976602的博客
06-29 2764
ECharts关于不同区间 区域填充实现 实现的是分区域填充不同颜色的折线图，比如说 “0-50”区间显示绿色，“50以上为红色””。废话不多说，先上图： 当然了，也可以设置多区间显示， “0-50”区间显示绿色，“50-100”显示黄色，“100-200”显示为橘色，“200”以上显示红色。 主体说明 选用百度echarts模板 ，再此基础上做增加 利用的是echarts中视觉映射（visualMap）功能 lt（小于），gt（大于），lte（小于等于），gte（大于等于） visualMap: {
前端折线图中背景_echart实现分区域填充不同颜色的折线图
weixin_39710396的博客
12-21 1713
闲来无事，帮朋友做了一个echart图表的效果，实现的是分区域填充不同颜色的折线图，就是数据中，0标线以上的是红色，0标线以下的是黄色。先上图：再上代码：function(ec) {// 基于准备好的dom，初始化echarts图表var myChart = ec.init(document.getElementById('demo'));var shuzu = [-1, 0, 5, 8, 4, ...
【前端】echarts 建立区域渐变折线图
weixin_44746306的博客
05-18 582
echarts 建立渐变表 1. 示例代码及注释 import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { tooltip: { // 鼠标聚焦 trigger: 'axis', axisPointer: { type: 'cross',
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
接着，"Echarts折线图"部分则涵盖了如何使用Echarts库创建动态、交互式的折线图。Echarts提供了一系列参数供开发者配置，如`series`定义数据序列，`xAxis`和`yAxis`定义坐标轴，`tooltip`定义提示框等。通过灵活调整...
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
echarts 图表 折线图
07-21
echarts 图表 折线图
echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色
05-04
echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false, dimension: 1, pieces: [], //pieces的值由动态数据决定 outOfRange: { color: 'black' } //上面是按官方文档固定格式，主要是配置样式布局，实际的x轴和y轴数据可以通过ajax在后台取得 //x轴数据 var datax = ['1月', '2月', '3月', '4月', '5月','6月', '7月', '8月', '9月','10月']; //模拟动态数据 option.xAxis.data = datax; //y轴数据 var datay = [160, 280, 350, 500, 200, 250, 800, 600, 550, 200]; option.series[0].data = datay; //400以上,900以下显示成金色(gold) option.visualMap.pieces[0] = {gte: 400, lte: 900, color: 'gold'};
Echarts动态加载多条折线图的实现代码
10-16
主要介绍了Echarts动态加载多条折线图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
echarts多条折线图动态分层的实现方法
10-16
主要介绍了echarts多条折线图动态分层的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts自定义折线图-堆叠区域图
Bonjours的专栏
12-24 2641
效果如下： 这里使用了官方文档中的堆叠区域图来改造的。有几个注意的地方： series下的【stack: '总量' 】要去掉，否则y轴数值就会相加，与正确数值不符 改变折线区域的线条颜色和区域渐变色 指针不想是十字指示，可将tooltip下的axisPointer的type: 'cross'改为'line' 如果不想折线那么尖锐，可以在series里加上smooth: true变为柔...
echarts 折线图阴影填充
qq_43553472的博客
09-12 4716
//折线图填充渐变阴影 areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: “red” }, { offset: 0.5, color: “pink” }, { offset: 1, color: “black” } ]) } }, //填充区域样式 ...
MPAndroidChart折线图一
hailin123123的博客
10-09 1090
背景： MPAndroidChart折线图，是由于项目中要用到，所以这次把在做的过程中，所用到的api(网上很多，所以这里不是重点)，以及遇到的问题和怎样解决问题写了这篇文章。如果过程中有问题，希望大家及时的提出来，一起共同进步。一、直接上需求效果图 随着移动x轴坐标，对应的时间点和扫码次数都发生改变二、功能的实现（基本API的介绍） 1、设置图表数据 public void
echarts多条折线图
qq_38822390的博客
05-29 1695
参考链接：echarts官网：http://echarts.baidu.com/ 原型图（效果图）： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &...
Echarts多条折线图ajax
前端视听
03-21 1244
先看效果图，效果图如下。 html <div class="row" > <div id="main"></div> </div> js // ajax加载数据 $.ajax({ url : ROOT + "/index/count", async : false, type : 'GET', ...
ECharts折线图区域高亮功能与代码解析
资源摘要信息:"ECharts折线图-折线图区域高亮.rar" ECharts是一个使用JavaScript编写的开源可视化库，用于展示数据的图形表示。它具有丰富的图表类型，易于使用的API，以及灵活的配置项。在这个特定的资源中，我们...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值