当前位置:首页 > 编程教程 > vue技术文章 > vue结合Echarts实现点击高亮效果的示例

vue结合Echarts实现点击高亮效果的实例代码

  • 发布时间:
  • 作者:码农之家
  • 点击:146

这篇文章主要知识点是关于vue、点击高亮、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

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

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

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

http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency

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

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

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实现点击高亮效果的示例

以上这篇vue结合Echarts实现点击高亮效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue高亮 相关电子书
学习笔记
网友NO.832251

vue实现多组关键词对应高亮显示功能

先上效果图: 我们有多组关键词,这里实现了关键词的背景色与匹配值的字体颜色值相同 先拟定一组数据 colors: [ "#FFB5C5", "#EEC900", "#D1EEEE", "#40E0D0", "#FFFF00", "#FF7F00", "#FF6A6A", "#B3EE3A", "#9F79EE", "#FFC1C1" ], keywordsdetail: ["好看", "美丽", "wfewf"], comments: [ { text: "老师 好看好看222" }, { text: "老师美丽11111极了" }, { text: "老师太搞笑34234了" }, { text: "老师搞笑的不的了" }, { text: "老师:ox::beer:wfewf啊" } ] 我们自定义一些颜色值以及关键词和详情文字 用内联样式的方法设置关键词的不同背景色显示 span v-for="(item,index) in keywordsdetail" :key="index" class="keyworditem" : @click="showpartkey(index,comments)" {{item}}/span 下面定义关键词匹配改变字体颜色的方法 changeColor(resultsList, keywords) { keywords.map((keyitem, keyindex) = { resultsList.map((item, index) = { if (keyitem keyitem.length 0) { // 匹配关键字正则 let replaceReg =……

网友NO.901226

vue使用原生js实现滚动页面跟踪导航高亮的示例代码

需要使用vue做一个专题页面。滚动页面指定区域导航高亮。 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换。 我使用的方法是在定位元素上添加id,在导航添加data-id属性,监听滚动事件,如果当前滚动区域大于定位元素区域,将元素的id赋值给变量,然后与导航的data-id进行匹配,切换class。 html结构 main.vue template div class="qz-home" div class="quiz-container" div class="quiz-ad-pic" id="pagetop"/div div class="quiz-main" div class="quiz-main-inside" id="js-content" quiz-sessions class="item" id="quizhall"/quiz-sessions quizRecords class="item" id="quizrecord"/quizRecords quiz-history class="item" id="quizHistory"/quiz-history quiz-mine class="item" id="quizMine"/quiz-mine quiz-rank class="item" id="quizRank"/quiz-rank quiz-rule class="item" id="quizRule"/quiz-rule /……

网友NO.351498

vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果 实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; border: 1px solid #fd7522; color: #fff; } •动态渲染按钮的数据,并动态的增加active类名(当active为当前name值时添加),添加点击事件(点击时让active=name) el-row class="wp-list" el-button v-for="item in wpList" :key="item.name" :class="{active : active == item.name}" @click="selected(item.name)"{{item.name}}/el-button/el-row •在methods中定义点击事件函数 selected(name){ this.active = name;} 总结 以上所述是小编给大家介绍的vue实现点击当前标签高亮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com