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