vue 项目引入echarts 添加点击事件操作
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)
console结果
补充知识：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 添加点击事件操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何在data中引入图片的正确路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
mixins（混入）是一种分发 Vue 组件中可复用功能的非常灵活的方式，这篇文章主要为大家介绍了mixins混入的介绍和使用，需要的可以参考下2023-08-08
在Vue3和TypeScript中大文件分片上传的实现与优化
本文介绍在 Vue 3 和 TypeScript 环境下大文件分片上传的实现与优化,包括项目前后端技术栈,前端的文件切片、并发上传、计算 Hash、断点续传和用户体验优化,后端的文件接收存储、切片合并、异常处理与日志记录,还提及遇到的问题及解决方案,总结了此方式的优势和重要性2025-01-01
Pycharm中开发vue element项目时eslint的安装和使用步骤
这篇文章主要介绍了Pycharm中开发vue element项目时eslint的安装和使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue3中引用本地图片路径的常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了vue双向数据绑定指令v-model的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
uniapp小程序上传文件webapi后端项目asp.net完整代码
在uniapp中,实现文件上传功能也变得非常简单,下面这篇文章主要给大家介绍了关于uniapp小程序上传文件webapi后端项目asp.net的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue自定义询问弹框和输入弹框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
Vue Router 是 Vue.js 的官方路由库,用于在 Vue 应用中实现单页面应用（SPA）的客户端路由,以下是 Vue Router 的详细介绍,包括基本概念、配置、路由导航以及高级用法,感兴趣的小伙伴跟着小编一起来看看吧2024-08-08
vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论