Echarts阈值背景的解决

最新推荐文章于 2025-04-29 00:09:41 发布

程序员阿苏

最新推荐文章于 2025-04-29 00:09:41 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： echarts 前端文章标签： map行转列 markArea背景阈值近10天数据

本文链接：https://blog.youkuaiyun.com/reai2011/article/details/84820347

本文探讨了如何优化Echarts图表的数据格式，建议后端直接返回行数据，避免行转列的无用工作。针对echarts阈值过多的问题，提出了使用markArea设置背景阈值的方法，以提升视觉效果。此外，还介绍了如何通过dataZoom属性确保折线图初始显示最近10天的数据，以及dataZoom的两种滑动方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

青年：大师，最近项目中图表需求比较多，我在后台给前端准备数据的时候，前端直接发给我了一个json格式的数据，说按这种方式传数据给他，如图：

[{
  "value1": ["1", "3", "4", "2", "7"],
  "value2": ["1", "3", "4", "2", "7"],
  "date": ["2017-08-02 21:00:00", "2017-08-03 21:00:00", "2017-08-04 21:00:00", "2017-08-05 21:00:00", "2017-08-06 21:00:00"],
  "state": 2,
  "name": "KKZZ",
  "type": 0
 },
 {
  "value1": ["1", "3", "4", "5", "16"],
  "value2": ["1", "3", "4", "5", "16"],
  "date": ["2017-08-02 21:00:00", "2017-08-03 21:00:00", "2017-08-04 21:00:00", "2017-08-05 21:00:00", "2017-08-06 21:00:00"],
  "state": 2,
  "name": "KKZZ",
  "type": 0
 }
]

这种数据格式其实也可以返回给他，可总是感觉怪怪的，不知问题出在哪？

禅师：数据库查询数据是按行返回的，以上json的封装是将行数据转为列数据，这完全是没必要的，echarts图表，通常需要以上的json格式，取到数据直接赋值给echarts属性，确实方便。可是前端这样偷懒，就会让后端做了一些无用而浪费空间的工作，让项目经理知道这事会找你拼命的。

青年：大师的意思是，行转列的数据处理可以扔给给前端处理？

禅师：是的，后端直接返回如下格式的json：

[{
  "data": [
   [1, 1, "2017-08-01 21:00:00"],
   [2, 1, "2017-08-02 21:00:00"],
   [3,

最低0.47元/天解锁文章

200万优质内容无限畅学