基于wxcharts绘制报表

于 2019-07-29 10:38:24 发布
阅读量1.3k 收藏 10
点赞数 4
分类专栏： 微信小程序
本文介绍微信小程序图表插件wx-charts的使用方法，包括饼图、线图、柱状图、区域图等图表类型的绘制，并提供代码示例，帮助开发者快速上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

微信小程序图表插件（wx-charts）是基于canvas绘制，体积小巧，支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制，目前wx-charts是微信小程序图表插件中比较强大好使的一个。

如上图所示，我们基于wxcharts.js 来实现订单统计报表。

导入wxcharts.js

3.pic.jpg

将wxcharts.js 存放在utils目录

column.wxml

<view class="container">
        <!--标题-->
    <view class="title">
        {{chartTitle}}
    </view>
    <!--绘制canvas-->
    <canvas canvas-id="columnCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
</view>

coumn.js

引入wxcharts.js

var wxCharts = require('../../../utils/wxcharts.js');

初始化数据

var app = getApp();
var columnChart = null;
var chartData = {
    main: {
        title: '订单统计',
        data: [23, 28, 35, 54, 95],
        categories: ['2013', '2014', '2015', '2016', '2017']
    }    
};

加载报表数据

Page({
    data: {
        chartTitle: '总订单',
        isMainChartDisplay: true
    },
    onReady: function (e) {
        var windowWidth = 320;
        try {
          var res = wx.getSystemInfoSync();
          windowWidth = res.windowWidth;
        } catch (e) {
          console.error('getSystemInfoSync failed!');
        }

        columnChart = new wxCharts({
            canvasId: 'columnCanvas',
            type: 'column',
            animation: true,
            categories: chartData.main.categories,
            series: [{
                name: '订单量',
                color:'#188df0',
                data: chartData.main.data,
                format: function (val, name) {
                    return val.toFixed(2) + '万';
                }
            }],
            yAxis: {
                format: function (val) {
                    return val + '万';
                },
                min: 0
            },
            xAxis: {
                disableGrid: false,
                type: 'calibration'
            },
            extra: {
                column: {
                    width: 15,
                },
                legendTextColor: '#000000'
            },
            width: windowWidth,
            height: 200,
        });
    }
});

直接copy以上代码就可以查看效果哦~~~

wx-charts更多特性

支持报表类型

  1. 饼图 pie
  2. 圆环图 ring
  3. 线图 line
  4. 柱状图 column
  5. 区域图 area
  6. 雷达图 radar

参数说明

opts                         Object
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            标题字体大小（可选，单位为px）
opts.title.color             String           标题颜色（可选）
opts.subtitle                Object         (only for ring chart)
opts.subtitle.name           String           副标题内容
opts.subtitle.fontSize       Number          副标题字体大小（可选，单位为px）
opts.subtitle.color          String          副标题颜色（可选）
opts.animation               Boolean default true         是否动画展示
opts.legend                  Boolen default true       是否显示图表下方各类别的标识
opts.type                    String required 图表类型，可选值为pie, line, column, area……
opts.categories              Array required       (饼图、圆环图不需要) 数据类别分类
opts.dataLabel               Boolean default true     是否在图表中显示数据内容值
opts.dataPointShape          Boolean default true   是否在图表中显示数据点图形标识
opts.xAxis                   Object       X轴配置
opts.xAxis.disableGrid       Boolean default false      不绘制X轴网格
opts.yAxis                   Object    Y轴配置
opts.yAxis.format            Function           自定义Y轴文案显示
opts.yAxis.min               Number        Y轴起始值
opts.yAxis.max               Number           Y轴终止值
opts.yAxis.title             String       Y轴title
opts.yAxis.disabled          Boolean default false        不绘制Y轴
opts.series                  Array required        数据列表

结构定义

dataItem                      Object
dataItem.data                 Array required (饼图、圆环图为Number) 数据
dataItem.color                String 例如#7cb5ec 不传入则使用系统默认配色方案
dataItem.name                 String 数据名称
dateItem.format               Function 自定义显示数据内容

饼图pie chart

复制代码

var Charts = require('charts.js');
new Charts({
    canvasId: 'pieCanvas',
    type: 'pie',
    series: [{
        name: '成交量1',
        data: 15,
    }, {
        name: '成交量2',
        data: 35,
    }, {
        name: '成交量3',
        data: 78,
    }, {
        name: '成交量4',
        data: 63,
    }],
    width: 640,
    height: 400,
    dataLabel: false
});

复制代码

线图line chart

复制代码

new Charts({
    canvasId: 'lineCanvas',
    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: 640,
    height: 400
});

复制代码

柱状图columnChart

复制代码

new Charts({
    canvasId: 'columnCanvas',
    type: 'column',
    categories: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017'],
    series: [{
        name: '成交量1',
        data: [15, 20, 45, 37, 4, 80]
    }, {
        name: '成交量2',
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: '成交量3',
        data: [70, 40, 65, 100, 34, 18]
    }, {
        name: '成交量4',
        data: [70, 40, 65, 100, 34, 18]
    }],
    yAxis: {
        format: function (val) {
            return val + '万';
        }
    },
    width: 640,
    height: 400,
    dataLabel: false
});

复制代码

区域图areaChart

复制代码

new Charts({
    canvasId: 'areaCanvas',
    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: 640,
    height: 400
});

复制代码

雷达图radar Chart

复制代码

new wxCharts({
   canvasId: 'radarCanvas',
    type: 'radar',
    categories: ['1', '2', '3', '4', '5', '6'],
    series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
    }],
    width: windowWidth,
    height: 200,
    extra: {
        radar: {
            max: 150
        }
    }
});

复制代码

下面是自己项目中的代码，先上效果图

wxml

<!-- 折线区域 -->
<view class='chart'>
  <!-- 图形 -->
  <view class='chart-info'>
    <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
  </view>
  <!-- 折线图统计最近六个月家长给教师的好评情况 -->
</view>

 

wxss

 

/* 折线 */
.chart{
  width: 95%;
  height: 550rpx;
  margin: 0 auto;
  padding-top: 50rpx;
  background: #fff;
}

.chart-info{
  height: 500rpx;
}

.canvas {
    width: 380px;
    height: 400px;
}

 

js

 

let Charts = require('../../../utils/wxcharts.js');   //引入wxChart文件
var app = getApp();
var lineChart = null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    date:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取系统当前时间
    let that = this
    var myDate = new Date();
    var date = myDate.toLocaleDateString();
    console.log(date)
    that.setData({
      date: date,  //选择时间
    })

    // 折线图
    var windowWidth = '', windowHeight = '';    //定义宽高
    try {
      var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据
      windowWidth = res.windowWidth / 750 * 700   //以设计图750为主进行比例算换
      windowHeight = res.windowWidth / 750 * 500    //以设计图750为主进行比例算换
    } catch (e) {
      console.error('getSystemInfoSync failed!');   //如果获取失败
    }

    lineChart = new Charts({
      canvasId: 'lineCanvas',
      type: 'line',
      animation: true,  //是否开启动画
      categories: ['06', '07', '08', '09', '10', '11', '12'],
      series: [{
        name: '月教师好评情况',
        data: [15, 20, 45, 37, 40, 80, 25],
        format: function (val) {
          return val.toFixed(2) + '分';
        }
      }],
      xAxis: {   //是否隐藏x轴分割线
        disableGrid: true,
      },
      yAxis: {
        title: '教师好评总分数',
        format: function (val) {
          return val.toFixed(2);
        },
      },
      width: windowWidth, //图表展示内容宽度
      height: windowHeight, //图表展示内容高度
      dataLabel: true,    //是否在图表上直接显示数据
      dataPointShape: true, //是否在图标上显示数据点标志
      extra: {  
        lineStyle: 'curve'  //曲线
      },
    });
  },
  /**
   * 点击数据点显示对应的数据
   */
  touchHandler: function (e) {
    lineChart.showToolTip(e, {
      // background: '#7cb5ec',
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },

})

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值