echarts 折线图一半虚线一半实线

最新推荐文章于 2024-07-01 14:19:25 发布

原创

最新推荐文章于 2024-07-01 14:19:25 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端 #vue

本文介绍了如何使用 echarts 在折线图中实现一半虚线一半实线的效果，并解决虚实线平滑过渡及 tooltip 重叠问题。通过处理数据数组，确保虚实线在交界处连续，同时格式化 tooltip 避免显示异常。

echarts 折线图一半虚线一半实线

项目场景

项目场景：根据服务端返回的数据列表字段来判断是否是历史数据，还是未来数据，历史数据展示为实现，未来数据展示为虚线，虚线实线之间平滑过渡。
如图：
虚实之间平滑过渡

步骤描述

服务端返回一条数组，一条折线既要显示实线，又要显示虚线，需要对数组对象处理，将其拆分两条数组。即同一组数据对实线和虚线部分”取反“，不显示的部分使用’-‘代替。

let list = [
  {
   
   
    "cost": 100,
    "month": "1月",
    "type": "history"
  },
  {
   
   
    "cost": 200,
    "month": "2月",
    "type": "history"
  },
  {
   
   
    "cost": 300,
    "month": "3月",
    "type": "history"
  },
  {
   
   
    "cost": 400,
    "month": "4月",
    "type": "future"
  },
  {
   
   
    "cost": 500,
    "month": "5月",
    "type": "future"
  },
  {
   
   
    "cost": 600,
    "month": "6月",
    "type": "future"
  }
]