在微信小程序中使用圖表

前言：網上有許多的圖表庫，如：Echarts、Tau Charts、ChartJS等等，具體自行百度。

這次我們使用的是：Echarts 

官方教程：點擊查看

Echarts下載地址：飛機直達

 

1.下載好之后，把里面的ec-canvas文件夾復制到項目中，如：在項目中建立一個文件夾component ，然后把ec-canvas放到component文件夾里面。

 

 

2.在pages中新建一個頁面，我這邊建立了一個echarsDemo頁面，然后在echarsDemo目錄中的index.json文件中引入圖表組件，代碼如下：

{
  "usingComponents":{
    "ec-canvas":"../../component/ec-canvas/ec-canvas"
  }
}

 

 

3.index.wxml代碼  (注意一定要給ec-canvas 設定寬高)

<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);

  //這里復制了官方示例配置
  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({

  /**
   * 頁面的初始數據
   */
  data: {
    ec:{
      onInit:initChart
    }
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  }
})

 

 

效果圖

 

總結：因為也是第一接觸Echarts時，遇到了一個小坑，忘記給ec-canvas設置寬高了，導致頁面空白。