用echarts绘制分段折线分段背景

最新推荐文章于 2023-07-05 13:43:55 发布
最新推荐文章于 2023-07-05 13:43:55 发布
阅读量644 收藏
点赞数
文章标签： js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/darer49/article/details/110344478
版权 
<html>
    <head>
        <meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
        <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
    </head>
    <body>
        <style>
            html, body, #main {
                width: 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        
        <div id="main"></div>
        <script>
			//用的是15min的x坐标
			var time15 = ['00:00:00', '00:15:00', '00:30:00', '00:45:00', '01:00:00', '01:15:00', '01:30:00', '01:45:00', '02:00:00', '02:15:00', '02:30:00', '02:45:00', '03:00:00', '03:15:00', '03:30:00', '03:45:00', '04:00:00', '04:15:00', '04:30:00', '04:45:00', '05:00:00', '05:15:00', '05:30:00', '05:45:00', '06:00:00', '06:15:00', '06:30:00', '06:45:00', '07:00:00', '07:15:00', '07:30:00', '07:45:00', '08:00:00', '08:15:00', '08:30:00', '08:45:00', '09:00:00', '09:15:00', '09:30:00', '09:45:00', '10:00:00', '10:15:00', '10:30:00', '10:45:00', '11:00:00', '11:15:00', '11:30:00', '11:45:00', '12:00:00', '12:15:00', '12:30:00', '12:45:00', '13:00:00', '13:15:00', '13:30:00', '13:45:00', '14:00:00', '14:15:00', '14:30:00', '14:45:00', '15:00:00', '15:15:00', '15:30:00', '15:45:00', '16:00:00', '16:15:00', '16:30:00', '16:45:00', '17:00:00', '17:15:00', '17:30:00', '17:45:00', '18:00:00', '18:15:00', '18:30:00', '18:45:00', '19:00:00', '19:15:00', '19:30:00', '19:45:00', '20:00:00', '20:15:00', '20:30:00', '20:45:00', '21:00:00', '21:15:00', '21:30:00', '21:45:00', '22:00:00', '22:15:00', '22:30:00', '22:45:00', '23:00:00', '23:15:00', '23:30:00', '23:45:00'];
			var time30 = ['00:00:00', '00:30:00', '01:00:00', '01:30:00', '02:00:00', '02:30:00', '03:00:00', '03:30:00', '04:00:00', '04:30:00', '05:00:00', '05:30:00', '06:00:00', '06:30:00', '07:00:00', '07:30:00', '08:00:00', '08:30:00', '09:00:00', '09:30:00', '10:00:00', '10:30:00', '11:00:00', '11:30:00', '12:00:00', '12:30:00', '13:00:00', '13:30:00', '14:00:00', '14:30:00', '15:00:00', '15:30:00', '16:00:00', '16:30:00', '17:00:00', '17:30:00', '18:00:00', '18:30:00', '19:00:00', '19:30:00', '20:00:00', '20:30:00', '21:00:00', '21:30:00', '22:00:00', '22:30:00', '23:00:00', '23:30:00'];
			var time60 = ['00:00:00', '01:00:00', '02:00:00', '03:00:00', '04:00:00', '05:00:00', '06:00:00', '07:00:00', '08:00:00', '09:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00', '19:00:00', '20:00:00', '21:00:00', '22:00:00', '23:00:00'];
			var ttime = ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'];
			var bigtitle = '站点A的车流量(统计间隔:15min)';
			var yname = '车流量(辆/15min)';
			var thetime = time15;//x坐标的时间
			var maxvalue = 1500;//y的最大值
			
			// 分段数据datas
			var datas = [[276, 238, 212, 230, 162, 149, 131, 140, 126, 88, 96, 82, 79, 70, 75, 72, 61, 76, 88, 83, 99, 131, 160, 231, 353, 468, 707, 948, 987, 1064, 961, 967, 969, 1108, 1092, 1074, 944, 893, 924, 923, 996, 979, 900, 912, 875, 909, 832, 829, 774, 743, 735, 776, 868, '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'] , ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 868, 989, 942, 922, 769, 819, 802, 797, 1170, 1060, 1004, 995, 1039, '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-'] , ['-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', '-', 1039, 998, 1036, 1060, 1077, 1128, 1124, 1078, 1093, 1072, 1024, 842, 815, 768, 684, 735, 733, 661, 737, 653, 634, 629, 663, 490, 555, 485, 425, 365, 327, 320, 292, 246]];
			// 分段时间点
			var div = ['16:00:00','13:00:00','23:45:00'];		
			var lw = 3  //线条的粗细
			var chart = echarts.init(document.getElementById('main'));

			var sampling = 'none';

			chart.setOption({
				title : {
					padding:40,
					text: bigtitle,
					// subtext: '2019年4月1日',
					x: 'center',
					textStyle:{
						fontSize:40
					}
				},
				tooltip : {
					trigger: 'axis',
					formatter: function(params) {
						return params[0].name + '<br/>'
							+ (
								params[0]
								? params[0].seriesName + ' : ' + params[0].value + ' (辆/15min)<br/>'
								: ''
							);
						   
					},
					axisPointer: {
						animation: false
					}
				},
				
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						dataView : {show: true, readOnly: false},
						magicType : {show: true, type: ['line', 'bar']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				textStyle:{fontSize:20},
				grid:{left:'10%',top:'15%'},
				xAxis : [
					{
						type : 'category',
						boundaryGap : false,
						axisLine: {onZero: false},
						axisLabel:{fontSize:15},
						data : thetime
						
					}
				],
				yAxis : [
					{
						name : yname,
						type : 'value',
						axisLabel:{fontSize:20},
						max : maxvalue
					}
				  
				],
				series : [
					{
						name:'流量',
						type:'line',
						notShowSymbol: true,
						// sampling: sampling,
						smooth:true,
						hoverAnimation: false,
						lineStyle:{type:'solid',width:lw},
						markArea: {
							silent: true,
							data: [[{
								// name: 'a',
								xAxis: '00:00'
								// xAxis: 1
							}, {
								// name: 'b',
								xAxis: div[1]
								// xAxis: 5
							}]],
							itemStyle:{color:'rgba(0,255,0,0.2)'}
						},
						data:datas[0]
					},
					{
						name:'流量',
						type:'line',
						notShowSymbol: true,
						// sampling: sampling,
						smooth:true,
						hoverAnimation: false,
						lineStyle:{type:'dashed',width:lw},
						markArea: {
							silent: true,
							data: [[{
								// name: 'a',
								xAxis: div[1]
								// xAxis: 1
							}, {
								// name: 'b',
								xAxis: div[0]
								// xAxis: 5
							}]],
							itemStyle:{color:'rgba(	135,206,250,0.2)'}
						},
						data:datas[1]
					},
					{
						name:'流量',
						type:'line',
						notShowSymbol: true,
						// sampling: sampling,
						smooth:true,
						hoverAnimation: false,
						lineStyle:{type:'dotted',width:lw},
						markArea: {
							silent: true,
							data: [[{
								// name: 'a',
								xAxis: div[0]
								// xAxis: 1
							}, {
								// name: 'b',
								xAxis: div[2]
								// xAxis: 5
							}]],
							itemStyle:{color:'rgba(	0,0,255,0.2)'}
						},
						data:datas[2]
					},
				]
			});
        </script>
    </body>
</html>

 

darer49
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python使用Matplotlib绘制分段函数
12-26
本文实例为大家分享了python使用Matplotlib绘制分段函数的具体代码，供大家参考，具体内容如下 环境 Python3 Mac OS 代码 # coding:utf-8 """ Author: roguesir Date: 2017/8/30 GitHub: ...
echarts中使用区域选择（brush）
weixin_43023873的博客
04-09 1万+
场景 在某些按周月年统计中，我们想看到任意某几天区域的数据总和时使用 效果 代码实现主要点 /*添加*/ brush: { toolbox: ['lineX', 'clear'], xAxisIndex: 0, throttleType: 'debounce',//开启选中延迟后调...
Echarts从入门到画两折线图+面积图+不同区域不同颜色
WLDLSW的博客
07-05 1459
PPT或者EXCEL实现不了平滑曲线图+面积图，试试Echarts
Echarts之折线图背景区域等级划分
qq_43519782的博客
04-12 1131
需求： 鼠标移入： 实现： <template> <div class="grade"> <div id="grade-echart"></div> <div class="legend-list"> <div class="legend-item" v-for="(item, index) in legendList" :key="index"> <span
ECharts实现折线图颜色分段及markline标注
热门推荐
用时间去蜕变
11-09 4万+
一、预期效果1）通过点击生成图像按钮来生成折线图 2）生成折线图之后可以点击调整进行折线图分段 3）可以根据传递的参数的不同生成相应的折线图分段 二、技术要点1、需要根据传参分割原有折线图的数据，用于生成不同的series子元素，便于后面的折线图分段展现。 2、折线图平行于y轴的markline实现并不友好，对于高度最高是在初次创建图标的时候就是写死的，因为目前没有找到任何方法可
echarts折线图和双层柱状图结合绘制
南北极之间
09-14 636
效果： 代码： option = { color:["#7179CB","#4CCEFE"], title: { text:"统计总量", textStyle:{ fontSize:16, padding:"10px" } }, legend: { data: ["总量", "分量"]
echarts实现横条状态图
weixin_41999084的博客
09-10 1952
option = { backgroundColor: '#0e2147', xAxis: { show: false, width:100, }, yAxis: [{ show: true, data: ['当日', '前日'], inverse: true, axis...
echarts分段画折线图
weixin_44347152的博客
07-14 1555
echarts分段画折线图
echarts中折线图分段显示
weixin_42418445的博客
05-17 2747
直接上图看效果 可以看到绿色和黄色的数据是在同一条线上的，实际上他们是两个不同的数据里面的，但是中间有个衔接点。 实现的基本原理 这里的数据是直接提供了时间和对应的点位信息，计划值是独立的，而纠偏和实际是需要是把他们分开，这里直接用split将他们拆成两份，actData和correctData，注意，两者是有一个衔接点的，所以实际的最后一位数据和纠偏的第一个数据要一样才能完全衔接 然后根据时间数组的长度，依次填充"-" this.type.forEach((item,index)=>{
日常开发记录 vue项目 折线图 vue+echarts
jiubai_9000的博客
08-07 434
this.chart.setOption({ tooltip: { trigger: "axis", axisPointer: {//标注 竖线 lineStyle: { color: "rgba(255,122,10,0.5)" } }, formatter: function(params) { //console.log(params); _this.fofRateIt...
echarts 横纵分割线颜色透明度
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-31 7157
【代码】echarts 横纵分割线颜色透明度。
vue+echarts实现动态折线图的方法与注意
10-14
主要给大家介绍了关于vue+echarts实现动态折线图的方法与注意事项，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts多条折线图动态分层的实现方法
01-19
2、echarts多条折线图动态分层 var xData = param.xData; var data = param.yData let option = []; let num =param.num ? param.num : 0; let max = num ? num *100 : 100; //处理精度丢失问题 但不是最佳...
WPF+Webbrowser+Echarts 绘制波形图
07-13
WPF+Webbrowser+Echarts+Naduio音频转换像素点位，像素点位转时间x与y关系点位，实现动态时间波形图，时间精确到毫秒。附原始MP3文件转wav文件，项目可直接运行
echarts上加横线标线_Echarts地图添加引导线效果(labelLine)
weixin_39669769的博客
12-20 2025
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例：如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts...
ECharts的timeline的symbol设置为横线
weixin_34310785的博客
01-17 686
2019独角兽企业重金招聘Python工程师标准>>> ...
Echarts的Y轴添加定值横线的示例
大剑师兰特的GIS世界
02-04 3222
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
echarts上加横线标线_在百度echarts中添加标识线markLine
weixin_39683172的博客
02-01 2049
option ={title : {text:‘某楼盘销售情况‘,subtext:‘纯属虚构‘},tooltip : {trigger:‘axis‘},legend: {data:[‘意向‘,‘预购‘,‘成交‘]},toolbox: {show :true,feature : {mark : {show:true},dataView : {show:true, readOnly: false},m...
echarts折线图按阈值分段设置(颜色，节点图表等)
fjxtgdx的博客
06-20 1071
这里有几个需要注意的点，1.如果不设置seriesIndex的值，会默认覆盖所有series的数据样式。在此之前，我们有进行过对折线节点按值配置(大小、图标、值都可以在对应的回调函数中判断区分)，但线并未设置。我看了下，简单说就是设置类似大小，图案，颜色，亮度等能看到的样式的修改，而能设置的对象里，也包括线。我查看对应的官方配置项，线的颜色只可以简单设置，或者按照固定规则进行渐变色设置，这并不符合需求。有同样需求的朋友可以进行参考，当然，功能还有很多，这里只进行了简单使用。
echarts绘制3d折线图
最新发布
08-12
请注意，为了完整地使用这个示例，你需要确保已正确引入echarts和echarts-gl的相关文件，并在相应的位置放置了3D柱状图的背景图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值