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 中支持的图表行为,通过 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
})
events.datazoom | EventACTION:dataZoom数据区域缩放后的事件。{type: 'datazoom',// 缩放的开始位置的百分比,0 - 100...
xAxis.axisPointer.value |number[ default: null ]获取 xAxis 坐标轴指示器当前的 value。在使用axisPointer.handle时,可以设...
在 ECharts 中直角坐标系的 y 轴有可能是不显示的,如果我们要配置 yAxis 的属性,首先就需要将 y 轴显示出来。那么,就存在以下...
本节我们列举了 ECharts 中 y 轴的一些有关于轴线的属性设置,这些属性控制了坐标轴轴线的显示、坐标轴0刻度的显示、并提及了坐...
很多人在用 ECharts 时会发现图表真正的绘图区域和图表容器之间有很大一块间隔,看上去有些很不饱满。怎么办?本节将讨论如何让 ...