mpvue開發小程式，使用echarts踩坑記錄

2022-08-29 10:48:21 字數 2542 閱讀 1540

好久沒寫部落格了，主要是沒遇到什麼大坑，再加上工作變動。不過最近接觸小程式開發，用的mpvue，和vue差不多，上手較容易。

在開發過程中，遇到畫圖表的需求。

git原始碼及說明：

由於是乙個頁面顯示多個圖表，所以還看了這個：/blob/master/examples/src/pages/demos/multicharts.vue

以上例子沒什麼可說的，都寫得很清楚，例子也是可行的。

但是，哪有那麼容易！！！

第一坑：

例子中   



canvasid是必寫的，而且必須唯一，不唯一的話只能顯示乙個，其他的隱藏。


我偏偏需要動態v-for迴圈出來多個圖表，迴圈出來的


canvasid都是一樣的，就顯示出來第乙個。


我只好用:


canvasid繫結，動態給賦值，但是元件就開始迴圈，好怕怕電腦壞掉，趕快停掉！！


ε=(´ο｀*)))唉


最後，我還是動態迴圈出了圖表，劃重點。


我把這個元件內部改了。


在node_modules\mpvue-echarts\src\echarts.vue中，


props增加引數：
index:

原來的元件是這樣的：

<


canvas


v-if


="canvasid"


class


="ec-canvas"


:id="canvasid"


:canvasid


="canvasid"


@touchstart


="touchstart"


@touchmove


="touchmove"


@touchend


="touchend"


@error


="error"


>


canvas


>
改成這樣：

<


canvas


v-if


="canvasid"


class


="ec-canvas"


:id="canvasid + index"


//加上index


:canvasid


="canvasid + index"


//加上index


@touchstart


="touchstart"


@touchmove


="touchmove"


@touchend


="touchend"


@error


="error"


>


canvas


>
改完元件後這樣使用，就可以在v-for中顯示多個圖表了。

第二坑：


既然是動態生成，option也不可能一樣啊，所以例子中setoption的引數也需要增加，


引數從function 


oninit(canvas, width, height)中傳過來，但是引數是固定的，不能隨便增加。


於是，我又改了他原來元件~~


還是在node_modules\mpvue-echarts\src\echarts.vue中，


props增加引數：
num1:,

num2:,

然後，他原來的init()方法是這樣的：

if (typeof callback === 'function')  


else


if (typeof


this.oninit === 'function')
我改成這樣：

if (typeof callback === 'function')  


else


if (typeof


this.oninit === 'function')
然後在使用的時候：

echarts 


:echarts="echarts":oninit="oninit"canvasid="a1":index = "mycourse.nd":num1 = "mycourse.finshprocredit" //傳入自己的引數


:num2 = "mycourse.procredit" //傳入自己的引數


/>
就可以把自己的引數傳到他的元件中，通過元件中init方法帶回到oninit方法，所以再寫oninit的時候，要這樣寫：

oninit(canvas, width, height,num1,num2) 

這樣也不需要像例子中寫很多setoption方法，寫乙個就可以了。

嗯，就醬吧。

最後放個生成出來的圖。

MPVue開發小程式使用axios

1.安裝axios npm install axios 2.找到以下路徑中檔案路徑 node modules axios dist axios.js注釋 塊 axios.all function all promises 3.使用axios的自定義請求adapter axios.defaults.a...

使用mpvue開發小程式教程（二）

在visual studio code裡面開啟專案資料夾，我們可以看到類似如下的檔案結構 package.json project.config.json static src components pages utils main.js config index.js dev.env.js pro...

使用mpvue開發小程式教程（二）

在visual studio code裡面開啟專案資料夾，我們可以看到類似如下的檔案結構 package.json project.config.json static src components pages utils main.js config index.js dev.env.js pro...