举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > echarts取消hover效果 指定与取消ECharts数据形高亮

echarts取消hover效果 指定与取消ECharts数据形高亮

2023-03-24 08:18 ECharts教程

echarts取消hover效果 指定与取消ECharts数据形高亮

echarts取消hover效果

echarts是一款功能强大的可视化图表库,它可以帮助我们快速创建出精美的图表。在echarts中,当鼠标悬停在图表上时,会出现一个hover效果,这个效果可以帮助用户快速了解图表中的信息。但是有时候,我们不想要这个hover效果,那么如何取消echarts中的hover效果呢?

其实取消echarts中的hover效果很简单,我们只需要在初始化echarts时设置一些相关的参数即可。例如:

var myChart = echarts.init(document.getElementById('main'));  // 初始化echarts实例
option = {  // 这里写你的图表配置项
    tooltip: {  // 这里设置tooltip为false即可取消hover效果
        show: false,  
    } 
}; 
myChart.setOption(option);  // 这里将配置项赋值给echarts实例  

上述代码中,我们将tooltip设置为false即可实现去除hover效果。当然,如果你想要保留部分hover效果也是可以的。例如你想要去除tooltip显示文字而保留其他hover效果时:

  option = {   // 这里写你的图表配置项  
    tooltip: {   // 这里让tooltip显示文字为false即可去除文字而保留其他hover效果  
        showContent: false,  
    }   }; 

总之,通过上述方法就能够很轻松地去除echarts中的hover效果了。当然也有其他方法来实现这一目标,大家根据自己的情况来选用吧~

指定与取消ECharts数据图形高亮

ECharts 中支持的图表行为,通过 dispatchAction 触发。

注: 代码中的 ?: 表示该属性是可选的。EVENT: 是 action 对应触发的事件。

action.highlight  |  Action


高亮指定的数据图形。

通过 seriesName 或者 seriesIndex 指定系列。如果要再指定某个数据可以再指定 dataIndex 或者 name。

dispatchAction({
type: 'highlight',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选,数据的 index
dataIndex?: number,
// 可选,数据的 名称
name?: string
})

action.downplay   |  Action


取消高亮指定的数据图形。

通过 seriesName 或者 seriesIndex 指定系列。如果要指定某个数据可以再指定 dataIndex 或者 name。

dispatchAction({
type: 'downplay',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 可选,数据的 index
dataIndex?: number,
// 可选,数据的 名称
name?: string
})


阅读全文
以上是编程学为你收集整理的echarts取消hover效果 指定与取消ECharts数据形高亮全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部