微信小程序-wx-charts 图表插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/83069096

微信小程序图表插件（wx-charts）基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制。

支持图标类型

• 饼图 pie
• 圆环图 ring
• 线图 line
• 柱状图 column
• 区域图 area
• 雷达图 radar

1.如何使用？

下载wxcharts-min.js或者wxcharts.js，存放在小程序文件夹目录，我一般存放在utils文件夹下面

.wxml页面中：

 <canvas class="canvas" canvas-id="radarGraph"></canvas>

2.部分参数说明

参数	类型	说明
opts.canvasId	String required	微信小程序canvas-id
opts.width	Number required	canvas宽度，单位为px
opts.height	Number required	canvas高度，单位为px
opts.title	Object	（only for ring chart)
opts.title.name	String	标题内容
opts.title.fontSize	Number	标题字体大小
opts.title.color	String	标题颜色可选
opts.legend	Boolen default true	是否显示图标下方的标识
opts.type	String required	图表类型：pie,line,column,area,ring
opts.categories	Array required	(饼图、圆环图不需要) 数据类别分类
opts.dataLabel	Boolean default true	是否在图表中显示数据内容值
opts.dataPointShape	Boolean default true	是否在图表中显示数据点标识
opts.xAxis	Object	X轴配置
opts.yAxis	Object	Y轴配置

            



 

扫描二维码关注公众号，回复： 3660727 查看本文章

3.简单的示例

wxml页面：

<!--pages/charts/charts.wxml-->
<!-- 切换栏 -->
<view class="swiper-tab">
  <block wx:for="{{swipertab}}" wx:key="sptab">
    <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
  </block>
</view>

<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[0].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="barGraph"></canvas>
    </scroll-view>
  </swiper-item>
  
  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[1].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="lineGraph"></canvas>
    </scroll-view>
  </swiper-item>

  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[2].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="pieGraph"></canvas>
    </scroll-view>
  </swiper-item>
  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[4].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="areaGraph"></canvas>
    </scroll-view>
  </swiper-item>

  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[3].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="ringGraph"></canvas>
    </scroll-view>
  </swiper-item>

  <swiper-item>
    <scroll-view class="chart-box" scroll-y="true">
      <view class="title">
        <text>{{swipertab[5].name}}图</text>
      </view>
      <canvas class="canvas" canvas-id="radarGraph"></canvas>
    </scroll-view>
  </swiper-item>

</swiper>

对应的wxss中：

/* pages/charts/charts.wxss */

.swiper-tab {
  height: 40px;
  line-height: 40px;
  background: #1b82d1;
  color: rgba(255, 255, 255, 1);
  display: flex;
  position: relative;
  z-index: 2;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.swiper-tab-list {
  margin: 0 10px;
  padding: 0 4px;
  font-size: 15px;
}

.on {
  border-bottom:3px solid #fff;
  color: #fff;
}

.title {
  padding: 10rpx 0 10rpx 20rpx;
  background-color: #fff;
}

.title text {
  border-left: 2px solid #1b82d1;
  padding-left: 20rpx;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

swiper-item scroll-view {
  height: 100%;
}

scroll-view .canvas {
  width: 100%;
  height: 100%;
  margin-top: 20rpx;
}

对应的js中：

var _wxcharts = require('../../utils/wxcharts.js')

Page({
  data: {
    currtab: 0,
    swipertab: [{ name: '条形', index: 0 }, { name: '折线', index: 1 }, { name: '饼', index: 2 }, { name: '环形', index: 4 }, { name: '区域', index: 3 }, { name: '雷达', index: 5 }]
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
    this.getDeviceInfo()
    this.graphShow()
  },

  /**
   * @Explain：获取设备信息
   */
  getDeviceInfo: function () {
    let that = this
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          deviceW: res.windowWidth,
          deviceH: res.windowHeight
        })
      }
    })
  },

  /**
   * @Explain：选项卡切换
   */
  tabChange: function (e) {
    this.setData({ currtab: e.detail.current })
    this.graphShow()
  },

  /**
   * @Explain：选项卡点击切换
   */
  tabSwitch: function (e) {
    var that = this
    if (this.data.currtab === e.target.dataset.current) {
      return false
    } else {
      that.setData({
        currtab: e.target.dataset.current
      })
    }
  },

  /**
   * @Explain：初始化静态图表
   */
  graphShow: function () {
    let that = this
    switch (this.data.currtab) {
      case 0:
        that.barShow()
        break
      case 1:
        that.lineShow()
        break
      case 2:
        that.pieShow()
        break
      case 3:
        that.areaShow()
        break
      case 4:
        that.ringShow()
        break
      case 5:
        that.radarShow()
        break
    }
  },

  pieShow: function () {
    let pie = {
      canvasId: 'pieGraph',
      type: 'pie',
      series: [{
        name: 'cat1',
        data: 50,
      }, {
        name: 'cat2',
        data: 30,
      }, {
        name: 'cat3',
        data: 1,
      }, {
        name: 'cat4',
        data: 1,
      }, {
        name: 'cat5',
        data: 46,
      }],
      width: 360,
      height: 300,
      dataLabel: true
    }
    new _wxcharts(pie)
  },

  barShow: function () {
    let bar = {
      canvasId: 'barGraph',
      type: 'column',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
      }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        }
      },
      width: 300,
      height:250
    }
    new _wxcharts(bar)
  },

  lineShow: function () {
    let line = {
      canvasId: 'lineGraph',
     
      type: 'line',
      categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
      series: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0
      },
      width: 320,
      height: 200
    }
    new _wxcharts(line)
  },
  
  ringShow: function() {
    let ring={
      canvasId: 'ringGraph',
      type: 'ring',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }, {
        name: '成交量4',
        data: 63,
      }],
      width: 320,
      height: 200,
      dataLabel: false
    }
    new _wxcharts(ring)
  },

  areaShow: function () {
    let area = {
      canvasId: 'areaGraph',
      type: 'area',
      categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
      series: [{
        name: '成交量1',
        data: [70, 40, 65, 100, 34, 18],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        }
      },
      width: 320,
      height: 200
    }
    new _wxcharts(area)
  },

  radarShow: function () {
    let radar={
      canvasId: 'radarGraph',
      type: 'radar',
      categories: ['1', '2', '3', '4', '5', '6'],
      series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
      }],
      width: 320,
      height: 200,
      extra: {
        radar: {
          max: 150
        }
      }
    }
    new _wxcharts(radar)

  }

})