首页 前端知识 echarts- 渐变折线图

echarts- 渐变折线图

2024-10-30 21:10:42 前端知识 前端哥 688 573 我要收藏

效果图:

需求点:

1. x轴是时间

2. 折线区域是渐变色

3. 显示折线小圆点

option: {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							color: '#57617B'
						}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						axisLine: {
							lineStyle: '#d8d8d8'
						},
						axisLabel: {
							textStyle: '#cccccc'
						},
						splitLine: {
							show: true,
							lineStyle: '#d8d8d8' // x轴内容线颜色(横线)
						},
						data: ['07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30']
					}
				],
				yAxis: [
					{
						type: 'value',
						name: '人数',
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: '#d8d8d8' // Y轴坐标颜色
						},
						axisLabel: {
							margin: 10,
							textStyle: '#cccccc'
						},
						splitLine: {
							//网格线
							lineStyle: {
								color: '#d8d8d8' // Y轴内容线颜色(横线)
							}
						},
						nameTextStyle: { color: '#ffffff', fontSize: 16, padding: [0, 50, 0, 0] }
					}
				],
				series: [
					{
						name: '时间',
						type: 'line',
						symbolSize: 8,
						label: {
							show: true, //开启显示
							textStyle: {
								color: '#fff'
							}
						},
						lineStyle: {
							normal: {
								color: 'rgba(34, 251, 183, 1)', // 折线颜色
								width: 2,
								shadowColor: 'rgba(34,150,243, 0.3)' // 折线阴影颜色
							}
						},
						itemStyle: {
							normal: {
								color: 'rgba(34, 251, 183, 1)' // 折线小圆点颜色
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: 'rgba(13, 253, 178, 1)' // 折线底下区域渐变色
										},
										{
											offset: 0.8,
											color: 'rgba(5, 80, 57, 1)' // 折线底下区域渐变色
										}
									],
									false
								)
							}
						},
						data: [0, 200, 167, 142, 85, 121, 186, 243, 162, 137, 0, 0]
					}
				]
			}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19685.html
标签
评论
发布的文章

JSON:API Normalizer 项目教程

2024-10-30 21:10:43

json2html 项目教程

2024-10-30 21:10:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!