Vue中echarts的引入方法

2021-10-25 18:27:23 字數 930 閱讀 4165

專案使用的是vue-cli腳手架搭建

npm install echarts -s
或者使用國內的**映象：

安裝：

npm install -g cnpm --registry=
使用：

cnpm install echarts -s
main.js檔案中：

// 引入echarts


import echarts from 'echarts'


vue.prototype.$echarts = echarts
上面全域性引入會將所有的echarts圖表打包，導致體積過大，所以我覺得最好還是按需引入。

例如：

// 引入基本模板


let echarts = require('echarts/lib/echarts')


// 引入柱狀圖元件


require('echarts/lib/chart/bar')


// 引入提示框和title元件


require('echarts/lib/component/tooltip')


require('echarts/lib/component/title')


export default 


},mounted() ,


methods: ,


tooltip: {},


xaxis: ,


yaxis: {},


series: 


});}


}}
這裡之所以使用 require 而不是 import，是因為 require 可以直接從 node_modules 中查詢，而 import 必須把路徑寫全。

好啦，以上就是echarts在vue的兩種引入方式。

vue開發 vue引入echarts

npm install echarts s或者使用國內的 映象 npm install g cnpm registry taobao org cnpm install echarts s 引入echarts import echarts from echarts vue.prototype.echa...

vue vue中引入echarts的兩種方式

1.安裝echarts依賴 npm install echarts s 2.建立圖表 a 全域性引入 main.js頁面 import echarts from echarts vue.prototype.echarts echartshello.vue頁面 b 按需引入 上面全域性引入會將所有的e...

vue中引入echarts的兩種方式

1.main.js中配置 import echarts from echarts 引入echarts vue.prototype.echarts echarts 引入元件2.echarts在vue中的引用 按需引入 如果是在許多頁面中都有用到，就寫在main.js中 main.js 引入基本模板 l...