vue 项目引入echarts 添加点击事件操作


Posted in Javascript onSeptember 09, 2020

main.js中

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

vue文件中

_this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar'))
_this.calendarChart.on('click',function (param) {
    console.log(param)
}) 
_this.calendarChart.setOption(_this.scatterOption)

vue 项目引入echarts 添加点击事件操作

console结果

vue 项目引入echarts 添加点击事件操作

补充知识:vue根据路由守卫,判断用户权限,进行路由跳转

判断用户权限,可以说是每一个项目都会用到的,因此,提供给大家较为简单的方法。

主要思想是通过判断用户登录后,根据后台返回的对应用户权限去验证用户是否可以进行相关的操作。

第一步,创建路由

提供部分代码,用于解释

{
  path: '/',
  redirect: '/login',
 },
 {
  path: '/login',
  name: 'login',
  component: Login,
 },
 {
  path: '/front/index',
  name: 'frontIndex',
  component: () => import('../views/frontDeskPage/index.vue'),
  meta: {
   isLogin: true,
   roles: ['0'],//定义登录的用户权限
  },
 }

注意:

meta对象中的isLogin表示需要用户登录后才能访问相应页面

meta对象中的roles表示用户登录后所带有的权限

第二步,使用beforeEach方法

router.beforeEach((to,from,next)=>{
 //console.log(to.meta.isLogin)
 if(to.meta.isLogin){ //判断页面是否需要登录才可操作
  if(store.state.user.userName){//判断用户是否登录,值为true,代表登录了
    if(to.meta.roles.indexOf(String(store.state.user.power)) >= 0){//判断登录用户的权限是否满足meta对象中的roles的要求
      next()
    }else {
      alert('您没有权限进入页面!')
      router.push('/login')
    }
  }else {
   alert('请登录之后再操作!')
   router.push('/login')
  }
 }else {
  next()
 }
})

注意:

1、to,from,next三者分别代表,要去的页面、当前的页面、下一步

2、store.state.user.userName、store.state.user.power为vuex中登录请求成功后,所保存的用户信息,书写时需要注意路径是否一致

3、to.meta.roles.indexOf(String(store.state.user.power),用于比对用户权限是否存在于meta.roles中,需要注意的是在vuex存储的数据类型与meta.roles中的数据类型是否一致,如不一致需要进行类型转换

以上这篇vue 项目引入echarts 添加点击事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
Javascript动画效果(3)
Oct 11 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
微信小程序实现点击生成随机验证码
Sep 09 #Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 #Javascript
vue移动端写的拖拽功能示例代码
Sep 09 #Javascript
You might like
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
node.js处理前端提交的GET请求
2019/08/30 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
让Python代码更快运行的5种方法
2015/06/21 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
初中数学教学反思
2014/01/16 职场文书
学习交流会主持词
2014/04/01 职场文书
维稳工作情况汇报
2014/10/27 职场文书
详解Python牛顿插值法
2021/05/11 Python