vue实现点击高亮效果_vue结合Echarts实现点击高亮效果的示例

本文主要介绍如何在vue中使用echarts实现点击高亮效果。

1、首先看一下官方网站上的介绍：

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实现点击高亮效果_vue结合Echarts实现点击高亮效果的示例相关推荐

vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...
vue怎么实现手风琴效果_Vue中使用v-for制作动态手风琴效果
export default { data () { return { Faq: [ { isSubShow: false, about: 'Q:非公司员工是否可通过次入口申请公司客房?', answ ...
vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例
实例如下所示: title #th th{ background-color: #50a9fa; color: aliceblue; font-size: large; } 添加数据编号名称时间 ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
vue 手风琴组件_Vue 使用Element-ui table组件实现手风琴效果
利用Element-UI提供的表格组件做成手风琴效果, 即同时只能有一个行展开效果展示手风琴效果版本说明 "vue": "^2.6.11", " ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: 事件冒泡-提示框 button { wi ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...

vue实现点击高亮效果_vue结合Echarts实现点击高亮效果的示例

vue实现点击高亮效果_vue结合Echarts实现点击高亮效果的示例相关推荐

最新文章

热门文章