Echarts3 (baidu) colored round in tooltip

• One way to solve this problem is to return custom HTML in your tooltip formatter:

  var formatTooltipLine = function(color) {
      return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:" + color + ";margin-right:5px;'></span><span>line text</span>";
  }
  
  var formatter = function() {
      // custom title
      var lines = ["<b>2016</b>"];
  
      // custom lines
      ["red", "orange"].forEach(function(color) {
          lines.push(formatTooltipLine(color));
      });
  
      return lines.join("<br>");
  }
  

• Another approach is to use ECharts' user-defined tooltip feature:

  tooltip : {
      trigger: 'axis',
      axisPointer: {
          animation: true
      },
      formatter: function (params) {
          var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
          let rez = '<p>' + params[0].axisValue + '</p>';
          //console.log(params); //quite useful for debug
          params.forEach(item => {
              //console.log(item); //quite useful for debug
              var xx = '<p>' + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>'
              rez += xx;
          });
  
          return rez;
      }
  },
  

• ECharts already sends the marker html in params of each series with specific color. Here's an example for a line chart:

  {
       formatter : (args) => {
         let tooltip = `<p>${args[0].axisValue}</p> `;
  
         args.forEach(({ marker, seriesName, value }) => {
               value = value || [0, 0];
               tooltip += `<p>${marker} ${seriesName} — ${value[1]}</p>`;
         });
  
         return tooltip;
       }
     }