vue结合Echarts实现点击高亮效果
2017-11-28 06:20
639 查看
vue结合Echarts实现点击高亮效果
本文主要介绍如何在vue中使用Echarts实现点击高亮效果。1、首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency
2、在初始化的时候绑定这两个事件。需要绑定的事件是鼠标的点击事件和右键点击事件。
mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementById('myChart')); myChart.on('click', function (params) { console.log(params); //点击高亮 that.myChart.dispatchAction({ type: 'focusNodeAdjacency', // 使用 dataIndex 来定位节点。 dataIndex: params.dataIndex }); if (params.dataType == 'edge') { that.handleClick(params); } else if (params.dataType == 'node') { if (that.firstNode == '') { that.firstNode = params.name; } else { that.secondNode = params.name; } } }); //取消右键的弹出菜单 document.oncontextmenu = function () { return false; }; //右键取消高亮 myChart.on('contextmenu', function (params) { console.log(params); that.myChart.dispatchAction({ type: 'unfocusNodeAdjacency', // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series. seriesIndex: params.seriesIndex, }) }); that.myChart = myChart; that.drawLine(); },
运行效果如下:
相关文章推荐
- vue结合Echarts实现点击高亮效果的示例
- vue实现点击当前标签高亮效果【推荐】
- 修改echarts源码实现鼠标点击高亮效果
- JS实现的表格行鼠标点击高亮效果代码
- PHP结合Vue实现滚动底部加载效果
- vue实现点击展开点击收起效果
- vue实现a标签点击高亮
- 用shape结合selector实现点击效果
- Vue.js 结合bootstrap 前端实现分页效果
- JS实现的表格行鼠标点击高亮效果代码
- 用shape结合selector实现点击效果
- jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
- Vue-router结合transition实现app前进后退动画切换效果
- jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
- Vue-router结合transition实现app前进后退动画切换效果的实例
- vue组件实现弹出框点击显示隐藏效果
- Vue-router结合transition实现app前进后退动画切换效果
- ECharts3.4 结合Vue.js实现地图下钻
- jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
- vue.js 实现点击展开收起动画效果