微信小程式的使用方法和一些避雷踩坑的問題,希望能夠給大家提供幫助
下載地址:https://github.com/ecomfe/echarts-for-weixin
二、使用步驟
1.引入專案依賴
將微信小程式版 echarts 從 github 上拉下來後,將檔案裡的 ec-canvas 檔案複製一個到自己專案裡,實際就是微信小程式版 echarts 的依賴檔案。
【相關學習推薦:】
2.引入庫
在使用的 echarts 的頁面的 json 檔案中引入 echarts ,引入的路徑根據自己的專案結構來引入
在全域性組態檔 app.json 裡引入也可以,這樣就全部頁面通用,不用一個個頁面引入,當多個頁面使用 echarts 時,比較方便
在使用的 echarts 的頁面的 js 檔案中引入 echarts ,引入的路徑根據自己的專案結構來引入
使用方法
wxml中使用元件<ec-canvas>,id 和 canvas-id 都可以自行命名
<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view>
js 程式碼
關於 option 設定,可自行去官網看檔案或者參照範例,https://echarts.apache.org/zh/option.html#title
import * as echarts from '../../ec-canvas/echarts'; const app = getApp(); function initChart(canvas, width, height, dpr) { //主要是這個 echarts 的建立 const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); // option 的設定可以根據自己的需求去 echarts 官網檢視設定的屬性方法 var option = { backgroundColor: "#ffffff", series: [{ label: { normal: { fontSize: 14 } }, type: 'pie', center: ['50%', '50%'], radius: ['20%', '40%'], data: [{ value: 55, name: '北京' }, { value: 20, name: '武漢' }, { value: 10, name: '杭州' }, { value: 20, name: '廣州' }, { value: 38, name: '上海' }] }] }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } }, onReady() { } });
css 程式碼
.container{ width: 100%; height: 100vw; } ec-canvas { width: 100%; height: 100%; }
1、關於引入依賴,引入庫,按照官方的使用方法使用後,echarts 圖不顯示的問題
解決辦法:html在使用 echarts 時,外層包裹著的 view 標籤也要設定寬高 (官方的方法樣式裡沒有設定外層元素的寬高,在官方的範例中又可以顯示,這就誤導了很多人會掉坑)
2、關於 devicePixelRatio 的作用
可以看到官方程式碼裡初始建立 echarts 時,程式碼如下圖,當你設定了 devicePixelRatio 後,echarts的圖表在微信開發者工具中看到的 echarts 圖表畫素是很差的,用手機預覽的時候,是很清晰的,當把 devicePixelRatio 去掉後,微信開發者工具中看到的 echarts 圖表畫素變得很清晰,手機看到的是畫素變差了,所以這個應該是根據裝置的畫素單位來適配圖表的畫素吧
更多程式設計相關知識,請存取:!!
以上就是微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷!!的詳細內容,更多請關注TW511.COM其它相關文章!