Echart icon in series tooltip

Question

I have the following configuration:

  const frequencyChartoption = {
            title: {},
            tooltip: {},
            legend: {
                data: ['Frekvens', 'Vigtighed']
            },
            xAxis: {
                type: 'category',
                data: ['marker_01', 'marker_02'],
                axisLabel: {
                    formatter: function (value) {
                        return '{' + value + '| }\n{value|}';
                    },
                    margin: 20,
                    rich: {
                        value: {
                            lineHeight: 30,
                            align: 'center'
                        },
                        marker_01: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: icons.marker_01
                            }
                        },
                        marker_02: {
                            height: 20,
                            align: 'center',
                            backgroundColor: {
                                image: icons.maker_02
                            }
                        },

                    }

                }
            },
            yAxis: {},
            series: [{
                name: 'Frekvens',
                type: 'bar',
                data: frequencyChartFrequencyScore,
                tooltip: icons.marker_01,
                itemStyle: {
                    normal: {
                        color: colors[0],
                        label: {
                            interval: 5,
                            show: true,
                            position: 'top',
                            formatter: '\n{c}'
                        }
                    }
                }
            },
                {
                    name: 'Vigtighed',
                    type: 'bar',
                    data: frequencyChartImportance,
                    itemStyle: {
                        normal: {
                            color: colors[1],
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '\n{c}'
                            }
                        }
                    }
                }
            ]
        };

Now as you can see I am using two images as my xAxis

Now I wish to make these show up on my tooltip when I hover over the chart. How can I do that?

Answer 1

Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).

series: [{
    name: 'Frekvens',
    type: 'bar',
    data: frequencyChartFrequencyScore,
    tooltip: {
        show: true,
        trigger: 'axis',
        formatter: (params) => {
            // see tooltip.formatter for details
            // you want to focus on the 'marker' property
            return params[0].name;
        }
    }
}]

With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).

var myChart = echarts.init(document.getElementById("main"));

// specify chart configuration item and data
var option = {
  title: {
    text: "ECharts entry example"
  },
  tooltip: {
    show: true,
    trigger: "axis",
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    formatter: (params) => {
      // create new marker
      var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
      var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
      console.log("params", params, params[0].name);
      return `${icon0} ${params[0].name}
              ${icon1} ${params[0].value}`;
    },
    textStyle: {
      fontWeight: 'bold',
      fontSize: 18
    }
  },
  legend: {
    data: ["Sales"]
  },
  xAxis: {
    data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
  },
  yAxis: {},
  series: [
    {
      name: "Sales",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

// use configuration item and data specified to show chart
myChart.setOption(option);