echarts折线图折线平滑以及实现填充背景色渐变

让我们先来看一下echarts提供的文档

https://echarts.baidu.com/echarts2/doc/doc.html

关于折线平滑显示

echarts折线图折线平滑以及实现填充背景色渐变_第1张图片

关于填充背景,背景色渐变实现

echarts折线图折线平滑以及实现填充背景色渐变_第2张图片

贴一下series代码和解释

series : [ {
				name : '情报量',
				type : 'line',
				stack : '总量',
				smooth:true,    //曲线平滑
				itemStyle : {
					normal : {
						areaStyle : {
							type : 'default',
                            //渐变色实现
						color : new echarts.graphic.LinearGradient(0, 0, 0, 1,//变化度
                                //三种由深及浅的颜色
									[ {
										offset : 0,
										color : '#3ebf9b'
									}, {
										offset : 0.5,
										color : '#267268'
									}, {
										offset : 1,
										color : '#14323f'
									} ]),
						},
						lineStyle : {  //线的颜色
							color : '#349e85'
						},
                        //以及在折线图每个日期点顶端显示数字
						label: {      
					          show: true,
					          position: 'top',
					          textStyle: {
					            color: 'white'
					      }
					   }
					},
				},
				areaStyle : {},
				data : xxx
			} ]

效果如图

echarts折线图折线平滑以及实现填充背景色渐变_第3张图片

有问题欢迎留言!

你可能感兴趣的:(#,echarts)