小程序图表绘制库

2023-10-27 22:14:40

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

小程序图表绘制库

码农公寓

相关文章