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

标签 javascript echarts

我有一个堆叠的 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2346404b4251575063160d130d13" rel="noreferrer noopener nofollow">[email protected]</a>/dist/echarts.min.js"></script>
<div id="chart" style="width: 100%;height:180px;"></div>

将 ECharts 版本更新到当前版本后,将鼠标悬停在轴上现在会淡化区域颜色,因此它们几乎不再可见。

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

如何禁用工具提示悬停效果,以使线条和区域颜色不改变?

最佳答案

使用emphasis覆盖图形的突出显示样式。请参阅 itemStylelineStyleareaStyle

  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
    }
  ...
]

关于javascript - 删除 'axis' 触发器上的工具提示悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67604503/

相关文章:

javascript - 为什么我无法使用 JavaScript 访问 CSS 属性?

javascript - 邮政编码验证

javascript - 在内联 html img 标签中显示带有图像标签的 SVG

javascript - 动态为系列下的数据添加值 - echarts

echarts - Echarts中series-line的markLine如何隐藏label?

javascript - 如何在 Angular echarts中将y轴设置为5

c# - 将图像发送到我的 C# 应用程序

javascript - Mozilla 中未触发 FileReader onloadstart

javascript - echarts: dataZoom slider 不显示正确的数据预览

javascript - echarts中如何将数字转换为货币?