在微信小程序中使用圖表的方法示例

更新時(shí)間：2019年04月25日 14:12:56 作者：兔子先生i

這篇文章主要介紹了在微信小程序中使用圖表的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言：網(wǎng)上有許多的圖表庫(kù)，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。

這次我們使用的是：Echarts

官方教程：點(diǎn)擊查看

Echarts下載地址：飛機(jī)直達(dá)

1.下載好之后，把里面的ec-canvas文件夾復(fù)制到項(xiàng)目中，如：在項(xiàng)目中建立一個(gè)文件夾component ，然后把ec-canvas放到component文件夾里面。

2.在pages中新建一個(gè)頁(yè)面，我這邊建立了一個(gè)echarsDemo頁(yè)面，然后在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({

 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  ec:{
   onInit:initChart
  }
 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
  */
 onShow: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
  */
 onUnload: function () {

 },

 /**
  * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 頁(yè)面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {

 },

 /**
  * 用戶點(diǎn)擊右上角分享
  */
 onShareAppMessage: function () {

 }
})

效果圖