【Web前端问题】echarts中tooltip里面小圆点（有图）是怎么做的啦？

Z时代
2024-01-10
分类：技术分享

由于echarts中tooltip默认样式达不到要求,需要为其第一行增加年月日（已经实现），如下图所示，但是最左侧小圆点怎么做啊？请指点，谢谢！

代码：

tooltip: {

            trigger: 'axis',
            formatter: function (tipData) {
               console.log(tipData,455);
                return times(dateTimes)+'&nbsp'+'&nbsp'+tipData[0].name+'</br>'
                    +'排队量 '+':'+'&nbsp'+'&nbsp'+tipData[0].data+'</br>'
                    +'已接入会话量 '+':'+'&nbsp'+'&nbsp'+tipData[1].data+'</br>'
                    +'未接入会话量 '+': '+'&nbsp'+'&nbsp'+tipData[2].data+'</br>'
                    +'会话总量 '+': '+'&nbsp'+'&nbsp'+tipData[3].data
            }
        },

回答：

formatter: function(params) {
                    var result = '';
                    params.forEach(function (item) {
                        result += item.marker + " " + item.seriesName + " : " + item.value +"</br>";
                    });
                    return result;                }

回答：

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

回答：

默认的 formatter 会提供这一效果，如果必须自定义 formatter，可以用 html 元素生成这个圆点。

回答：

tooltip: {

      trigger: 'axis',
       formatter: '{b}<br /><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#c23531"></span>{a0}:{c0}%',     }