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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python冒泡排序注意要点实例详解
2016/09/09 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
2014年审计工作总结
2014/11/17 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
python中if和elif的区别介绍
2021/11/07 Python