Echarts自定义tooltip_echarts tooltip 自定义

一、效果

二、代码 

tooltip: {
  show: true,
  axisPointer: {
    // 十字交叉
    type: 'cross',
    lineStyle: {
      type: 'dashed' // 虚线
    }
  },
  // 自定义
  formatter: p => {
    // 图表中线或柱的name
    const pre = p.name
    const start = '<ul type="none" style="margin:2px 0 15px -40px;">'
    const end = '</ul>'
    const textStart = '<li style="text-align: left;padding-left: 10px;">'
    const textEnd = '</li>'
    const titleStart = '<li style="text-align: left;">'
    const titleEnd = '</li>'
    const dom = titleStart + p.marker + p.seriesName + titleEnd + textStart + '时间：' + p.value.weekTime + textEnd + textStart + '数值：' + p.value.valueData + textEnd
    // p.marker + p.seriesName + ':<br/>    ' + style + '时间：' + p.value.weekTime + '<br/>     ' + style + '数值：' + p.value.value + '<br/>'
    
    // 拼接h5
    return pre + start + dom + end
  },
  // tooltip样式
  extraCssText: 'background: linear-gradient(#3EC1FF, #0F3D74, #0F3D74, #0F3D74, #3EC1FF);color:#FFFFFF'
  // className 仅适用于版本5以上,可用于自定义样式
  className: 'test'
},