回答

两种插件

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>

css

.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
  });
  }

})

1效果

再来一个折线图

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

js

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

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


  },
  onShow:function(){
    var windowWidth = 320;
  try {
   var res = wx.getSystemInfoSync();
   windowWidth = res.windowWidth;
  } catch (e) {
   console.error('getSystemInfoSync failed!');
  }
  yuelineChart = new wxCharts({ //当月用电折线图配置
   canvasId: 'yueEle',
   type: 'line',
   categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], //categories X轴
   animation: true,
   series: [{
    name: 'A',
    data: [1, 6, 9, 1, 0, 2, 9, 2, 8, 6, 0, 9, 8, 0, 3, 7, 3, 9, 3, 8, 9, 5, 4, 1, 5, 8, 2, 4, 9, 8, 7],
    format: function (val, name) {
     return val + '';
    }
   }, {
    name: 'B',
    data: [0, 6, 2, 2, 7, 6, 2, 5, 8, 1, 8, 4, 0, 9, 7, 2, 5, 2, 8, 2, 5, 2, 9, 4, 4, 9, 8, 5, 5, 5, 6],
    format: function (val, name) {
     return val + '';
    }
   },
   ],
   xAxis: {
    disableGrid: true
   },
   yAxis: {
    title: '数值',
    format: function (val) {
     return val;
    },
    max: 20,
    min:-5
   },
   width: windowWidth,
   height: 200,
   dataLabel: false,
   dataPointShape: true,
   extra: {
    lineStyle: 'curve'
   }
  });
  }
})

2.echarts for weixin

github地址：https://github.com/ecomfe/echarts-for-weixin

这是echarts的微信小程序版本，用法与echarts相似，只要引入echarts的组件即可调用，option的设置是一样的。

使用：

1、下载源码

2、创建图表

首先，在 pages/bar 目录下新建以下几个文件：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 'pages/bar/index'。

index.json 配置如下：

{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}

这一配置的作用是，允许我们在 pages/bar/index.wxml 中使用 <ec-canvas> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。

index.wxml 中，我们创建了一个 <ec-canvas> 组件，内容如下：

<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

注意此处的 .container，新建小程序项目后，其中 app.wxss 中默认自动生成的此 class 与本 demo 中的可能不一致，导致图表不能正常显示，只显示空白。请注意参考 app.wxss 修改样式，保证图表的初始化的时候是有宽度和高度的。

其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下：

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见 ECharts 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。