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

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"
  }
]

将 lis