這篇文章跟大家分享一些微信小程式中使用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>
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() { } });
.container{ width: 100%; height: 100vw; } ec-canvas { width: 100%; height: 100%; }
以上是微信小程式中echarts的用法和可能遇見的坑,快來收藏避雷! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!