uni-app中使用Echarts的實踐總結

1、首先在uni-app中不支持包下載所以得自己先新建一個項目，然後進入到這個目錄下，執行 npm init，接下來一路回車即可。
2、下載所需要的庫

npm install echarts mpvue-echarts --save

3、進入 node_modules 目錄，裏面的三個目錄：echarts、mpvue-echats 、zrender 就是我們需要的第三方庫。
4、把這三個庫copy到自己項目的根目錄下。

5、接下來要做的事兒就是導入庫。
在自己需要圖表顯示的組件中導入所需要的庫。

import * as echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'

6、導入庫之後就要使用了
我在同一個頁面中使用了兩次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,外號“沒朋友”