记录最近做 echarts 折线图开发中遇到一些问题

需求：

  1.以折线图展示计划工期和实际工期，x轴显示时间，y轴显示工期，鼠标移入圆点显示版本名称

  2.计划工期折线图上的圆点（超出红色显示，接近黄色显示，正常绿色显示）

  

从后端获取到数据大致如下

let list = [
  {id: 1, creatDate:'2022-12-01', planDuration:30, realDuration: 20, version: '1.00' },
  {id: 2, creatDate:'2022-12-01', planDuration:20, realDuration: 25, version: '1.01' },
  {id: 3, creatDate:'2022-12-02', planDuration:30, realDuration: 32, version: '1.02' },
  {id: 4, creatDate:'2022-12-02', planDuration:40, realDuration: 30, version: '1.03' },
  {id: 5, creatDate:'2022-12-03', planDuration:10, realDuration: 15, version: '1.04' },
  {id: 6, creatDate:'2022-12-03', planDuration:20, realDuration: 24, version: '1.05' },
]

 首先处理成echarts 折线图line 需要的数据

let lineData ={
   xData:[],
   yData:[
     { name: '计划工期', data:[] },
     { name: '实际工期', data:[] }
   ]
}

list.forEach((v,i)=>{
   lineData.xData.push(i)
   lineData.yData[0].data.push(v.planDuration)
   lineData.yData[1].data.push(v.realDuration)
})

发现鼠标移入圆点还不完美，没有展示版本名称

此时需要自定义tooltip属性的返回值

tooltip: {
    trigger: 'axis',
    formatter:function(params){        
      let res = '版本名称:'+ list[params[0].axisValue].version;
      for (var i =0;i<params.length;i++){
          let series = params[i];     
          let name = i==0?'计划工期':'实际工期';
          res +="<br/>" + series.marker + name+'：' + series.data;           
      }                
      return res;
    }      
},

 需求1已完成，再看需求2，查找echarts文档后发现有个visualMap属性

那就改造吧 

虽然实现了圆点不同颜色效果， 但是我不想让线段也改变颜色

只能继续看文档发现了一个markPoint属性

尝试改造看看效果

 有戏，可以搞。

先往list里插入color字段，此处颜色区间值返回不同颜色沟通客户活得。

const getColor =(item)=>{
 let rate = item.planDuration/item.realDuration;
 let color = ''
 if(rate>0 && rate<=0.8){
   color= 'yellow'  
 }else if(rate>0.8 && rate<=1){
   color= 'green'
 }else if(rate>1){
   color= 'red'
 }
 return color
}

list.forEach(v=>{
  v.color = getColor(v)
})

在实际开发中可能会遇到圆点上还显示y轴坐标值， 可能是echarts.js的版本问题，最后通过新增一个属性解决

改造完成，达到预期效果。