uni-app 引入ecart

https://blog.csdn.net/CherryLee_1210/article/details/83016706（copy）

一、首先在uni-app中不支持包下載因此得本身先新建一個項目，而後進入到這個目錄下，執行 npm init，接下來一路回車便可。
二、下載所須要的庫

npm install echarts mpvue-echarts --save
1
三、進入 node_modules 目錄，裏面的三個目錄：echarts、mpvue-echats 、zrender 就是咱們須要的第三方庫。
四、把這三個庫copy到本身項目的根目錄下。

五、接下來要作的事兒就是導入庫。
在本身須要圖表顯示的組件中導入所須要的庫。

import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
1
2
六、導入庫以後就要使用了
我在同一個頁面中使用了兩次mpvueEcharts組件，這裏須要注意的是，使用屢次就要給每個mpvueEcharts組件指定一個特有的canvasId。（必需要的，不然很差使，我在這個地方踩坑了）

視圖層

<!-- 外層預留的圖表容器 -->
<view class="box1">
<!-- 引入的mpvue-echarts組件 -->
<mpvue-echarts canvasId="chat1" :echarts="echarts" :onInit="fn1OnInit" />
</view>

<view class="box2">
<mpvue-echarts canvasId="chat2" :echarts="echarts" :onInit="fn2OnInit" />
</view>

業務層

//導入庫
import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

//命名一個方法名稱，方便本身識別，也方便多個圖表引用時易區別。
//切記這方法不能寫到export default中。
function fn1(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);

var option = {
...一些表格配置（參考echarts官方文檔根據本身需求配置便可）
}

chart.setOption(option)
return chart
};

function fn2(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart);

var option = {
...一些表格配置（參考echarts官方文檔根據本身需求配置便可）
}

chart.setOption(option)
return chart
};

//這是vue的導出對象
export default {
data() {
return {
//初始化圖表
echarts,
//圖表數據綁定（咱們定義的兩個方法綁定）
fn1OnInit: fn1,
fn2OnInit: fn2
}
},
//導入mpvue的mpvueEcharts組件。
components: {
mpvueEcharts
}
}


這樣就實現了咱們的echarts表格在uni中的使用
相關連接
uni-app引入第三方庫
微信小程序中使用echarts

這裏說明一點：雖然第二個連接是微信小程序引入echarts，其實遠離同樣的。咱們要到事情的本質，開始我一看小程序，直接忽略，由於我寫的不是小程序。但是後來找不到，就耐着性子去看，發現代碼是相通的。雖然mpvue是一個使用 Vue.js 開發小程序的前端框架，可是這裏導入組件，而且使用仍是很順暢的。mpvue的地址：mpvue,外號「沒朋友」