您好,登錄后才能下訂單哦!
如何在微信小程序中使用Echarts方法?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
{ "usingComponents": { "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas" } }
xxx.wxml
<view class="container-echarts margin-top-10"> <ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
xxx.js 首先要引入echarts然后才能用下面的initChart方法,所以根據(jù)放置的ec-canvas的路徑引入echarts。
import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根據(jù)放置的ec-canvas的路徑引入echarts let chart = null // 用一個(gè)變量保存echarts的初始化 let options = { // 圖形配置,用過echarts的人都知道是嘛意思~ 這里給出官網(wǎng)線圖的基礎(chǔ)例子 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] } function initChart(canvas, width, height, dpr) { // 這里的canvas,width,height,dpr都可以不用管 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素 }); canvas.setChart(chart); chart.setOption(options); return chart; } Page({ data: { ec: { onInit: initChart // 這里不要加括號(hào)哦! } } });
保存運(yùn)行,到這一步理論上echarts已經(jīng)可以顯示了,實(shí)際怎么樣還要自己調(diào)試的。
用一個(gè)chart變量保存echarts的初始化,官網(wǎng)上把options也寫在方法里,我給拿出來了。那chart有什么用呢?因?yàn)榇蟛糠值臄?shù)據(jù)都是異步獲取的,所以要?jiǎng)討B(tài)渲染echarts。當(dāng)拿到數(shù)據(jù)后,這個(gè)chart就用上了。
chart.setOption({ xAxis: { data: newData.map(item => { return item[0]; }) }, series: { data: newData.map(item => { return item[1]; }) } })
這里關(guān)于data的數(shù)據(jù)格式,看每個(gè)人的options里面要渲染的是什么圖吧。我這里用的是官網(wǎng)給的這個(gè)例子傳送門,echarts的數(shù)據(jù)更新可以直接用setOption。
在開發(fā)者工具中的放大縮小滾動(dòng)沒有用,但是上傳到體驗(yàn)版上后在手機(jī)上是好的。微信對(duì)canvas有type="2d",在ec-canvas中想要使用type="2d"的話,要改動(dòng)ec-canvas.js
data: { isUseNewCanvas: true // 這里改成true, 默認(rèn)是false }
因?yàn)椋篿sUseNewCanvas默認(rèn)是false,是舊版的canvas。
<!-- 新的:接口對(duì)其了H5 --> <canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> <!-- 舊的 --> <canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
就下載的ec-canvas里面的echarts.js有幾百KiB,相對(duì)于2MiB的來說挺大的,當(dāng)我上傳項(xiàng)目的時(shí)候提示我超出限制,那能想到的就是減小echarts.js的體積和分包兩個(gè)能即時(shí)見效的方法了。
在echarts的官網(wǎng)有按需構(gòu)建的方法(傳送門---在線定制),進(jìn)入下面的在線定制,選擇自己需要圖,我就選了折線圖,坐標(biāo)系選了直角坐標(biāo)系,組件里除了刷選,工具欄和自定義圖形外別的都選了,其它選項(xiàng)把svg也勾上了,然后點(diǎn)擊下載進(jìn)入building頁面,這里等它構(gòu)建完成會(huì)自動(dòng)下載一個(gè)echarts.min.js文件,大小最后少了200來KiB。然后把它重命名成echarts.js替換進(jìn)ec-canvas里。
echarts.js的體積減少了,但是上傳的限制問題還在,那就是分包了。
在app.json里面,有一個(gè)subpackages
{ "subPackages": [ { "root": "xxx/xxx", "name": "xxx", "independent": false, "pages": [ "pages/xxx", "pages/xxx", "pages/xxx" ] }, { "root": "baoziTask/", "name": "baozi", "pages": [ "pages/roubaozi/roubaozi" ] } ], }
這個(gè)分包在官網(wǎng)上講的挺簡(jiǎn)單的,但是在我使用時(shí)是這樣理解的。
root是要分包的路徑,我是放到根目錄的。那么baoziTask下的所有文件都會(huì)被認(rèn)為是一個(gè)包。那不在這個(gè)baoziTask路徑下的文件都會(huì)被打包進(jìn)app這個(gè)主包內(nèi)。
name就是分包的別名,預(yù)下載的時(shí)候會(huì)用,這個(gè)預(yù)下載就當(dāng)在某個(gè)頁面的時(shí)候,想主動(dòng)下載這個(gè)可能被使用的分包,以提高訪問速度。比如當(dāng)我進(jìn)入某個(gè)頁面的時(shí)候,很大可能會(huì)點(diǎn)擊某處跳轉(zhuǎn)到某個(gè)分包里面,這個(gè)時(shí)候可以預(yù)下載這個(gè)分包,而不用跳轉(zhuǎn)的時(shí)候才下載這個(gè)分包。
independent是分包是否獨(dú)立,但是我沒用過就沒有直觀的感覺。說是可以單獨(dú)運(yùn)行,不依賴app這個(gè)主包。這個(gè)需要配置,不是代碼的下載,配置preloadRule,具體的話得看官網(wǎng)和自己嘗試了。傳送門---分包預(yù)下載
pages就更好理解了啊,就是包內(nèi)的頁面唄。
想要跳轉(zhuǎn)到這些分包內(nèi)的頁面的時(shí)候給跳轉(zhuǎn)的url寫對(duì)路徑就可以了,就比如跳轉(zhuǎn)到roubaozi的時(shí)候url寫??面這樣:
url: '/baoziTask/pages/roubaozi/roubaozi'
關(guān)于如何在微信小程序中使用Echarts方法問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。