微信小程序如何显示图表？

两种插件

1、wx-charts

github地址：https://github.com/xiaolin3303/wx-charts

支持的图表类型有：

饼图 pie

圆环图 ring

线图 line

柱状图 column

区域图 area

雷达图 radar

用法：

下载图表插件：https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js

把这个js问文件放大在小程序utils目录

wxml

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

.canvas {
    width: 750rpx;
    height: 500rpx;
}

js

var wxCharts = require("../../utils/wxcharts.js");//相对路径
Page({

  data:{
    imageWidth:0
  },
  onLoad:function(){


  },
  onShow:function(){
    new wxCharts({
      canvasId: 'columnCanvas',
      type: 'column',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
          name: '成交量1',
          data: [15, 20, 45, 37, 4, 80]
      }],
      yAxis: {
          format: function (val) {
              return val + '万';
          },
          /*max:400,
          min:0*/
      },
      width: 320,
      height: 200
  });
  }

})

再来一个折线图

<canvas
 style="width: 400px; height: 500px;"
 canvas-id="yueEle"
 binderror="canvasIdErrorCallback"
></canvas>

var wxCharts = require("../../utils/wxcharts.js");
var yuelineChart=null;
Page({

  data:{
    imageWidth:0
  },
  onLoad:function(){

...

点击查看剩余70%