ECHARTS：沒有符號的折線圖上的工具提示

Question

我正在嘗試做一些我認為應該非常簡單的事情。 使用標准的簡單折線圖，它會繪制線條和符號，設置工具提示選項意味着每當您將鼠標懸停在符號上時，它將顯示一個帶有線條名稱和符號值的框。 我想顯示相同的工具提示框，只顯示行名，禁用符號。 我使用 symbolSize: 0 或在最新版本 showSymbol: false 中禁用符號，但使用這些設置，似乎無法獲得工具提示來將鼠標懸停在線條本身上。 很明顯，一些事件被拋出作為線懸停的“強調”設置工作，例如可以增加線寬。 非常感謝任何幫助。

Answer 1

要使懸停在線本身起作用，您必須將triggerLineEvent設置為true ：

series: [
  {
    ... // your line serie config
    triggerLineEvent: true,
  },

然后你可以使用 Echart 的鼠標事件來管理鼠標懸停在行：

var tooltipDisplay = ""

// Called when your mouse hover an object (params : the object you hover)
myChart.on('mouseover', function(params) {
  // Check if it's hovering a line
  if(params.componentSubType == "line"){
    // get hovered line series name
    tooltipDisplay = params.seriesName
  }
});

//Called when your mouse leaves an object (params : the object you leave)
myChart.on('mouseout', function(params) {
  tooltipDisplay = ''
});

然后，在工具提示中顯示：

tooltip: [
  {
    ... // your tooltip config
    formatter : (params) => {
      return tooltipDisplay;
    }
  },

完整示例：

 var myChart = echarts.init(document.getElementById('main')); var tooltipDisplay = "" option = { grid: { top: '10px', bottom: '40px', left: '100px', right: '100px', }, tooltip: { trigger: 'axis', formatter : (params) => { return tooltipDisplay; } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Email', type: 'line', data: [120, 132, 101, 134, 90, 230, 210], showSymbol: false, triggerLineEvent: true, }, { name: 'Search Engine', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320], showSymbol: false, triggerLineEvent: true } ] }; myChart.on('mouseover', function(params) { if(params.componentSubType == "line"){ tooltipDisplay = params.seriesName } }); myChart.on('mouseout', function(params) { tooltipDisplay = '' }); myChart .setOption(option)

 <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script> <div id="main" style="width: 450px; height:170px;"></div> </body> </html>

ECHARTS：沒有符號的折線圖上的工具提示

問題描述

1 個解決方案

解決方案1
1 已采納 2022-06-17 07:58:36

完整示例：

ECHARTS：沒有符號的折線圖上的工具提示

問題描述

1 個解決方案

解決方案1 1 已采納 2022-06-17 07:58:36

完整示例：

解決方案1
1 已采納 2022-06-17 07:58:36