站長資訊網uni-app引用npm第三方庫的方法：首先下載第三方庫；然后創建【uni-app】工程；最后在【uni-app】里面使用第三方庫，代碼為【import * as echarts from 'echarts'】。
本教程操作環境：windows7系統、uni-app2.5.1版本，該方法適用于所有品牌電腦。
推薦（免費）：uni-app開發教程
uni-app引用npm第三方庫的方法：
1. 下載第三方庫
uni-app 使用了 mpvue 的部分代碼，所以我們的 echarts 庫使用兼用 mpvue 版本的 mpvue-echarts，同時需要引用百度的 echarts。
下載流程如下：
-
創建一個空的文件夾如：test-echarts。
-
進入 test-echarts 打開命令行工具，執行 npm init 一路回車即可。
-
下載第三方庫：npm install echarts mpvue-echarts –save。
-
進入
node_modules目錄，里面的三個目錄：echarts、mpvue-echats、zrender就是我們需要的第三方庫。
2. 創建uni-app工程
在 HBuilderX 里面新建 uni-app，將將剛才下載的三個文件夾拷貝到項目根目錄，最終項目截圖如下：
3. 在uni-app里面使用第三方庫
和一般的 vue 項目引用第三方庫的方法一樣，如下所示，這樣我們就能在工程里面使用 echarts 和 mpvue-echarts 了。
import * as echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts'
本示例源碼在附件工程里面，下面是部分代碼和效果截圖：
<template> <div class="container"> <mpvue-echarts :echarts="echarts" :onInit="onInit" /> </div> </template> <script> import * as echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts' function initChart(canvas, width, height) { ...... } export default { data() { return { echarts, onInit: initChart } }, components: { mpvueEcharts } } </script> <style> .container { flex: 1; } </style>
