UNIAPP怎麼引入在項目裏面引入echart

在uniapp項目中，沒有所謂的標籤，只有對應的組件，這裏就要藉助 renderjs-echarts-demo ，它能把對應的JS和HTML轉換爲對應的組件，只支持H5和APP

第一步 ：引入renderjs-echarts-demo 

在插件市場找到renderjs-echarts-demo ，直接引入地址

這個插件也表示，限制條件爲

 

第二步，在所需的頁面加入渲染代碼

創建一個vue頁面, 添加多一個script，module="echarts" lang="renderjs"

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 動態引入較大類庫避免影響頁面展示
				const script = document.createElement('script')
				// view 層的頁面運行在 www 根目錄，其相對路徑相對於 www 計算
				script.src = '你的eachartJS文件，比如static/echarts/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 觀測更新的數據在 view 層可以直接訪問到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 監聽 service 層數據變更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 調用 service 層的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

在template寫入對應的組件，prop就是對應的參數配置，具體參考echart官網，

<view ref="chart" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>

這樣我們就可以得到對應的圖表了