echarts tooltip提示框自定义小圆点(颜色、形状和大小等等)

朱雀 2022-03-20 09:20 1659阅读 0赞

虽然文章是复制过来的，但是文章写得不错，实际的解决了问题

**先附代码:**

![复制代码][copycode.gif]

formatter: function(params) {
    　　var result = ''
    　　params.forEach(function (item) {
    　　　　console.log(item)
    　　　　result += item.axisValue + "</br>" + item.marker + item.data
    　　})
    　　return result
    }

![复制代码][copycode.gif]

**如下图,默认圆点颜色为红色:**

**![1509000-20190104170116859-1371190891.png][]**

**其中item打印出如下图:**

**![1509000-20190104165406510-2107790928.png][]**

发现**marker(小圆点)即为html片段**，要改变小圆点颜色只需**自定义html**即可。

**附代码:**

![复制代码][copycode.gif]

formatter: function(params) {
    　　var result = ''
    　　var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>'
    　　params.forEach(function (item) {
    　　　　result += item.axisValue + "</br>" + dotHtml + item.data
    　　})
    　　return result
    }

![复制代码][copycode.gif]

**效果图:**

**![1509000-20190104165942169-1299595622.png][]**

**同理，要改变小圆点形状，重写html片段即可。**

[copycode.gif]: /images/20220320/0b3626d55e1546238e9464616b1a0e7d.png
[1509000-20190104170116859-1371190891.png]: /images/20220320/914e8913db1840358211161527a81d31.png
[1509000-20190104165406510-2107790928.png]: /images/20220320/28074274516a4b3fad694515fb9f4638.png
[1509000-20190104165942169-1299595622.png]: /images/20220320/85fa8310e81a450fb58d22511bb67d79.png