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)限，可以說(shuō)是每一個(gè)項(xiàng)目都會(huì)用到的，因此，提供給大家較為簡(jiǎn)單的方法。
主要思想是通過(guò)判斷用戶登錄后，根據(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表示需要用戶登錄后才能訪問(wèn)相應(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('您沒(méi)有權(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ū)寫(xiě)時(shí)需要注意路徑是否一致
3、to.meta.roles.indexOf(String(store.state.user.power)，用于比對(duì)用戶權(quán)限是否存在于meta.roles中，需要注意的是在vuex存儲(chǔ)的數(shù)據(jù)類(lèi)型與meta.roles中的數(shù)據(jù)類(lèi)型是否一致，如不一致需要進(jìn)行類(lèi)型轉(zhuǎn)換
以上這篇vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
搭建vue3項(xiàng)目以及按需引入element-ui框架組件全過(guò)程
element是基于vue.js框架開(kāi)發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項(xiàng)目以及按需引入element-ui框架組件的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue 表情包輸入組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于Vue中axios的封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果的代碼
這篇文章主要介紹了vue?navbar?tabbar導(dǎo)航條根據(jù)位置移動(dòng)實(shí)現(xiàn)定位、顏色過(guò)渡動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章大家分享了vue中axios的封裝的相關(guān)知識(shí)點(diǎn)以及實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-07-07
Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
監(jiān)聽(tīng)事件是我們?cè)谑褂胿ue.js的時(shí)候經(jīng)常使用的一個(gè)功能，下面這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn) 的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log
console.log一般都是在開(kāi)發(fā)環(huán)境下使用的,在生產(chǎn)環(huán)境下需要去除?,本文主要介紹了vue-cli2,vue-cli3,vite?生產(chǎn)環(huán)境去掉console.log,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實(shí)現(xiàn)配置、切換主題方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問(wèn)題的完美解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03