系列中的Echart图标工具提示

Question

So 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. However i am not quite sure how to do that and was hoping some of you might be able to help?

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);