网格不同区域不同颜色ECharts Gallery

20:11:45图表已生成
代码
option =  {
			title: {
				text: '统计1',
				left:'45%',
				top:'0%'
			},
			color:['#cfe9e8','#fed0cc','#fce3f1','#f4c9db'],
			animation:false,
			yAxis: {
		        type: 'value',
		        min:36,
				max:38,
				splitNumber:20,
				splitLine:{show: true,
				lineStyle:{
				    color:'black'}
				    
				},//去除网格线
				splitArea : {show : false},//保留网格区域
		        axisLabel: {
		            formatter: '{value}'
		        }
		    },
			xAxis:  {
		        type: 'category',
		        boundaryGap: true,
		        splitNumber:10, 
		        axisTick:{
		            show:true,
		                 //X轴刻度配置
		                 length:3 //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
		            },
		        splitLine:{show: true,lineStyle:{
				    color:'black'}},//去除网格线
				splitArea : {show : false},//保留网格区域
				axisLabel:{  
				    show:true,
		              interval:0
		              
		          } ,
		        data: [
				'01','02','03','04','05','06','07','08','09','10',
				'11','12','13','14','15','16','17','18','19','20',	
				'21','22','23','24','25','26','27','28','29','30'
				]
		    },
			grid: {
				top: '5%',
				bottom: '0%',
				left:'0%',
				right:'1%',
				containLabel: true
			},
			
		    dataZoom: [
		        {
		            type: 'inside',
		            show: false,
		            xAxisIndex: [0],
		            startValue: 0,
		            endValue:15,
		            zoomLock:true,
		            throttle:0,
		            moveonmousemove:'ctrl'
		        }
		    ],
			series:[//就是从这个地方开始的    主要用的是markArea 和legend
				{
					type:'line',
					silent:true,
					markArea: {
					    lable:{
					    position:'top'},
						data: [[{
						name: '月经期',
							xAxis: 0
						}, {
							xAxis: 3
						}]],
						itemStyle: {
		                    color: '#cfe9e8',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '安全期',
							xAxis: 3
						}, {
							xAxis: 5
						}]],
						itemStyle: {
		                    color: '#fed0cc',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵期',
							xAxis: 5
						}, {
							xAxis: 7
						}]],
						itemStyle: {
		                    color: '#fce3f1',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵日',
							xAxis: 7
						}, {
							xAxis: 9
						}]],
						itemStyle: {
		                    color: '#f4c9db',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵期',
							xAxis: 9
						}, {
							xAxis: 11
						}]],
						itemStyle: {
		                    color: '#fce3f1',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '安全期',
							xAxis:11
						}, {
							xAxis: 13
						}]],
						itemStyle: {
		                    color: '#fed0cc',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '月经期',
							xAxis: 13
						}, {
							xAxis: 16
						}]],
						itemStyle: {
		                    color: '#cfe9e8',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '安全期',
							xAxis: 16
						}, {
							xAxis: 18
						}]],
						itemStyle: {
		                    color: '#fed0cc',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵期',
							xAxis: 18
						}, {
							xAxis: 20
						}]],
						itemStyle: {
		                    color: '#fce3f1',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵日',
							xAxis: 20
						}, {
							xAxis: 22
						}]],
						itemStyle: {
		                    color: '#f4c9db',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '排卵期',
							xAxis: 22
						}, {
							xAxis: 24
						}]],
						itemStyle: {
		                    color: '#fce3f1',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '安全期',
							xAxis: 24
						}, {
							xAxis: 26
						}]],
						itemStyle: {
		                    color: '#fed0cc',
		                    opacity:0.9
		                },
					},
				},{
					type:'line',
					silent:true,
					markArea: {
						data: [[{
						name: '月经期',
							xAxis: 26
						}, {
							xAxis: 30
						}]],
						itemStyle: {
		                    color: '#cfe9e8',
		                    opacity:0.9
		                },
					},
				},{
		            name:'体温',
		            type:'line',
		            smooth: false,
		            offset:500,
		            itemStyle: {
		                        normal: {
		                            color: '#ff705d'
		                        }
		                    },
		            data: ['36.7',
		'37.1',
		'37.0',
		'37.0',
		'37.4',
		'37.8',
		'37.2',
		'37.1',
		'37.4',
		'36.6',
		'37.9',
		'37.1',
		'37.1',
		'37.6',
		'37.5',
		'37.1',
		'36.6',
		'36.9',
		'36.9',
		'36.9',
		'36.8',
		'37.3',
		'37.7',
		'37.4',
		'37.7',
		'37.2',
		'37.2',
		'38.6',
		'37.3',
		'36.6',
		'36.8'],
		        }
			], 
		};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
