在Vue.JS中怎樣使用echarts

這次帶給大家在Vue.JS中怎樣使用echarts，在Vue.JS中使用echarts的注意事項有哪些，下面就是實戰案例，一起來看一下。

上篇文章為大家介紹了 在 webpack 中使用 ECharts的實例詳解 ，可以點擊查看。

1. 使用NPM安裝（全域引入）

#執行下面的命令：

npm install echarts--save

引入echarts模組

在Vue專案的main.js中引入echarts模組，即寫入如下程式碼：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. 按需引入

##上面全局引入會將所有的echarts圖表打包，導致體積過大，我解決這一問題，可以使用

require按需引入即是需要什麼就引入什麼：

即是：

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

3. 直接引用

在index.html檔案中全域引入，使用script標籤引入

<script src="/static/js/echarts/echarts.js"></script>

注意：src中寫入echarts的路徑；

然後再vue專案build目錄下找到webpack.base.conf.js，

設定檔，在module.exports物件中加入externals屬性，然後配置echarts所在的路徑：

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

服務端直接取得檔案上傳進度

#datepicker怎麼使用

ejsExcel範本在Vue.js中的使用
#

以上是在Vue.JS中怎樣使用echarts的詳細內容。更多資訊請關注PHP中文網其他相關文章！