Echars的一些特殊需求

X轴显示起始时间

场景

比如x轴显示时间，当数据量大，有些时间就会不显示，如果想看到更多时间，我们一般会有一下处理

1. 给x轴文字设置倾斜角度，当数据量的时候，文字可能会相互遮盖
2. 给x轴设置滚动，但如果是折线图，就不适合用滚动，无法看清趋势

其实一般 折线图，x轴数据量过大时，其实我们时想看到起始时间的，这样我们就知道了，这个折线图渲染的时间段

实现效果

如何实现

只需在xAxis中加入如下属性

axisLabel是用来设置x轴的刻度以及一些参数的设置。

xAxis:[{
  axisLabel:{
    showMinLabel: true, //显示最小一个节点
    showMaxLabel: true// 显示最大一个节点
  }
}]

鼠标移入时，显示数据的单位

场景

项目中我们Y轴的数值差别很大，比如上万上亿，或者为个数，这时候我们不想改变Y轴的单位，希望鼠标移入上去时，tooltip是以万或亿为单位的数据

实现效果

如何实现

以下是以echars 4.9.0为例子，在tooltip中设置自定义函数，当数据大于一万时，显示单位为万，数据大于一亿时，显示单位为亿，并保留2位小数

参数说明

• params：是一个数组，表示4条折线图
• marker： 表示每一项的图标
• seriesName：表示每一项的名字
• data：表示每一项的数据量
• axisValueLabel：表示每一项的x轴时间

tooltip:{
  trigger: 'axis',
  formatter(params){
    // 折线图有4条，res作为累加结果
    let res = ''
    for(let i=0; i< params.length; i++){
      const series = params[i]
      if(series.data >= 10000){
        res += `${series.marker}${series.seriesName}: ${(series.data/10000).toFixed(2)}万<br/>`
      }else if(series.data >= 100000000){
        res += `${series.marker}${series.seriesName}: ${(series.data/100000000).toFixed(2)}一亿<br/>`
      }else{
        res += `${series.marker}${series.seriesName}: ${series.data}<br/>`
      }
    }
    return `${params[0].axisValueLabel}<br>${res}`
  }
}