echarts 实现折线颜色变化及部分功能

 
 
<div class="" id="addpeople">
				  	
  </div>
function skinhum(timearr,countarr) {
		var skinhumchart = echarts.init(document.getElementById('addpeople'));
		//skinhumchart.title = '坐标轴刻度与标签对齐';
		option = {
			title: {
				//text: '堆叠区域图'
			},
			tooltip: {
				show:true,
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985' //实现折线图鼠标移入显示的颜色
					}
				}
			},
			//调整折线图的位置
			grid: {
				top:"20px",
				left: '2%',
				right: '9%',
				bottom: '5%',
				containLabel: true
			},
			xAxis: [{
					type: 'category',
					boundaryGap: false,
//					data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30],
					data:timearr,
					axisLine: {
						symbol: ['none', 'arrow'], //设置x轴或y轴箭头
						lineStyle: {
							color: '#FC95A4',
							width: 2, //这里是为了突出显示加上的
						}
					},
					//刻度是向内还是向外
					axisTick:{
						inside:true,
						length:1,
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'solid',
							color:'#FCFCFC',//网格颜色
						}
					},
					axisLabel:{ //调整x轴的lable 
						//interval:0,  //按x轴的长度显示的刻度的个数    例如:本来显示20个刻度,因为x轴端只显示了10个,
   						rotate:50,  //实现x轴的刻度的标识实现旋转,
			            textStyle:{
			                fontSize:10,// 让字体变大
			                color:"#B5B5B5"
			            }
			       },
			       name: "(日期)",
					nameTextStyle: {
						color: "#B5B5B5",
						verticalAlign: "bottom",
						fontSize:'10',
						padding:[35,50,10,-2] //设置x轴的标题的位置
					}
					//z:33
				},

			],
			yAxis: [{
					type: 'value',
					axisLine: {
						symbol: ['none', 'arrow'],
						lineStyle: {
							color: '#FC95A4',
							width: 2, //这里是为了突出显示加上的
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							type: 'solid',
							color:'#FCFCFC'
						}
					},
						//刻度是向内还是向外
					axisTick:{
						inside:true,
						length:1,
					},
					axisLabel:{ //调整x轴的lable  
			            textStyle:{
			                fontSize:10,// 让字体变大
			                color:"#B5B5B5"
			            }
			       },
			      	 name: "(人数)",
					nameLocation:"end",  //实现标题显示的位置
					nameTextStyle:{
						color: "#B5B5B5",
						fontSize:10,
	//					 verticalAlign: 'top',
	//					align:"left",
						padding:[50,0,-6,0]
					}
					//z:33
				},

			],
			series: [{
				name: '新增会员',
				smooth: true,
//				symbol: 'none',是否显示提示
				type: 'line',
				areaStyle: {
					normal: {}
				},
//				data: [23,50,60,90,10,50,60,70,80,90,60,50,40,80,40,60,80,90,20,80,84,66,51,28,58,30,90,80,34,10],
				data:countarr,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(251,135,151, 1)'  //实现整个折线图的颜色
					}, {
						offset: 1,
						color: 'rgba(251,135,151, 0.1)' //实现折线图颜色的渐变
					}]),
					shadowColor: 'rgba(0, 0, 0, 0.1)',
					shadowBlur: 10
				}
			}
		
			}],
		
        }
		skinhumchart.setOption(option);
};



猜你喜欢

转载自blog.csdn.net/feast_aw/article/details/79567665
今日推荐