前言：網(wǎng)上有許多的圖表庫，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。
這次我們使用的是：Echarts
官方教程：點(diǎn)擊查看
Echarts下載地址：飛機(jī)直達(dá)
1.下載好之后，把里面的ec-canvas文件夾復(fù)制到項目中，如：在項目中建立一個文件夾component ，然后把ec-canvas放到component文件夾里面。
2.在pages中新建一個頁面，我這邊建立了一個echarsDemo頁面，然后在echarsDemo目錄中的index.json文件中引入圖表組件，代碼如下：
{ "usingComponents":{ "ec-canvas":"../../component/ec-canvas/ec-canvas" }}3.index.wxml代碼 (注意一定要給ec-canvas 設(shè)定寬高)
<view class="container"> <ec-canvas id="mychart-dom-bar" style="width:100%;height:300px;" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas></view>4.index.js代碼
import * as echarts from '../../component/ec-canvas/echarts';function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); //這里復(fù)制了官方示例配置 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; chart.setOption(option); return chart;}Page({ /** * 頁面的初始數(shù)據(jù) */ data: { ec:{ onInit:initChart } }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }})效果圖
總結(jié)：因為也是第一接觸Echarts時，遇到了一個小坑，忘記給ec-canvas設(shè)置寬高了，導(dǎo)致頁面空白。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
