【问题标题】:Remove tooltip hover effect on 'axis' trigger删除“轴”触发器上的工具提示悬停效果
【发布时间】:2021-05-19 22:57:45
【问题描述】:

我有一个带有浅色区域颜色的堆叠 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/echarts@5.0.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 100%;height:180px;"></div>

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

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

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

【问题讨论】:

    标签: javascript echarts


    【解决方案1】:

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

    【讨论】:

    • 哦,很简单。我总是试图完全消除强调,但没有奏效。在所有系列上使用silent: true 似乎也不起作用。但是使用同等强调和默认颜色可以。非常感谢!
    • 欢迎您,是的,我认为第一个选项是正确的。
    猜你喜欢
    • 1970-01-01
    • 2022-01-06
    • 2021-05-09
    • 1970-01-01
    • 2015-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多