删除 'axis' 触发器上的工具提示悬停效果

Question

我有一个堆叠的 EChart 图，带有亮区颜色和一个工具提示触发器设置为 'axis':

var myChart = echarts.init(document.getElementById('chart'));

option = {
  tooltip: { trigger: 'axis', },
  legend: { data: ['A', 'B', 'C'] },
  xAxis: {
    type: 'category',
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8]
  },
  yAxis: { type: 'value' },
  series: [ {
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', },
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ]
    }, {
      name: 'A',
      type: 'line',
      areaStyle: { color: '#ffd' },
      stack: 'C',
      data: [ 2, 1.6, 1.6, 1.6, 1.6, 1.6, 2.4, 2.4, 2.4 ]
    }, {
      name: 'B',
      type: 'line',
      areaStyle: { color: '#dfd' },
      stack: 'C',
      data: [ 2, 1.9, 2.1, 2.3, 2.3, 2.5, 2.1, 2.1, 2.1 ]
    }
  ],
  color: [ '#d34', '#fc1', '#3a4' ],
  grid: { left: 20, bottom: 20, right: 10, top: 40},
};

myChart.setOption(option);

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

更新ECharts版本到当前版本后，鼠标悬停在坐标轴上会淡化区域颜色，几乎看不到了。

我已经尝试了 silence: true 和 emphasis 设置的不同组合并搜索了在线文档，但我无法更改工具提示悬停效果。

如何禁用工具提示悬停效果，使线条和区域颜色不变？

Answer 1

使用emphasis覆盖图形的突出显示样式。请参阅 itemStyle、lineStyle 和 areaStyle

  series: [ {
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', opacity: 1},
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ],
      emphasis : {
        areaStyle: { //--> to avoid the fade effect, set the same color
          color: '#fdd'
        }
      }
    }
]

其他选项是更改 silent: true 以禁用触发和响应鼠标事件：

series: [{
      name: 'C',
      type: 'line',
      areaStyle: { color: '#fdd', opacity: 1},
      stack: 'C',
      data: [ 1.6, 1.6, 1.6, 1.6, 1.6, 1.6, 0.7, 0.8, 0.8 ],
      silent: true //--> here
    }
  ...
]

删除 'axis' 触发器上的工具提示悬停效果

Remove tooltip hover effect on 'axis' trigger

javascript

echarts