vue echarts在vue中的使用

2022-01-11 18:47:36 字數 961 閱讀 1444

安裝依賴:

【win】npm install echarts vue-echarts

【mac】sudo npm install echarts vue-echarts

vue-echarts 預設在 webpack 環境下會引入未編譯的原始碼版本,vue cli 建立專案可能會遇到預設配置把 node_modules 中的檔案排除在 babel 轉譯範圍以外的問題。

修復方法是在vue.config.js中新增如下**:

1

//for vue cli 3+, add vue-echarts and resize-detector into transpiledependencies in vue.config.js like this:

2transpiledependencies: [

3 'vue-echarts',

4 'resize-detector'

5 ]

引入:

import echarts from 'vue-echarts'

各零件按需載入,手動引入 echarts 各模組來減小打包體積:

import "echarts/lib/chart/line"; //

線圖import "echarts/lib/chart/bar"; //

柱圖import 'echarts/lib/component/legend' //

圖例import 'echarts/lib/component/tooltip' //

提示框

etc...

註冊:

vue.component('myechart', echarts)

使用元件:

vue-echarts的options設定基本同echarts,配置文件看echarts官網即可。

Vue 在Vue中快速使用ElementUI

最近使用vue,順道使用elementui,在vue專案中音容elementui的方法 idea開啟termianl,在vue專案中使用npm安裝 1.安裝 npm install element ui s2.引入 1 整體引入 在專案的main.js中寫入 import elementui fro...

axios在Vue元件中應用

vue裡面雖然有個vue resource,但是在vue2.0出來後,作者提倡用axios來做ajax,在es6的環境下,可以直接 npm install axios import axios from axios 在es5中可以直接引用 axios 裡面有幾個方法 下面就來說說axios 在vue...

在vue中如何引入element ui

element ui是餓了麼團隊為 vue提供的 ui元件 下面介紹如何在專案中引入與使用 借助 babel plugin component 我們可以只引入需要的元件,以達到減小專案體積的目的。首先 安裝 babel plugin component npm install babel plugi...