echarts 常用的自定义组件

一、自定义tooltip:多条曲线，series中name过长，鼠标悬浮时，文字过长，展示样式需自定义

tooltip: {
  trigger: 'axis',
  formatter: function(params){
    if (!params||params.length==0){ 
      return 
    }
    var result = '<div style="padding-bottom: 5px;">'	+ params[0].axisValue + '</div>'	// 轴数据
    for (var i = 0; i < params.length; i++){
      result += '<div style="line-height: 28px;">'; 
      const seriesName = params[i].seriesName
      const name = seriesName.length > 30 ? seriesName.slice(0, 30) + '...': seriesName
      const hName = '<span style="display: inline-block;">' + name + '</span>'
      const value = '<span style="display: inline-block;margin-left: 10px;float: right; line-height: 28px;">' +       
      params[0].value + '</span>'
      result += params[i].marker + hName + value +'</div>
    }
    return result;
  },
  extraCssText: "max-width: 400px;" // 悬浮组件最大宽度设置，还可以再这里设置文字颜色、换行等样式
  
}

二、自定义legend: 多条曲线，series中name过长,顶部legend展示不下，样式需要自定义

legend:{ 
    top: '1%', 
    right: '2%', 
    icon: "circle", 
    itemWidth: 25, 
    tooltip: {
      show: true  // 鼠标悬浮，显示name全部内容
    },
    formatter: function(name){
      return name.length > 20 ? name.slice(0,20) + '..' : name  // 文字过长，截取展示，不支持返回html字符串
    },
    textstyle:{
      lineHeight:12, 
      rich:{
        a:{	
          verticalAlign:'middle'
          }
      }，
      padding: [0, 0, -3, 0]
    }
  }

注意：除了tooltip的formatter之外，其他formatter都不支持html

三、x轴数据过多，显示重叠，设置间隔或文字倾斜展示

xAxis: [
    {
      axisLable: {
        interval: 1, // 间隔1，默认是0，没有间隔
        rotate: 30 // 倾斜度，也可以为负数
      }
    }
  ]

四、x轴左右滑动、缩放功能

dataZoom: [
    {
      type: 'inside',
      show: true,
      start: 0,
      end: 100
      zoomLock: false,  // 是否只平移不缩放
      zoomOnMouseWheel: true // 鼠标移动时是否出发缩放
    }
  ]

如果不需要缩放功能，则去掉这些内容