小程序圖表繪制庫

1. ECharts 的微信小程序版本 （echarts-for-weixin ）

 https://github.com/ecomfe/echarts-for-weixin

 

2.wx-charts  （https://github.com/xiaolin3303/wx-charts ）

 

第一個比較全，功能強，但是700kb有些大；第二個，只用引入一個js文件就可以了，小一點30kb. 

 

下面是一個 wx-charts的例子；

wxss:

/*步數曲線框開始*/
.run_charts_box{
  box-sizing: border-box;
  width: 100%;
  height: 500rpx;
}
.canvas {
  width: 100%;
  height: 180px;
}
/*步數曲線框結束*/

wxml:

  <!--微信步數曲線圖繪制-->
  <view class="run_charts_box">
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>
  </view>

js:

  /**
   * 步數曲線繪制
   */
  runLlineCanva:function(){
    let windowWidth = 320;
    try {
      let res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      // do something when get system info failed
    }
    new Charts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '每日步數',
        data: [2, 1000, 5000, 2562, 50000, 100],
        format: function (val) {
          return val + '步';
        }
      }],
      yAxis: {
        //title: '步數',
        format: function (val) {
          return val;
        },
        min: 0
      },
      width: windowWidth - 10,       //canvas寬度，單位為px
      height: 180,               //canvas高度，單位為px   
      dataLabel: true,         //是否在圖表中顯示數據內容值
      legend: false,            //是否顯示圖表下方各類別的標識
      background: '#f5f5f5',
      padding: 0
    });


  }

 

 

把wxcharts-min.js復制到，utils文件夾中，

在頁面js文件最上面引入庫： let Charts = require('../../../utils/wxcharts-min.js');//繪制圖表庫

然后再onShow中調用：

this.runLlineCanva();//步數曲線圖繪制

 

 

 

ECharts的參考文章：

https://github.com/ecomfe/echarts-for-weixin

https://cloud.tencent.com/developer/article/1450181

https://www.jb51.net/article/163896.htm

 

wx-charts的參考文章：

https://github.com/xiaolin3303/wx-charts

https://www.cnblogs.com/dudu123/p/10400806.html

https://www.cnblogs.com/zxf100/p/9956415.html