vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
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結(jié)果
補(bǔ)充知識(shí)：vue根據(jù)路由守衛(wèi)，判斷用戶權(quán)限，進(jìn)行路由跳轉(zhuǎn)
判斷用戶權(quán)限，可以說是每一個(gè)項(xiàng)目都會(huì)用到的，因此，提供給大家較為簡(jiǎn)單的方法。
主要思想是通過判斷用戶登錄后，根據(jù)后臺(tái)返回的對(duì)應(yīng)用戶權(quán)限去驗(yàn)證用戶是否可以進(jìn)行相關(guān)的操作。
第一步，創(chuàng)建路由
提供部分代碼，用于解釋
{
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'],//定義登錄的用戶權(quán)限
},
}
注意：
meta對(duì)象中的isLogin表示需要用戶登錄后才能訪問相應(yīng)頁(yè)面
meta對(duì)象中的roles表示用戶登錄后所帶有的權(quán)限
第二步，使用beforeEach方法
router.beforeEach((to,from,next)=>{
//console.log(to.meta.isLogin)
if(to.meta.isLogin){ //判斷頁(yè)面是否需要登錄才可操作
if(store.state.user.userName){//判斷用戶是否登錄，值為true，代表登錄了
if(to.meta.roles.indexOf(String(store.state.user.power)) >= 0){//判斷登錄用戶的權(quán)限是否滿足meta對(duì)象中的roles的要求
next()
}else {
alert('您沒有權(quán)限進(jìn)入頁(yè)面！')
router.push('/login')
}
}else {
alert('請(qǐng)登錄之后再操作！')
router.push('/login')
}
}else {
next()
}
})
注意：
1、to,from,next三者分別代表，要去的頁(yè)面、當(dāng)前的頁(yè)面、下一步
2、store.state.user.userName、store.state.user.power為vuex中登錄請(qǐng)求成功后，所保存的用戶信息，書寫時(shí)需要注意路徑是否一致
3、to.meta.roles.indexOf(String(store.state.user.power)，用于比對(duì)用戶權(quán)限是否存在于meta.roles中，需要注意的是在vuex存儲(chǔ)的數(shù)據(jù)類型與meta.roles中的數(shù)據(jù)類型是否一致，如不一致需要進(jìn)行類型轉(zhuǎn)換
以上這篇vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何在data中引入圖片的正確路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下2023-08-08
在Vue3和TypeScript中大文件分片上傳的實(shí)現(xiàn)與優(yōu)化
本文介紹在 Vue 3 和 TypeScript 環(huán)境下大文件分片上傳的實(shí)現(xiàn)與優(yōu)化,包括項(xiàng)目前后端技術(shù)棧,前端的文件切片、并發(fā)上傳、計(jì)算 Hash、斷點(diǎn)續(xù)傳和用戶體驗(yàn)優(yōu)化,后端的文件接收存儲(chǔ)、切片合并、異常處理與日志記錄,還提及遇到的問題及解決方案,總結(jié)了此方式的優(yōu)勢(shì)和重要性2025-01-01
Pycharm中開發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用步驟
這篇文章主要介紹了Pycharm中開發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中引用本地圖片路徑的常用方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue雙向數(shù)據(jù)綁定指令v-model的用法
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定指令v-model的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
uniapp小程序上傳文件webapi后端項(xiàng)目asp.net完整代碼
在uniapp中,實(shí)現(xiàn)文件上傳功能也變得非常簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序上傳文件webapi后端項(xiàng)目asp.net的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue自定義詢問彈框和輸入彈框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue Router 是 Vue.js 的官方路由庫(kù),用于在 Vue 應(yīng)用中實(shí)現(xiàn)單頁(yè)面應(yīng)用（SPA）的客戶端路由,以下是 Vue Router 的詳細(xì)介紹,包括基本概念、配置、路由導(dǎo)航以及高級(jí)用法,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09