工具提示未在 Vue echarts 上顯示

Question

我有一個使用 vue-echarts 構建的簡單折線圖，它工作正常，但我想在 hover 上的每個白點上顯示一個工具提示： https://imgur.com/a/2aUPkXf

並且由於某種原因，當我在點上使用 hover 時，工具提示沒有顯示，盡管我已將其作為屬性添加到我的配置中。 為什么以及如何使我的工具提示顯示？ 這是我的代碼：

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

和我的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

見左邊距，您將工具提示插入零級，即在 scope 之外。

更改為以下內容即可：

 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>