小程序圖表插件

 

最近做小程序需要統計一些數據，需要用到圖表插件，所有在網上找了找，找到了wx-charts這個插件，看着挺好用的，和jq的echarts類似，所有選擇用這個插件來畫圖表，wx-charts是基於canvas繪制，體積小巧，支持的比較多，有餅圖、圓環圖、線圖、柱狀圖、區域圖、雷達圖。

1、首先在https://github.com/xiaolin3303/wx-charts.git下載wx-charts插件，里面dist文件夾里有一個wxcharts.js和wxcharts-min.js兩個文件，使用哪一個都行，放在自己項目的utils文件夾下

2、在需要使用的頁面js中引入插件

let Charts = require('../../../utils/wxcharts.js');   //引入wxChart文件

3、在wxml文件中定義canvas，注意：canvas-id與js當中的new Charts選項當中的canvasId必須要一致才行

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

參數說明：https://github.com/xiaolin3303/wx-charts/issues/56

opts Object

opts.canvasId String required 微信小程序canvas-id

opts.width Number required canvas寬度，單位為px

opts.height Number required canvas高度，單位為px

opts.background String canvas背景顏色（如果頁面背景顏色不是白色請設置為頁面的背景顏色，默認#ffffff）

opts.enableScroll Boolean 是否開啟圖表可拖拽滾動 默認false 支持line, area圖表類型(需配合綁定scrollStart, scroll, scrollEnd方法)

opts.title Object (only for ring chart)

opts.title.name String 標題內容

opts.title.fontSize Number 標題字體大小（可選，單位為px）

opts.title.color String 標題顏色（可選）

opts.title.offsetX Number 標題橫向位置偏移量，單位px，默認0

opts.subtitle Object (only for ring chart)

opts.subtitle.name String 副標題內容

opts.subtitle.offsetX Number 副標題橫向位置偏移量，單位px，默認0

opts.subtitle.fontSize Number 副標題字體大小（可選，單位為px）

opts.subtitle.color String 副標題顏色（可選）

opts.animation Boolean default true 是否動畫展示

opts.legend Boolen default true 是否顯示圖表下方各類別的標識

opts.type String required 圖表類型，可選值為pie, line, column, area, ring, radar

opts.categories Array required (餅圖、圓環圖不需要) 數據類別分類

opts.dataLabel Boolean default true 是否在圖表中顯示數據內容值

opts.dataPointShape Boolean default true 是否在圖表中顯示數據點圖形標識

opts.disablePieStroke Boolean default false 不繪制餅圖（圓環圖）各區塊的白色分割線

opts.xAxis Object X軸配置

opts.xAxis.gridColor String 例如#7cb5ec default #cccccc X軸網格顏色

opts.xAxis.fontColor String 例如#7cb5ec default #666666 X軸數據點顏色

opts.xAxis.disableGrid Boolean default false 不繪制X軸網格

opts.xAxis.type String 可選值calibration(刻度) 默認為包含樣式

opts.yAxis Object Y軸配置

opts.yAxis.format Function 自定義Y軸文案顯示

opts.yAxis.min Number Y軸起始值

opts.yAxis.max Number Y軸終止值

opts.yAxis.title String Y軸title

opts.yAxis.gridColor String 例如#7cb5ec default #cccccc Y軸網格顏色

opts.yAxis.fontColor String 例如#7cb5ec default #666666 Y軸數據點顏色

opts.yAxis.titleFontColor String 例如#7cb5ec default #333333 Y軸title顏色

opts.yAxis.disabled Boolean default false 不繪制Y軸

opts.extra Object 其他非通用配置項

opts.extra.ringWidth Number ringChart圓環寬度，單位為px

opts.extra.lineStyle String (僅對line, area圖表有效) 可選值：curve曲線，straight直線 (default)

opts.extra.column Object 柱狀圖相關配置

opts.extra.column.width Number 柱狀圖每項的圖形寬度，單位為px

opts.extra.legendTextColor String 例如#7cb5ec default #cccccc legend文案顏色

opts.extra.radar Object 雷達圖相關配置

opts.extra.radar.max Number, 默認為series data的最大值，數據區間最大值，用於調整數據顯示的比例

opts.extra.radar.labelColor String, 默認為#666666, 各項標識文案的顏色

opts.extra.radar.gridColor String, 默認為#cccccc, 雷達圖網格顏色

opts.extra.pie Object 餅圖、圓環圖相關配置

opts.extra.pie.offsetAngle Number, 默認為0, 起始角度偏移度數，順時針方向，起點為3點鍾位置（比如要設置起點為12點鍾位置，即逆時針偏移90度，傳入-90即可）

opts.series Array required 數據列表

數據列表每項結構定義

dataItem Object

dataItem.data Array required (餅圖、圓環圖為Number) 數據，如果傳入null圖表該處出現斷點

dataItem.color String 例如#7cb5ec 不傳入則使用系統默認配色方案

dataItem.name String 數據名稱

dateItem.format Function 自定義顯示數據內容

方法事件 https://github.com/xiaolin3303/wx-charts/issues/57

updateData(data) 更新圖表數據，data: object，data.categories(可選，具體見參數說明)，data.series(可選，具體見參數說明)，data.title(可選，具體見參數說明)，data.subtitle(可選，具體見參數說明)

stopAnimation() 停止當前正在進行的動畫效果，直接展示渲染的最終結果

addEventListener(type, listener) 添加事件監聽，type: String事件類型，listener: function 處理方法

getCurrentDataIndex(e) 獲取圖表中點擊時的數據序列編號(-1表示未找到對應的數據區域), e: Object微信小程序標准事件，需要手動的去綁定touch事件，具體可參考wx-charts-demo中column圖示例

showToolTip(e, options?) 圖表中展示數據詳細內容(目前僅支持line和area圖表類型)，e: Object微信小程序標准事件，options: Object可選，tooltip的自定義配置，支持option.background，默認為#000000; option.format, function類型，接受兩個傳入的參數，seriesItem(Object, 包括seriesItem.name以及seriesItem.data)和category，可自定義tooltip顯示內容。具體可參考wx-charts-demo中line圖示例

scrollStart(e), scroll(e), scrollEnd(e)設置支持圖表拖拽系列事件(支持line, area, column)，具體參考wx-charts-demo中ScrollLine圖示例

4、wx-charts圖表插件示例（在js文件的onload方法中寫即可）

餅圖pie chart

var Charts = require('charts.js');
new Charts({
    canvasId: 'pieCanvas',
    type: 'pie',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 640,
    height: 400,
    dataLabel: false
});

線圖line chart

new Charts({
    canvasId: 'lineCanvas',
    type: 'line',
    categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
    series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + '萬';
        }
    }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
            return val.toFixed(2) + '萬';
        }
    }],
    yAxis: {
        title: '成交金額 (萬元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 640,
    height: 400
});

柱狀圖columnChart

new Charts({
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: '成交量3',
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: '成交量4',
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + '萬';
        }
    },
    width: 640,
    height: 400,
    dataLabel: false
});

區域圖areaChart

new Charts({
    canvasId: 'areaCanvas',
    type: 'area',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
    series: [{
        name: '成交量1',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
            return val.toFixed(2) + '萬';
        }
    }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
            return val.toFixed(2) + '萬';
        }
    }],
    yAxis: {
        format: function (val) {
            return val + '萬';
        }
    },
    width: 640,
    height: 400
});

雷達圖radar Chart

new wxCharts({
   canvasId: 'radarCanvas',
    type: 'radar',
    categories: ['1', '2', '3', '4', '5', '6'],
    series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
    }],
    width: windowWidth,
    height: 200,
    extra: {
        radar: {
            max: 150
        }
    }
});

下面是自己項目中的代碼，先上效果圖

wxml

<!-- 折線區域 -->
<view class='chart'>
  <!-- 圖形 -->
  <view class='chart-info'>
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
  </view>
  <!-- 折線圖統計最近六個月家長給教師的好評情況 -->
</view>

wxss

/* 折線 */
.chart{
  width: 95%;
  height: 550rpx;
  margin: 0 auto;
  padding-top: 50rpx;
  background: #fff;
}

.chart-info{
  height: 500rpx;
}

.canvas {
    width: 380px;
    height: 400px;
}

js

let Charts = require('../../../utils/wxcharts.js');   //引入wxChart文件
var app = getApp();
var lineChart = null;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    date:''
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    //獲取系統當前時間
    let that = this
    var myDate = new Date();
    var date = myDate.toLocaleDateString();
    console.log(date)
    that.setData({
      date: date,  //選擇時間
    })

    // 折線圖
    var windowWidth = '', windowHeight = '';    //定義寬高
    try {
      var res = wx.getSystemInfoSync();    //試圖獲取屏幕寬高數據
      windowWidth = res.windowWidth / 750 * 700   //以設計圖750為主進行比例算換
      windowHeight = res.windowWidth / 750 * 500    //以設計圖750為主進行比例算換
    } catch (e) {
      console.error('getSystemInfoSync failed!');   //如果獲取失敗
    }

    lineChart = new Charts({
      canvasId: 'lineCanvas',
      type: 'line',
      animation: true,  //是否開啟動畫
      categories: ['06', '07', '08', '09', '10', '11', '12'],
      series: [{
        name: '月教師好評情況',
        data: [15, 20, 45, 37, 40, 80, 25],
        format: function (val) {
          return val.toFixed(2) + '分';
        }
      }],
      xAxis: {   //是否隱藏x軸分割線
        disableGrid: true,
      },
      yAxis: {
        title: '教師好評總分數',
        format: function (val) {
          return val.toFixed(2);
        },
      },
      width: windowWidth, //圖表展示內容寬度
      height: windowHeight, //圖表展示內容高度
      dataLabel: true,    //是否在圖表上直接顯示數據
      dataPointShape: true, //是否在圖標上顯示數據點標志
      extra: {  
        lineStyle: 'curve'  //曲線
      },
    });
  },
  /**
   * 點擊數據點顯示對應的數據
   */
  touchHandler: function (e) {
    lineChart.showToolTip(e, {
      // background: '#7cb5ec',
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },

})

這些都是自己參考網上整理出來的，希望對大家有所幫助