在Vue中使用echarts例項

2021-10-07 02:19:04 字數 2113 閱讀 6038

npm install echarts -s

或者使用**的映象

npm install -g cnpm --registry=

cnpm install echarts -s

首先需要全域性引入

在main.js中

// 引入echarts

import echarts from 'echarts'

vue.prototype.$echarts = echarts

完整**：

main.js

import vue from 'vue'


import router from './router'


import axios from 'axios'


import vueaxios from 'vue-axios'


import qs from 'qs'


import elementui from 'element-ui'


import 'element-ui/lib/theme-chalk/index.css'


import global from './global'


import vueaplayer from 'vue-aplayer'


import router from 'vue-router'


import commonfunction from './assets/js/commonfunction'


import packagefunc from './assets/js/commonfunction'


import echarts from 'echarts'


import  from './utils'


// 恢復登入狀態，避免在重新整理後失去登入狀態


restoreloginstate()


vue.prototype.global = global


vue.prototype.$echarts = echarts


vue.prototype.$axios = axios


vue.use(router, vueaplayer, vueaxios, axios, qs, commonfunction, packagefunc)


// 全域性配置：完整引入 element：


vue.use(elementui, )


vue.config.productiontip = false


// http請求***


// 未登入或者賬號資訊錯誤，則跳轉到登入頁


if (data.status === 1002) 


return promise.reject(data)


}, (err) => )


//在路由跳轉之前判斷，除了首頁以外，其他頁面必須登入才能訪問,非同步問題


router.beforeeach((to, from, next) => 


if (to.path === '/' || to.path === '/login' || to.path === '/activate' || to.path === '/register')  else  else 


}})new vue({


router,


// render函式是渲染乙個檢視，然後提供給el掛載，如果沒有render那頁面什麼都不會出來
vue檔案：
需要什麼做什麼樣的圖形就在  這裡去找吧！複製貼上修改！

參考：

在Vue中使用echarts

npm install echarts s 或者使用 的映象 npm install g cnpm registry cnpm install echarts s 首先需要全域性引入 在main.js中 引入echarts import echarts from echarts vue.protot...

在 Vue 專案中使用 ECharts

重要檔案版本 在 vue 專案中使用 echarts 只需要在 vue 元件的mounted生命週期中 初始化 echarts，然後在每次配置項有變更時呼叫setoption 方法更新配置即可 專案模板原始碼 class default chart style div template import...

在vue專案中使用echarts

安裝echarts依賴 npm install echarts s 建立圖表 全域性引入 main.js 引入echarts import echarts from echarts vue.prototype.echarts echarts 這裡也可以在router下index.js引入，看規定 h...