ウィジェットのグラフライブラリ

1. EChartsのWeChatウィジェットバージョン(echarts-for-weixin) )
 https://github.com/ecomfe/echarts-for-weixin
 
2.wx-charts  (https://github.com/xiaolin3303/wx-charts )
 
一つ目は全部で、機能は強いですが、700 kbはちょっと大きいです.二つ目は一つのjsファイルを導入するだけでいいです.もっと小さいのは30 kbです. 
 
次は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')//グラフライブラリの描画
次にon Showで呼び出します.
this.runLline Canva()//歩数曲線図の描画
 
 
 
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