我快要哭了鸽嫂，怎么都做不出來了纵装。無論是按照網(wǎng)上的教程還是把以前的代碼放進(jìn)現(xiàn)在的項(xiàng)目，都會(huì)報(bào)錯(cuò)溪胶。我不知道問題究竟在何處搂擦。npm也是一個(gè)坑，讓我心態(tài)崩潰』┎保現(xiàn)在我都還沒有解決這個(gè)問題瀑踢。引入一個(gè)echarts庫怎么這么困難扳还？
TypeError: $gwx is not a function
又要哭了，原來不是echarts的問題橱夭，問題很早就出現(xiàn)了“本啵現(xiàn)在是在真機(jī)上運(yùn)行就報(bào)錯(cuò)了。這種關(guān)頭了棘劣，卻發(fā)生了如此大的問題俏让。
現(xiàn)在的問題可以讓我崩潰——瀏覽器可以正常編譯，但是手機(jī)就不行了茬暇。我怎么辦呢首昔？只有從頭新建一個(gè)，再把一起拿的代碼一點(diǎn)一點(diǎn)移過去了糙俗。唉勒奇，以后一定要經(jīng)常在手機(jī)端調(diào)試
uni-app出了一個(gè)自定義組件模式，這個(gè)我必須要注意一下巧骚，感覺和echarts有關(guān)系
嗚嗚嗚赊颠，終于是正常編譯了，原因：
之前為了測(cè)試echarts劈彪，在me頁面copy了代碼竣蹦，結(jié)果出問題后沒有刪除，出錯(cuò)沧奴。
后來發(fā)現(xiàn)了痘括，選擇全刪除，又出錯(cuò)扼仲。
補(bǔ)了根標(biāo)簽远寸，又報(bào)錯(cuò)，原來是因?yàn)?lt;template></template>標(biāo)簽里面至少得放一個(gè)<view></view>標(biāo)簽才行屠凶〕酆螅總算是恢復(fù)原樣了〈＠ⅲ可是到頭來灶芝，我還是不會(huì)echarts。
我成功了唉韭！引入終于成功了夜涕，沒想到真的是編譯模式的問題。之前不知怎的就開啟了自定義組件編譯模式属愤。雖然這個(gè)模式更好女器，但是對(duì)echarts的寫法有了新的要求。所以我暫時(shí)先不研究新模式住诸，先把echarts引入再說驾胆。
注意涣澡，echarts頁面的樣式必須是：
page,
view {
display: flex;/* uni-app默認(rèn)使用flex布局。因?yàn)閒lex布局有利于跨更多平臺(tái)丧诺，尤其是采用原生渲染的平臺(tái)入桂。如不了解flex布局，請(qǐng)參考http://www.w3.org/TR/css3-flexbox/驳阎。若不需要flex布局可刪除本行*/
}
page {
min-height: 100%;
}
.container {
flex: 1;
}
否則不會(huì)顯示
再度更新：
echarts在uni-app中的使用抗愁，即使是成功引入，你也得把樣式也好呵晚，否則就是顯示不出來蜘腌。
未使用自定義編譯模式，把官方的echarts項(xiàng)目里面的echarts饵隙、mpvue-echarts和zrender放進(jìn)自己項(xiàng)目的根目錄逢捺。用npm如果網(wǎng)絡(luò)不好可能會(huì)心態(tài)爆炸。現(xiàn)在我也不想再嘗試了癞季。
然后在想要引入的頁面這樣寫：
<view class="ring-diagram">
<view class="canvasView">
<mpvue-echarts :echarts="echarts" :onInit="onInit" />
</view>
</view>
這時(shí)的為了保持文檔結(jié)構(gòu)，后面會(huì)給出樣式
.ring-diagram {
width: 95%;
height: 600upx;//給出canvas的大小
background: white;
margin: 20upx;
}
page,//只有再flex下才能顯示
.ring-diagram {
display: flex;
}
page {
min-height: 100%;
}
.container,
.canvasView {
flex: 1;
}
js部分可以參考uni-app官方的文檔倘潜，如果想改變圖標(biāo)可以去echarts官網(wǎng)看實(shí)例里面的代碼绷柒。
http://ask.dcloud.net.cn/question/62769
uni-echarts的官方例子，未使用自定義組件模式編譯
https://echarts.baidu.com/examples/
//echarts的官方例子涮因，里面有使用代碼
