echarts的dispatchAction

本文详细介绍了如何在ECharts中通过dispatchAction触发各种图表行为,如高亮、取消高亮、图例操作和提示框展示,包括highlight、downplay、legendSelect、legendUnSelect等方法的使用示例。

触发图表行为,通过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

### ECharts 中 `dispatchAction` 方法详解 #### 什么是 `dispatchAction` `dispatchAction` 是 ECharts 提供的一个方法,用于主动触发图表中的交互行为。这使得开发者可以在特定条件下动态改变图表的状态或高亮某些数据项。 #### 如何使用 `dispatchAction` 要调用此功能,需先确保已成功初始化了一个 ECharts 实例对象(通常命名为 `myChart`)。之后便可以通过该实例来执行各种动作命令[^1]: ```javascript // 假设已经有一个名为 myChart 的 echarts 实例 myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 2 }); ``` 上述代码片段展示了如何突出显示第一个系列 (`seriesIndex: 0`) 下第三个数据点 (`dataIndex: 2`) 的效果。 对于更复杂的场景,比如在一个 uni-app 小程序环境中集成 ECharts 并尝试使用 `dispatchAction` 来实现交互逻辑时,则需要注意一些额外事项。由于框架本身的特性,在这种情况下可能需要特别处理事件绑定以及确保上下文环境正确无误[^2]: ```javascript _this.$refs.echartsUni.$curChart.on('click', function (params) { _this.$nextTick(() => { // 确保 DOM 更新完成后再操作 const chartInstance = _this.$refs.echartsUni.$curChart; // 执行 dispatchAction 动作 chartInstance.dispatchAction({ type: 'downplay', seriesIndex: params.seriesIndex, dataIndex: params.dataIndex }); }) }) ``` 这段代码说明了当点击某个数据项后,会立即将其淡化展示出来(`type:'downplay'`)。这里还涉及到 Vue.js 生命周期管理的知识点 `_this.$nextTick()` ,用来保证视图更新完毕后再去修改状态。 综上所述,掌握好 `init`, `setOption` 和 `dispatchAction` 这三个核心 API 对于灵活运用 ECharts 至关重要。同时也要注意不同开发环境下可能存在细微差异,因此建议阅读官方文档并多做实践探索[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值