echarts处理数据分时段展示多条数据（不喜勿喷）

最新推荐文章于 2025-09-21 10:18:02 发布

原创

最新推荐文章于 2025-09-21 10:18:02 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #echarts

这篇博客介绍了如何使用Echarts将曲线数据分时段展示，通过创建多个series并处理数据来实现。博主分享了一个实例，展示了如何将不同数量的数据段组合成一个图表，并提供了数据处理方法`seriesForArr`。此外，还涉及到了图例（legend）和tooltip的处理，包括数据格式化和时段判断。博客适合前端开发者学习和参考。

工作当中的需求，就当学习记录一下，一个前端小白。

需求是一条曲线进行分时段展示，每个时段显示数据量不同，可能三条，也可能是10条不等，想让echarts数据分时段展示，就需要多个series来进行数据渲染，例如：我现在这个曲线是分3段展示的，数据格式大概是这种：

series:[

{

......配置参数就省略了

[100,200,300,' ', ' ',' ',' ',' ',' ',' ',' ',' '],
} ，

{

......配置参数就省略了

[' ',' ',' ',' 320 ', ' 349 ',' 234 ',' 556 ',' 123 ',' ',' ',' ',' '],
} ，

{

......配置参数就省略了

[' ',' ',' ',' ', ' ',' ',' ',' ',' 666 ',' 777 ',' 888',' 999 '],
}

总的来说是什么呢，意思就是你想分段显示就需要用数据去拼接来展示，一条曲线可能也可以实现，但是我这里用的是这种方法（不喜勿喷），方法有多种，大家可以自己发挥并实践，基于上面的数据结构最后出来的效果是这种：

下面附上代码及数据处理

//我这里是展示的五个时段的数据
//需要展示的曲线数据 实际项目中，就是后台接口返回数据
var lingsixzxyd = [10,10, 10, 10, 10, 10]  //第一时段
var sixtenzxyd = [10, 10, 10, 10, 10, 10] //第二时段
var tentensixzxyd&nbs