小程序图表绘制库

转载

mob604756edd67c 2020-02-07 15:05:00

第一个比较全，功能强，但是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
    });


  }