echarts 动态更新、图表联动connect、事件、分发事件模拟用户行为dispatchAction、清空图表

动态更新：根据id值动态更新某个图标series: [{type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},{type: 'pie',id: 'pie',}]myChart.setOption({series: {id: 'pie',label: {formatter: '{b}: {@[' + dimension + ']} ({d}%)'},encode: {value: dimension,tooltip: dimension}}});
图表联动:方式一:echarts.init对象.group='x';echarts.init对象2.group='x';echarts.connect('x');方式二:echarts.connect([echarts.init对象1,echarts.init对象2])

事件:包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'等事件1.原生鼠标事件:echarts.init对象.on('click',function(params){params中包含的参数:componentType: string, 当前点击的图形元素所属的组件名称,如'series'、'markLine'、'markPoint'、'timeLine'等。seriesType: string,       系列类型,值可能为'line'、'bar'、'pie' 等,当componentType为'series'时有意义。seriesIndex: number,  系列在传入的option.series中的index,当componentType为'series'时有意义。seriesName: string,        系列名称,当componentType为'series'时有意义。name: string,            数据名,类目名dataIndex: number,       数据在传入的data数组中的indexdata: Object,            传入的原始数据项dataType: string,       sankey、graph等图表同时含有nodeData和edgeData两种data,dataType的值会是'node'或者'edge',表示当前点击在node还是edge上。其他大部分图表中只有一种data,dataType无意义。value: number|Array       传入的数据值color: string         数据图形的颜色,当componentType为'series'时有意义。});2.配置第二个参数限制触发条件(不配置,通过params做条件判断也能)方式一:字符串形式echarts.init对象.on('click','mainType|mainType.subType',fn)如:'series'、'series.line'、'dataZoom'、'xAxis.category'方式二:对象形式echarts.on('mouseover', 配置对象, fn);配置对象{<mainType>Index: number   组件index<mainType>Name: string     组件name<mainType>Id: string    组件idmainType可以是series、xAxis等dataIndex: number       数据项 indexname: string           数据项namedataType: string         数据项type,如关系图中的'node','edge'element: string              自定义系列中的el的name}chart.on('mouseover', {seriesName: 'uuu'}, function () {seriesName为'uuu'的系列中的图形元素被'mouseover'时,此方法被回调。series: [{name: 'uuu'}]});chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {seriesIndex为1的系列中且data的name为'xx'的元素被'mouseover'时,此方法被回调。series: [{...}, {...data: [{name: 'xx', value: 121},{name: 'yy', value: 33}]}]});chart.on('mouseup', {element: 'my_el'}, function () {自定义系列中name为'my_el'的元素被'mouseup'时,此方法被回调。series: {...type: 'custom',renderItem: function (params, api) {return {type: 'group',children: [{type: 'circle',name: 'my_el',...}, {...}]}},data: [[12, 33]]}});3.解绑事件:echarts.init对象.off('事件名称',fn);  解绑单个事件echarts.init对象.off('事件名称');  解绑所有事件4.监听图表空白事件通过zrender事件,zrender事件与echarts事件不同,前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。myChart.getZr().on('click', function (event) {if (!event.target) {    没有target意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。...}});5.Echarts事件:echarts.init对象.on('事件名称',fn);

分发事件模拟用户dispatchAction:(1)模拟点击/浮动高亮:只配置type触发时会全部高亮echarts.init对象.dispatchAction({type: 'highlight',seriesIndex?: number|Array,    可选,系列 index,可以是一个数组指定多个系列seriesName?: string|Array, 可选,系列名称,可以是一个数组指定多个系列dataIndex?: number,    可选,数据的 indexname?: string   可选,数据的名称})(2)取消指定高亮echarts.init对象.dispatchAction({type: 'downplay',seriesIndex?: number|Array,    可选,系列 index,可以是一个数组指定多个系列seriesName?: string|Array, 可选,系列名称,可以是一个数组指定多个系列dataIndex?: number,    可选,数据的 indexname?: string   可选,数据的名称})(3)批量分发myChart.dispatchAction({type: 'dataZoom',batch: [{第一个 dataZoom 组件start: 20,end: 30}, {dataZoomIndex: 1,  第二个dataZoom组件start: 10,end: 20}]})

清空图表:清空当前实例,会移除实例中所有的组件和图表。echarts.init对象.clear();   可以通过setOption重新绘制echarts.init对象.dispose();  不可以通过setOption重新绘制

echarts 动态更新、图表联动connect、事件、分发事件模拟用户行为dispatchAction、清空图表相关推荐

android跨进程事件注入(程序模拟用户输入)
转载请注明出处早想写这篇,一直没空,现在总结下. 需求: 需要在程序内模拟用户输入,比如点击屏幕,或者输入键盘.模拟用户的滑动等.具体的需求,比如测试的时候,测试打开浏览器1000次.或者通过网络发 ...
Tableau参数：同一视图实现指标和图表联动
工作中经常会遇到想用折线图或柱状图等可视化方式直观展示有N个指标的趋势,一方面指标太多,另一方面各指标的量纲不同,如果放在一张图中有点乱,且展示不清晰,如图中的数量和销售额两个指标因量纲差别太大,导致 ...
View事件分发机制（源码 API27）
1.什么是事件分发机制当用户触摸屏幕时,会产生一个touch事件,这个touch事件(motionEvent)传递到某个具体的view处理的整个过程用户触摸屏幕会产生一个事件流(ACTION_DO ...
事件分发机制并不是洪水猛兽
文章目录 OnTouchListener与OnClickListener的优先级事件分发滑动冲突处理滑动冲突 1. 内部拦截法 2.外部拦截法当MotionEvent产生后,系统总归要将其传递 ...
浅谈Android事件分发机制
在Android实际开发过程中经常会遇到View之间的滑动冲突,如ScrollView与Listview.RecyclerView之间的嵌套使用.在很好的解决此类问题之前,我们应深入的了解Androi ...
你需要掌握的事件分发高阶知识
戳蓝字"CSDN云计算"关注我们哦! 系列前作 1. Android输入系统的事件传递流程和IMS的诞生 2. 只了解View的事件分发是不够的,来看下输入系统对事件的处理 1.I ...
【Android 事件分发】MotionEvent.ACTION_DOWN 按下事件分发流程( Activity | ViewGroup | View )
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
View 事件分发规律总结（超详细）
上一篇事件分发-初体验文章中实现了一个能够滑动关闭的 Demo,主要来体验一下事件分发,这篇来对 View 的事件分发做一下规律总结,包括[单一 View],[单一 ViewGroup(不含子 Vi ...
excel图表交互联动_不用excel，如何实现图表联动？
好久不给大家讲产品操作了,今天就给大家写一个,如果你能看到到文末,你还有额外收获~ 年末快要到了,想必各位肯定是在熬夜加班做各种报表.年度总结,我猜你的所有报告都是拿Excel做的吧,我还猜,每年的报 ...

echarts 动态更新、图表联动connect、事件、分发事件模拟用户行为dispatchAction、清空图表

echarts 动态更新、图表联动connect、事件、分发事件模拟用户行为dispatchAction、清空图表相关推荐

最新文章

热门文章