工具提示未在 Vue echarts 上显示

Question

I have a simple line chart built using vue-echarts, it works fine but I want to show a tooltip on each white dot on hover: https://imgur.com/a/2aUPkXf

and for some reason the tooltip does not show when I hover on the dots, despite the fact that I have added it as a property to my configuration. Why and how can I make my tooltip show? Here is my code:

       <div class="chart-wrapper">
          <chart  :options="chartOptionsLine "></chart>
        </div>
</script>

and my js:

<script>
export default {
  name: "BalanceCard",
  props: ["title", "heading"],
  data() {
    return {
      chartOptionsLine: {
        xAxis: {
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: function(value) {
              return value / 1000 + "k";
            }
          }
        },
        series: [
          {
            type: "line",
            data: [
              10000,
              5000,
              1000,
              800,
              7000,
              6000,
              9000,
              7,
              9,
              900,
              120,
              170,
              670,
              7000,
              20
            ]
          }
        ],

        color: ["#76B1C5"]
      },
        tooltip: {
          show: true,
          trigger: 'item',
          },
    };
  }
};

Answer 1

See left margin, you inserted tooltip into zero level, ie out of scope.

Change to below and will work:

 var myChart = echarts.init(document.getElementById('chart')); var option = { xAxis: { data: [ "1", "2", "3", "4", "5", "6", "7", "8", "9", ] }, yAxis: { type: "value", axisLabel: { formatter: function(value) { return value / 1000 + "k"; } } }, series: [{ type: "line", data: [10000, 5000, 1000, 800, 7000, 6000, 9000, 7, 9] }], color: ["#76B1C5"], tooltip: { show: true, trigger: 'item', } }; myChart.setOption(option);

 <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script> <div id="chart" style="width: 600px;height:400px;"></div>