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

旧城等待， 2021-07-24 19:44 2360阅读 0赞

图表联动:
    	方式一:
    		echarts.init对象.group='x';
    		echarts.init对象2.group='x';
    		echarts.connect('x');
    		
    	方式二:
    		echarts.connect([echarts.init对象1,echarts.init对象2])

![在这里插入图片描述][2020101820290873.png_pic_center]

事件:
    	原生鼠标事件:
    		echarts.init对象.on('click',fn);
    		
    		echarts.init对象.on('click','响应的组件属性',fn)
    			.on('click', 'xAxis.category', function () {...});
    			
    		echarts.on('mouseover', {seriesName: 'uuu'}, fn);
    			  配置对象
    			  {
    			      <mainType>Index: number // 组件 index
    			      <mainType>Name: string // 组件 name
    			      <mainType>Id: string // 组件 id
    			      dataIndex: number // 数据项 index
    			      name: string // 数据项 name
    			      dataType: string // 数据项 type，如关系图中的 'node', 'edge'
    			      element: string // 自定义系列中的 el 的 name
    			  }
    			  
    	解绑事件:
    		echarts.init对象.off('事件名称',fn);  解绑单个事件
    		echarts.init对象.off('事件名称');  解绑所有事件
    		  
    	Echarts事件:
    		echarts.init对象.on('事件名称',fn);

![在这里插入图片描述][20201018210456337.png_pic_center]

分发事件模拟用户dispatchAction:
    
     (1)模拟点击/浮动高亮:
     
    	只配置type触发时会全部高亮
    	echarts.init对象.dispatchAction({
    	    type: 'highlight',
    	    seriesIndex?: number|Array,	可选,系列 index,可以是一个数组指定多个系列
    	    seriesName?: string|Array,	可选,系列名称,可以是一个数组指定多个系列
    	    dataIndex?: number,	可选,数据的 index
    	    name?: string	可选,数据的名称
    	})
    	
     (2)取消指定高亮
    	echarts.init对象.dispatchAction({
    	    type: 'downplay',
    	    seriesIndex?: number|Array,	可选,系列 index,可以是一个数组指定多个系列
    	    seriesName?: string|Array,	可选,系列名称,可以是一个数组指定多个系列
    	    dataIndex?: number,	可选,数据的 index
    	    name?: string	可选,数据的名称
    	})

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]

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

[2020101820290873.png_pic_center]: /images/20210724/67368b37f9b845cea2f2e136b578a32b.png
[20201018210456337.png_pic_center]: /images/20210724/5b251a32a24847deb20a20f8776d62d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/e4dc341486b94d778e5d30fbef39dc93.png