Echarts自定义tooltip

一、效果

二、代码 

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