微信小程序图表插件wxcharts使用

参考地址:https://github.com/xiaolin3303/wx-charts/issues/58
1.先看效果,如果是想要的在继续
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

2.wxml 一些案例

<!--pages/wxcharts/wxcharts.wxml-->
<canvas canvas-id="pieCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="ringCanvas" disable-scroll="true" class="canvas canvas2"></canvas>
<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="areaCanvas" disable-scroll="true" class="canvas"></canvas>
<canvas canvas-id="radarCanvas" disable-scroll="true" class="canvas canvas2"></canvas>

3.wxss 大小空间限制

/* pages/wxcharts/wxcharts.wxss */
.canvas {
    width: 750rpx;
    height: 500rpx;
}
.canvas2{
  height: 400rpx;
} 

4.js与js插件导入(须自己下载wxcharts.js,可前往https://github.com/xiaolin3303/wx-charts/tree/master/dist,下载)

// pages/wxcharts/wxcharts.js
 
//首先引入wxcharts.js插件
var wxCharts = require("../wxcharts.js");
//定义记录初始屏幕宽度比例,便于初始化
var windowW=0;
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
  
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
    // 屏幕宽度
    this.setData({
      imageWidth: wx.getSystemInfoSync().windowWidth
    }) ;
    console.log(this.data.imageWidth) ;
 
    //计算屏幕宽度比列
    windowW = this.data.imageWidth/375;
    console.log(windowW);
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
    // pieCanvas
    new wxCharts({
      animation: true, //是否有动画
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }],
      width: (375 * windowW),
      height: (250 * windowW),
      dataLabel: true,
    });
 
    // ringCanvas
    new wxCharts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 25,
        pie: {
          offsetAngle: -45
        }
      },
      title: {
        name: '70%',
        color: '#7cb5ec',
        fontSize: 25
      },
      subtitle: {
        name: '收益率',
        color: '#666666',
        fontSize: 15
      },
      series: [{
        name: '成交量1',
        data: 15,
        stroke: false
      }, {
        name: '成交量2',
        data: 35,
        stroke: false
      }, {
        name: '成交量3',
        data: 78,
        stroke: false
      }, {
        name: '成交量4',
        data: 63,
        stroke: false
      }],
      disablePieStroke: true,
      width: (375 * windowW),
      height: (200 * windowW),
      dataLabel: false,
      legend: false,
      padding: 0
    });
 
    //lineCanvas
    new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: ['2016-1', '2017-1', '2018-1', '2019-1', '2020-1', '2021-1', '2022-1', '2023-1', '2024-1', '2025-1', '2026-1'],
      animation: true,
      background: '#f5f5f5',
      series: [{
        name: '成交量1',
        data: [16, 12, 15, 11, 13, 17, 18, 16, 15, 14],
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0
      },
      width: (375 * windowW),
      height: (200 * windowW),
      dataLabel: false,
      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });
 
    //columnCanvas
    new wxCharts({
      canvasId: 'columnCanvas',
      type: 'column',
      animation: true,
      categories: [2001,2002,2003,2004,2005],
      series: [{
        name: '成交量',
        data: [15.00,20.00,45.00,37.00],
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量',
        data: [6.00, 9.00, 20.00, 45.00],
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        },
        title: 'hello',
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration'
      },
      extra: {
        column: {
          width: 15
        }
      },
      width: (375 * windowW),
      height: (200 * windowW),
    });
 
    //areaCanvas
    new wxCharts({
      canvasId: 'areaCanvas',
      type: 'area',
      categories: ['1', '2', '3', '4', '5', '6'],
      animation: true,
      series: [{
        name: '成交量1',
        data: [32, 45, 0, 56, 33, 34],
        format: function (val) {
          return val.toFixed(2) + '万';
        }
      }, {
        name: '成交量2',
        data: [15, 20, 45, 37, 4, 80],
        format: function (val) {
          return val.toFixed(2) + '万';
        },
      }],
      yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
          return val.toFixed(2);
        },
        min: 0,
        fontColor: '#8085e9',
        gridColor: '#8085e9',
        titleFontColor: '#f7a35c'
      },
      xAxis: {
        fontColor: '#7cb5ec',
        gridColor: '#7cb5ec'
      },
      extra: {
        legendTextColor: '#cb2431'
      },
      width: (375 * windowW),
      height: (200 * windowW),
    });
 
    //radarCanvas
    new wxCharts({
      canvasId: 'radarCanvas',
      type: 'radar',
      categories: ['1', '2', '3', '4', '5', '6'],
      series: [{
        name: '成交量1',
        data: [90, 110, 125, 95, 87, 122]
      }],
      width: (375 * windowW),
      height: (200 * windowW),
      extra: {
        radar: {
          max: 50
        }
      }
    });
 
  },
})

5.部分参数说明

参数类型说明
opts.canvasIdString required微信小程序canvas-id
opts.widthNumber requiredcanvas宽度,单位为px
opts.heightNumber requiredcanvas高度,单位为px
opts.titleObject(only for ring chart)
opts.title.nameString标题内容
opts.title.fontSizeNumber标题字体大小
opts.title.colorString标题颜色可选
opts.legendBoolen default true是否显示图标下方的标识
opts.typeString required图表类型:pie,line,column,area,ring
opts.categoriesArray required(饼图、圆环图不需要) 数据类别分类
opts.dataLabelBoolean default true是否在图表中显示数据内容值
opts.dataPointShapeBoolean default true是否在图表中显示数据点标识
opts.xAxisObjectX轴配置
opts.yAxisObjectY轴配置

6.说明
(1)推荐地址:https://github.com/xiaolin3303/wx-charts

(2)案例参考地址:https://github.com/xiaolin3303/wx-charts/issues/58

感觉有帮助的话,给个赞吧!

  • 8
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值