删除“轴”触发器上的工具提示悬停效果

Question

我有一个堆叠的 EChart 图表，其浅色区域颜色和工具提示触发器设置为“轴”：

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/[email protected]/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
    }
  ...
]

Answer 2

要完全禁用强调状态，请使用 emphasis.disabled 选项：

options = {
  ...
  emphasis: {
    disabled: true,
  },
}