Echarts 常用API之action行为
时间:2021-10-11
本文章向大家介绍Echarts 常用API之action行为,主要包括Echarts 常用API之action行为使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、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.数据区域缩放组件、视觉映射组件、时间轴组件、工具栏组件相关行为
- 数据区域缩放组件,必须引入数据区域缩放组件之后才能使用(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.工具栏组件相关行为,同理引入之后才能使用
重置option:restore
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)地图组件
- 选中指定的地图区域(geoSelect)
- 取消选中的指定地图区域(geoUnSelect)
- 切换指定的地图区域的选中状态(geoToggleSelect)
dispatchAction({
type: 'geoSelect | geoUnSelect | geoToggleSelect',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
dataIndex?: number,
// 可选,数据名称,在有 dataIndex 的时候忽略
name?: string
})
3)地图图表组件
同地图组件类似,也有三个行为,如下:
- 选中指定的地图区域(mapSelect)
- 取消选中的指定地图区域(mapUnSelect)
- 切换指定的地图区域的选中状态(mapToggleSelect)
dispatchAction({
type: 'mapToggleSelect',
// 可选,系列 index,可以是一个数组指定多个系列
seriesIndex?: number|Array,
// 可选,系列名称,可以是一个数组指定多个系列
seriesName?: string|Array,
// 数据的 index,如果不指定也可以通过 name 属性根据名称指定数据
dataIndex?: number,
// 可选,数据名称,在有 dataIndex 的时候忽略
name?: string
})
4)关系图
关系图行为使用,也得引入关系图
- focusNodeAdjacency 将指定的节点以及其周边相邻的节点高亮
- unFocusNodeAdjacency 将指定的节点以及其周边相邻的节点取消高亮
5)区域选择相关的行为
- brush:触发此action可设置或删除chart中的选框
- takeGlobalCursor:刷选模式的开关。使用此Action可将当前鼠标变为刷选状态
dispatchAction({
type: 'takeGlobalCursor',
// 如果想变为“可刷选状态”,必须设置。不设置则会关闭“可刷选状态”。
key: 'brush',
brushOption: {
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
brushType: string,
// 参见 brush 组件的 brushMode。如果不设置,则取 brush 组件的 brushMode 设置。
brushMode: string
}
});
原文地址:https://www.cnblogs.com/onesea/p/15392044.html
- Nodejs学习笔记(十六)--- Pomelo介绍&入门
- 美团再出幺蛾子,启动美团打车项目,滴滴感到威胁了吗?
- 深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)
- 深入剖析ASP.NET的编译原理之一:动态编译(Dynamical Compilation)
- 域名quco.com近10万元被交易
- Silverlight本地化
- Nodejs学习笔记(五)--- Express安装入门与模版引擎ejs
- Silverlight本地化
- Silverlight 3 创建一个简单的Behavior
- Nodejs学习笔记(六)--- Node.js + Express 构建网站预备知识
- Silverlight 3.0 中的 Local Connection
- 学习Spark——那些让你精疲力尽的坑
- 学习Spark——那些让你精疲力尽的坑
- Silverlight 3.0 中的 WriteableBitmap
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例