剛開始學(xué)微信小程序驳规,有說的不對的地方大家可以提出!
首先體驗示例小程序
在微信中掃描下面的二維碼即可體驗 ECharts Demo:?
下載
為了兼容小程序 Canvas艾君,我們提供了一個小程序的組件采够,用這種方式可以方便地使用 ECharts。
首先冰垄,下載 GitHub 上的?ecomfe/echarts-for-weixin?項目蹬癌。
其中,ec-canvas?是我們提供的組件虹茶,其他文件是如何使用該組件的示例逝薪。
ec-canvas?目錄下有一個?echarts.js,默認(rèn)我們會在每次?echarts-for-weixin?項目發(fā)版的時候替換成最新版的 ECharts蝴罪。如有必要董济,可以自行從 ECharts 項目中下載最新發(fā)布版,或者從官網(wǎng)自定義構(gòu)建以減小文件大小要门。
引入組件
微信小程序的項目創(chuàng)建可以參見微信公眾平臺官方文檔虏肾。
在創(chuàng)建項目之后,可以將下載的?ecomfe/echarts-for-weixin?項目完全替換新建的項目暂衡,然后將修改代碼;或者僅拷貝?ec-canvas?目錄到新建的項目下崖瞭,然后做相應(yīng)的調(diào)整狂巢。
如果采用完全替換的方式,需要將?project.config.json?中的?appid?替換成在公眾平臺申請的項目 id书聚。pages?目錄下的每個文件夾是一個頁面唧领,可以根據(jù)情況刪除不需要的頁面,并且在?app.json?中刪除對應(yīng)頁面雌续。
下面是小程序的折線圖demo:
1斩个、首先是在pages文件夾下面新建line文件夾,里面對應(yīng)的line.js驯杜、line.json受啥、line.wxml、line.wxss
2、line.xml文件下面的代碼:
?3.line.wxss代碼如下:
4滚局、line.json代碼:(注意該路徑是我項目的路徑居暖,大家改成自己項目路徑即可)
5、line.js代碼: