這篇文章跟大家分享一些微信小程式中使用echarts的使用方法和問題總結,讓大家可避坑踩雷,希望能夠給大家提供幫助!
微信小程式的使用方法和一些避雷踩坑的問題,希望能夠給大家提供幫助
#下載網址:https://github.com/ecomfe/echarts- for-weixin
二、使用步驟
#1.引進專案依賴
將微信小程式版echarts 從github 上拉下來後,將檔案裡的ec-canvas 檔案複製一個到自己專案裡,實際上就是微信小程式版echarts 的依賴檔案。
【相關學習推薦:
小程式開發教學】
#2.介紹庫
在全域設定檔app.json 裡引入也可以,這樣就全部頁面通用,不用一個個頁面引入,當多個頁面使用echarts 時,比較方便
#在使用的echarts 的頁面的js 檔案中引入echarts ,引入的路徑根據自己的專案結構來引入使用方法wxml中使用元件
<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的用法和可能遇見的坑,快來收藏避雷! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!