echarts的dispatchAction

触发图表行为,通过dispatchAction触发。例如图例开关legendToggleSelect, 数据区域缩放dataZoom,显示提示框showTip等等。

官网:echarts

(在 ECharts 中主要通过 on 方法添加事件处理函数。)

events:

ECharts 中的事件分为两种,一种是鼠标事件,在鼠标点击某个图形上会触发,还有一种是调用 dispatchAction 后触发的事件。

action:

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

1.highlight 高亮指定的数据图形

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

3.图例相关的行为,必须引入图例组件之后才能使用

1)legendSelect(选中图例)
dispatchAction({
    type: 'legendSelect',
    // 图例名称
    name: string
})

2)legendUnSelect(取消选中图例

dispatchAction({
    type: 'legendUnSelect',
    // 图例名称
    name: string
})

3)legendToggleSelect(切换图例的选中状态)

dispatchAction({
    type: 'legendToggleSelect',
    // 图例名称
    name: string
})

4)legendScroll(控制图例的滚动),当legend.type是scroll的时候有效

dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})

4. 提示框组件相关行为,必须引入提示框组件之后才能引用

1)showTip(显示提示框)
有两种使用方式
A:指定在相对容器的位置处显示提示框,如果指定的位置无法显示则无效。

dispatchAction({
    type:'showTip',
    //屏幕上的x坐标
    x: number,
    //屏幕上的y坐标
    y: number,
    //本次显示tooltip的位置,只在本次action生效。缺省则使用option中定义的tooltip位置
    position: Array.<number> | String | Function
})

B: 指定数据图形,根据tooltip的配置项进行显示提示框

dispatch({
    type: 'showTip',
    // 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
    seriesIndex?: number,
    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选,数据名称,在有 dataIndex 的时候忽略
    name?: string,
    // 本次显示 tooltip 的位置。只在本次 action 中生效。
    // 缺省则使用 option 中定义的 tooltip 位置。
    position: Array.<number>|string|Function,
})

2)hideTip 隐藏提示框

dispatchAction({
    type:'hideTip'
})

其他相关方法或者属性 可以移步官网。此文借鉴:Echarts 的 dispatchAction

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: echarts dispatchActionecharts中的一个方法,用于触发图表的行为事件。通过调用该方法,可以实现对图表的交互操作,例如点击、hover等。该方法的参数包括行为类型、行为参数等,可以根据具体需求进行设置。使用该方法可以实现图表的动态交互效果,提升用户体验。 ### 回答2: Echarts是一个优秀的可视化图表库,为实现与Echarts图标的交互,Echarts提供了一些API接口。其中,dispatchAction()函数是Echarts提供的一个非常重要的API接口之一。 dispatchAction()函数可以通过JavaScript触发Echarts实例中的图表事件,各个图表类型的事件不一定是相同的,比如饼图就没有hover事件,而散点图就有click、brushSelected、dataZoom等等。通过事件触发函数dispatchAction(),我们可以控制这些事件的触发,来实现图表的各种交互操作,比如: 1. hover:鼠标滑过某个图表元素时,可以通过dispatchAction()来响应该事件,比如触发提示框或者其他自定义提示效果。 2. click:当某个图表元素被点击时,可以通过dispatchAction()函数触发该事件,响应用户点击操作并执行相应的操作。 3. brushSelected:使用brush组件选中某些图表元素后,可以通过dispatchAction()函数,将所选元素的状态传递给其他组件响应。 4. dataZoom:使用dataZoom组件滑动时,可以通过dispatchAction()函数响应该事件,来改变图表的显示范围和数据量,实现数据的快速切换。 总之,EchartsdispatchAction()函数营造了一个良好的图表交互环境,使得用户可以通过各种操作实现图表与数据的快速沟通。这些交互体验的不断改进,为数据分析提供了更为丰富的可视化呈现形式。 ### 回答3: Echarts dispatchAction主要是Echarts的一个方法,用于触发Echarts图表的行为。该方法可以用于在图表上进行交互式操作,例如用户点击图表上的某个元素,就可以使用dispatchAction方法来触发相应的事件。 dispatchAction方法的调用可以实现图表的联动效果。例如,当用户点击地图上的省份区域时,可以触发另一个图表显示该省份的详细数据;当用户选择某个时间段时,可以自动更新图表的数据等等。 Echarts dispatchAction方法可以实现以下三个动作: 1. 触发数据区域的高亮显示:通过dispatchAction方法,可以将某个区域的数据高亮显示,以提供用户更好的可视化体验。 2. 触发数据区域的选中状态:当用户选择某个区域时,可以通过dispatchAction方法改变该区域的选中状态,以供用户处理更多的数据信息。 3. 改变图表的显示状态:可以使用dispatchAction方法实现图表的改变状态,在不同的情况下显示不同的图表,以提供更好的数据呈现效果。 总之,Echarts dispatchAction方法是Echarts库中非常重要的一个方法,可以实现图表的交互效果,并提供更好的数据可视化效果,对于数据发现、决策和交互式分析具有重要的作用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值