Echarts实现折线图效果

已于 2023-07-07 15:46:03 修改
阅读量157 收藏
点赞数
分类专栏： Echarts效果 文章标签： echarts 前端 javascript
于 2023-07-07 15:28:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44389116/article/details/131597966
版权

在这里插入图片描述

let colorArr = ['#FAD237', '#3469FC', '#9013FE', '#E5579A', '#34D129'];
let gradientArr = ['250,210,55', '52,105,252', '144,19,254', '229,87,154', '52,209,41'];
initLineChart();

// 图表调用并赋值
function initLineChart() {
	let data1 = {
		xAxisData: ['2012', '2013', '2014', '2015', '2016', '2017', '2018'],
		seriesData: [{
			name: '实际用电曲线',
			data: [861, 559, 343, 604, 459, 728, 844]
		}, {
			name: '中长期聚合曲线',
			data: [533, 454, 360, 770, 607, 328, 449]
		}, {
			name: '长期聚合曲线',
			data: [461, 583, 421, 455, 515, 739, 583]
		}]
	};
	basicLineChart1(this.$Echarts.init(document.getElementById('line1')), data1);
	ladderLineChart(this.$Echarts.init(document.getElementById('line2')), data1);
	setLineImgChart(this.$Echarts.init(document.getElementById('line3')), data1);
	basicLineChart2(this.$Echarts.init(document.getElementById('line4')), data1);
}


/**
 * 基础折线图
 * @param 	chart：echart容器
 * 			data： 折线图数据
 */
export function basicLineChart1(chart, chartData) {
	let dataArr = [];
	for(let i = 0; i < chartData.seriesData.length; i++) {
		let obj = chartData.seriesData[i];
		dataArr.push({
			name: obj.name,
			type: 'line',
			symbolSize: 0,
			smooth: true,
			lineStyle: {
				color: 'rgb(' + gradientArr[i] + ')',
				width: 2,
				type: 'solid'
			},
			areaStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0,
						color: 'rgba(' + gradientArr[i] + ',.5)'
					}, {
						offset: 1,
						color: 'rgba(' + gradientArr[i] + ',0)'
					}]
				}
			},
			data: obj.data
		})
	}

	let option = {
		color: colorArr,
		grid: {
			left: 20,
			right: 20,
			bottom: 30,
			top: 50,
			containLabel: true
		},
		legend: {
			icon: 'rect',
			right: 'center',
			top: 0,
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 35,
			textStyle: {
				color: "#fff"
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				lineStyle: {
	                color: {
	                    type: 'linear',
	                    x: 0,
	                    y: 0,
	                    x2: 0,
	                    y2: 1,
	                    colorStops: [{
	                        offset: 0,
	                        color: 'rgba(0, 255, 233,0)'
	                    }, {
	                        offset: 0.5,
	                        color: 'rgba(255, 255, 255,1)',
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0, 255, 233,0)'
	                    }],
	                }
	            }
			}
		},
		xAxis: {
			type: 'category',
			data: chartData.xAxisData,
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(255,255,255,0.1)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		series: dataArr
	};
	chart.setOption(option);
}

/**
 * 基础折线图
 * @param 	chart：echart容器
 * 			data： 折线图数据
 */
export function basicLineChart2(chart, chartData) {
	let dataArr = [];
	for(let i = 0; i < chartData.seriesData.length; i++) {
		let obj = chartData.seriesData[i];
		dataArr.push({
			name: obj.name,
			type: 'line',
			symbol: 'circle',// 实心圆
			symbolSize: 12,
            itemStyle: {
//				color: {
//					type: 'radial',
//					colorStops: [{
//						offset: 0,
//						color: colorArr[i]
//					}, {
//						offset: 0.5,
//						color: colorArr[i]
//					}, {
//						offset: 0.5,
//						color: 'transparent',
//					}, {
//						offset: 1,
//						color: 'transparent',
//					}]
//				},
				borderColor: colorArr[i],
				borderWidth: 1,
			},
			lineStyle: {
				width: 2,
			},
			data: obj.data
		})
	}

	let option = {
		color: colorArr,
		grid: {
			left: 20,
			right: 20,
			bottom: 30,
			top: 50,
			containLabel: true
		},
		legend: {
			right: 'center',
			top: 0,
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 35,
			textStyle: {
				color: "#fff"
			},
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			data: chartData.xAxisData,
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(255,255,255,0.1)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		series: dataArr
	};
	chart.setOption(option);
}

/**
 * 更改拐点图标
 * @param 	chart：echart容器
 * 			data： 折线图数据
 */
export function setLineImgChart(chart, chartData) {
	let dataArr = [];
	for(let i = 0; i < chartData.seriesData.length; i++) {
		let obj = chartData.seriesData[i];
		dataArr.push({
			name: obj.name,
			type: 'line',
			symbolSize: 30,
			symbolOffset: [3, 0],
			symbol: 'image://img/icon.png',
			lineStyle: {
				color: 'rgb(' + gradientArr[i] + ')',
				width: 2,
				type: 'solid'
			},
			data: obj.data
		})
	}

	let option = {
		color: colorArr,
		grid: {
			left: 20,
			right: 20,
			bottom: 30,
			top: 50,
			containLabel: true
		},
		legend: {
			icon: 'rect',
			right: 'center',
			top: 0,
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 35,
			textStyle: {
				color: "#fff"
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
	                color: {
	                    type: 'linear',
	                    x: 0,
	                    y: 0,
	                    x2: 0,
	                    y2: 1,
	                    colorStops: [{
	                        offset: 0,
	                        color: 'rgba(0, 255, 233,0)'
	                    }, {
	                        offset: 0.5,
	                        color: 'rgba(255, 255, 255,1)',
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0, 255, 233,0)'
	                    }],
	                }
	            }
			}
		},
		xAxis: {
			type: 'category',
			data: chartData.xAxisData,
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(255,255,255,0.1)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		series: dataArr
	};
	chart.setOption(option);
}

/**
 * 阶梯图
 * @param 	chart：echart容器
 * 			chartData： 图表数据
 */
export function ladderLineChart(chart, chartData) {
	let seriesData = [];
	for(let i = 0; i < chartData.seriesData.length; i++) {
		let obj = chartData.seriesData[i];
		seriesData.push({
			name: obj.name,
			type: 'line',
            step: "start",
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                color: colorArr[i],
                borderWidth: 3,
                borderColor: "rgba(255,255,255,.3)",
            },
			data: obj.data
		})
	}
	let option = {
		grid: {
			left: 20,
			right: 20,
			bottom: 30,
			top: 50,
			containLabel: true
		},
		legend: {
			icon: 'rect',
			right: 'center',
			top: 0,
			itemWidth: 15,
			itemHeight: 10,
			itemGap: 35,
			textStyle: {
				color: "#fff"
			},
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
	                color: {
	                    type: 'linear',
	                    x: 0,
	                    y: 0,
	                    x2: 0,
	                    y2: 1,
	                    colorStops: [{
	                        offset: 0,
	                        color: 'rgba(0, 255, 233,0)'
	                    }, {
	                        offset: 0.5,
	                        color: 'rgba(255, 255, 255,1)',
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0, 255, 233,0)'
	                    }],
	                }
	            }
			}
		},
		xAxis: {
			type: 'category',
			data: chartData.xAxisData,
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0.2)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		yAxis: {
			type: 'value',
			axisTick: {
				show: false,
			},
			axisLine: {
				show: false,
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: 'rgba(255,255,255,0.1)'
				}
			},
			axisLabel: {
				textStyle: {
					color: 'rgba(255,255,255,.7)'
				}
			}
		},
		series: seriesData
	};
	chart.setOption(option);
}
Shuanger_06
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Echarts折线图拐点突出显示效果
weixin_42555053的博客
03-18 2753
代码如下： //初始化数据录入情况echarts实例 var echarts_dataEntry = echarts.init(document.getElementById('echarts_dataEntry')); option = { title: { // text: '折线图堆叠' }, tooltip: { trigger:
使用laravel和ECharts实现折线图效果的例子
10-16
今天小编就为大家分享一篇使用laravel和ECharts实现折线图效果的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
带时间轴的指标监控柱状图
09-20 1258
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
echarts实现炫酷科技感的流光效果
最新发布
weixin_44727080的博客
04-01 733
echarts实现炫酷科技感的流光效果
手把手教你用ECharts画折线图
大数据
01-07 6616
导读：折线图是一种基础图表，适合表示数据的变化趋势，常用于时间序列数据的表示。作者：王大伟来源：大数据DT（ID：hzdashuju）在正式学习之前，先来了解一个ECharts官网提供的...
Echarts 折线图拐点超过某值突出显示，颜色变红
大剑师兰特的GIS世界
02-13 1812
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
ECharts折线图(Line)点击线突出显示解决方法
Creator
07-15 2881
有个需求需要点击折线使其突出显示，官方文档中的点击事件只有点击拐点时响应，不太好用，最后靠getZr()解决
echarts实现折线图的拖拽效果
10-15
主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
echarts动态折线图，X轴数据量大时，曲线整体左移2022年5月11日
05-11
echarts动态折线图，ts写法 亲测可用，不懂私我
echart--效果花式折线图
gm_ming0501的博客
07-13 861
1/复杂的折线 html <!-- gm花样折线图gm --> <div class="stepBox" id="stepEchart" style="height:500px;"></div> js //工艺流程对比--0708 function echartsData(idName, xData, lendName, allLineData, minStep, maxStep) { var chartrun2 = echarts.init(document.
echarts如何使折线图上显示所有的数据
艺术编程
06-14 4859
使用echarts图表中的折线图时X轴type为category 数据为日期，生成折线图时想要在折线图上显示每个数据，网上查找答案时都是说在series里面加itemStyle : { normal: {label : {show: true}}},然后加了但是显示是显示了没有全部显示，因为X轴是时间分隔显示的（没设置自动的）使用了datazoom组件，折线上只显示7个点的数据（X轴显示7个点横坐标），然后有有的说要加"symbolSize": 5,这个设置，也加了最后我自己查了文档还有各种资料终于搞定。
echarts实时更新动态折线图
11-21
echarts jsp实时更新动态折线图 echart以秒为单位的动态时间轴 每隔2秒就会到数据库中以当前时间查询数据；实时插入数据才会显示折线图,如果不插入数据是不会显示折线图
echarts好看的折线图配置
qq_38948398的博客
11-27 2935
Echarts效果图：(主要仿制layui官网的echarts图形示例) 代码配置，直接放入echarts示例官网，即可查看效果 option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { width: 3, color: '#019688', },
eChart折线图动态特效和隔几秒高亮特效
qq_43217258的博客
06-15 1704
eChart折线图动态特效和隔几秒高亮特效
柱状图（用ECharts绘制）
我的博客
08-15 1330
目录 柱状图常常用于描述分类后的数据 常见效果实现 最大值、最小值 markPoint 平均值 markLine 数值的显示 label 柱的宽度 barWidth 横向柱状图 交换x和y轴的角色 <!DOCTYPE html> <html lan...
使用Echarts绘制折线图，异步加载数据实现动态更新
热门推荐
sinat_41635316的博客
04-28 1万+
文章目录前言一、官方文档二、最终效果展示三、使用本地数据加载折线图1.代码2.执行效果和代码说明3.常用组件的属性介绍1.X轴/Y轴/线（xAxis/xAxis/series）2.其余组件（title/legend/grid）四、异步数据加载折线图（ajax请求）1.前端js代码2.后端代码（python实现，flask框架）总结 前言 因为比赛需要将数据可视化，在前端以折线图的形式展现，而Echart就是一个基于 JavaScript 的开源可视化图表库。成功实现后写一篇博客记录一下过程~~ 一、官方文档
echarts折线图流动特效的实现（非平滑曲线）
苏苏就是小苏苏的博客
08-08 9164
echarts折线图流动特效的实现（非平滑曲线）
ECharts折线图常见效果
sunddy_x的博客
05-01 1479
目录基础平滑最大值、最小值、平均值图表标域区域填充坐标轴留白策略：紧挨边缘缩放：脱离 0 值比例堆叠同期比对、多x轴渐变面积图、拐点描边样式、悬停显示拐点 本文记录一些平时常见的折线图的效果图及代码，需要时方便直接套用。本文只列出echarts的配置项代码，不了解echarts的使用方法可查看官方文档。 基础 效果图： 配置项： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
echarts实现折线图一段一段的
07-29
下面是一个示例代码，演示了如何使用Echarts实现折线图一段一段的效果： ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 定义数据 var data = [ { value...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值