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,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 新增點選事件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。