ECharts tooltip悬浮框 自定义文本及图标样式_echarts提示框组件类别前面的图标如何修改

最近在用echarts开发页面可视化数据时，用到了UI提供的echarts 样式，需要自定义tooltip悬浮提示框的样式，最初在网上找了一些例子，都是你抄我的，我抄你的。

问题：如何自定义tooltip提示框中图标和文本样式？

echarts官网可自行查阅：
https://echarts.apache.org/zh/option.html#legend.tooltip

主要时tooltip中的formatter函数
通过console.log(params)我们可以在控制台看到他的内容：

tooltip: {
    trigger: 'axis',
    backgroundColor: '#FFFFFF',
    borderColor: '#EEF1F7',
    borderWidth: 1,
    textStyle: {
      width: 160,
      height: 250,
      lineHeight: 24,
      color: '#666666',
      fontSize: '14',
      fontFamily: 'SourceHanSansCN-Normal'
    },
    formatter: params => {
      // 获取xAxis data中的数据
      let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
      params.forEach(item => {
        dataStr += `<div>
          <div style="margin: 0 8px;">
          // 获取图标(小圆点)颜色，并且自定义样式为正方形，即要改变小圆点，只需重写marker的html片段，并修改样式即可
            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
            // 获取seriersName
            <span>${item.seriesName}</span>
            // 获取series中data
            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
          </div>
        </div>`
      })
      return dataStr
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31