一、Echarts中的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
}) 

5.数据区域缩放组件、视觉映射组件、时间轴组件、工具栏组件相关行为

  1. 数据区域缩放组件,必须引入数据区域缩放组件之后才能使用(dataZoom) 

dispatchAction({
    type: ‘dataZoom‘,
    // 可选,dataZoom 组件的 index,多个 dataZoom 组件时有用,默认为 0
    dataZoomIndex: number,
    // 开始位置的百分比,0 – 100
    start: number,
    // 结束位置的百分比,0 – 100
    end: number,
    // 开始位置的数值
    startValue: number,
    // 结束位置的数值
    endValue: number
}) 

 2.关闭启动toolbox中的dataZoom的刷选状态(takeGlobalCursor)

myChart.dispatchAction({
    type: ‘takeGlobalCursor’,
    key: ‘dataZoomSelect’,
    // 启动关闭
    dataZoomSelectActive: true
}); 

3.视觉映射组件,只能在引入视觉映射组件之后才能使用(visualMap)
选取映射数值范围selectDataRange 

dispatchAction({
    type: ‘selectDataRange’,
    // 可选,visualMap 组件的 index,多个 visualMap 组件时有用,默认为 0
    visualMapIndex: number,
    // 连续型 visualMap 和 离散visualMap 不一样
    // 连续型的是一个表示数值范围的数组。
    // 离散型的是一个对象键值是类目或者分段的索引。值是 `true`, `false`
    selected: Object|Array
}) 

 4.时间轴组件,同理引入之后才能使用
1)设置当前时间点:timelineChange

 dispatchAction({
    type: ‘timelineChange’,
    // 时间点的 index
    currentIndex: number
})

 2)切换时间轴的播放状态timelinePlayChange

dispatchAction({
    type: ‘timelinePlayChange’,
    // 播放状态true自动播放
    playState: boolean
}) 

5.工具栏组件相关行为,同理引入之后才能使用
重置optionrestore 

dispatchAction({
    type: ‘restore
}) 

6.饼图、地图组件、地图图表、关系图、区域选择相关行为
1)饼图

  • 选中指定的饼图扇形(pieSelect)
  • 取消选中指定的饼图扇形(pieUnSelect)
  • 切换指定的选中的饼图扇形状态pieToggleSelect)

 dispatchAction({
    type: ‘pieSelect | pieUnSelect | pieToggleSelect’,
    // 可选,系列 index,可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选,系列名称,可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选,数据名称,在有 dataIndex 的时候忽略
    name?: string
})

2)地图组件

dispatchAction({
    type: ‘geoSelect | geoUnSelect | geoToggleSelect’,
    // 可选,系列 index,可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选,系列名称,可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选,数据名称,在有 dataIndex 的时候忽略
    name?: string
}) 

3)地图图表组件
同地图组件类似,也有三个行为,如下:

dispatchAction({
    type: ‘mapToggleSelect’,
    // 可选,系列 index,可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选,系列名称,可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
    dataIndex?: number,
    // 可选,数据名称,在有 dataIndex 的时候忽略
    name?: string
}) 

 4)关系图
关系图行为使用,也得引入关系图

5)区域选择相关的行为

dispatchAction({
    type: ‘takeGlobalCursor’,
    // 如果想变为“可刷选状态”,必须设置。不设置则会关闭“可刷选状态”。
    key: ‘brush‘,
    brushOption: {
        // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
        brushType: string,
        // 参见 brush 组件的 brushMode。如果不设置,则取 brush 组件的 brushMode 设置。
        brushMode: string
    }
}); 

 

原文地址:https://blog.csdn.net/m0_66722601/article/details/130974136

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8743.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注