The default style given by Echarts is a bit naive, so this article notes how to change the tooltip default style so you can check it out if you forget

Default ToolTip style diagram

Modified Tooltip style diagram

The following code

<template>
  <div class="echartsBox" id="main"></div>
</template>

<script>
export default {
  data() {
    return {
      xData: ["The Monkey King"."Pig quit"."The Sand Monk"."Tang's monk"."White Dragon Horse"."White Bone."."Fox."].yData1: [115.198.88.77.99.123.36].yData2: [88.89.77.66.100.145.53].yData3: [18.55.42.63.77.85.58].grid: {
        // Grid line configuration
        show: true.lineStyle: {
          color: ["#e9e9e9"].width: 1.type: "solid",}}}; },mounted() {
    // Make echarts render with mounted call
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      let main = document.getElementById("main"); // Get the DOM element as a container for EachArts
      this.$echarts.init(main).setOption({
        xAxis: [{type: "category"./ / class
            data: this.xData, // The value corresponding to the X-axis category
            splitLine: this.grid, // Add a grid line to the X-axis},].yAxis: {
          type: "value".splitLine: this.grid, // Add a grid line to the Y-axis
          axisLabel: {
            formatter: function (value, index) {
              return value + "Points"; }},},tooltip: {
          trigger: "axis".// If you move the mouse over the column, you will get a prompt. The default is item mode. If you have multiple bar charts, it is not good to stack items together
          triggerOn: "mousemove".Mousemove = mousemove = mousemove = mousemove = mousemove
          /* Formatter can be written as a string template or as a callback function, but the string template is a bit more limited, so we can use the callback function to be flexible */
          formatter: function (params) {
            console.log("-- parameter array for the X-axis category --", params); // For example, when the mouse hover to the sun Wukong students this column, the Params array stored each item of data are the language number outside the three grades of specific information
            var res = // String HTML tags will be rendered into data by echarts. The res is mainly the header section of the upper part of the tooltip
              "
        

         
"

        
 +
              params[0].name +
              " </p></div>";
            for (var i = 0; i < params.length; i++) {
              // Since it is an array, we need to iterate over the data and add it to the data content section of the Tooltip
              res += `<div style="color: #fff; font-size: 14px; padding:0 12px; line-height: 24px"> <span style="display:inline-block; margin-right:5px; border-radius:2px; width:10px; height:10px; background-color:${[
                    params[i].color, //The default is a small dot, so let's change it to a square with rounded corners, using a template string. And get the corresponding color, name, data]};" ></span>${params[i].seriesName}
                  ${params[i].data}< / div > `;
            }
            return res; // This is what we see when we go back out and render it}},legend: {
          // Legend filters the series, so each item in the data is the identity of each item in the series, so it is identified by name
          data: ["Language Performance"."Math score"."English score"],},series: [{name: "Language Performance".data: this.yData1,
            type: "bar".// The type is bar chart
            barWidth: 40.// The width of the bar chart
            label: {
              // Display the values in the specific bar chart
              show: true,},barGap: "0"./* If you want to stack all the data in a series, you just need to add the stack property to each object in the series array. Stack, stack, stack, it doesn't matter what the value of the stack is, but it has to be consistent in terms of the value of the stack, consistent in terms of the stack. * /
            stack: "It doesn't matter what the value is, but keep it consistent."}, {name: "Math score".data: this.yData2,
            type: "bar".// The type is bar chart
            barWidth: 40.// The width of the bar chart
            label: {
              // Display the values in the specific bar chart
              show: true,},/* If you want to stack all the data in a series, you just need to add the stack property to each object in the series array. Stack, stack, stack, it doesn't matter what the value of the stack is, but it has to be consistent in terms of the value of the stack, consistent in terms of the stack. * /
            stack: "It doesn't matter what the value is, but keep it consistent."}, {name: "English score".data: this.yData3,
            type: "bar".// The type is bar chart
            barWidth: 40.// The width of the bar chart
            label: {
              // Display the values in the specific bar chart
              show: true,},/* If you want to stack all the data in a series, you just need to add the stack property to each object in the series array. Stack, stack, stack, it doesn't matter what the value of the stack is, but it has to be consistent in terms of the value of the stack, consistent in terms of the stack. * /
            stack: "It doesn't matter what the value is, but keep it consistent.",}]}); ,}}};</script>

<style lang="less" scoped>
.echartsBox {
  width: 900px;
  height: 500px;
}
</style>
Copy the code

Instead of writing the steps, it’s easier to just read the comments