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

最新推荐文章于 2024-04-13 21:51:32 发布

狼牙冷

最新推荐文章于 2024-04-13 21:51:32 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

分类专栏： WeChat 文章标签：小程序小程序图表 wecharts

本文链接：https://blog.youkuaiyun.com/jimolangyaleng/article/details/98655842

WeChat 专栏收录该内容

14 篇文章

订阅专栏

本文介绍微信小程序图表库wx-charts，它基于canvas，提供饼图、线图、柱状图等多种图表类型。该插件体积小，功能强大，是小程序开发中的理想选择。

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

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

支持图标类型

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

wxcharts.js下载地址

参数简介

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 自定义显示数据内容

使用方法：

WXML：

<view class="container">
  <view class="graph">
    <view class="title">原被告占比</view>
    <canvas canvas-id="canvas1" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
  </view>
  <view class="graph">
    <view class="title">诉讼执行占比</view>
    <canvas canvas-id="canvas2" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
  </view>
  <view class="graph">
    <view class="title">案由分布</view>
    <canvas canvas-id="canvas3" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
  </view>
  <view class="graph">
    <view class="title">案件数量分布趋势</view>
    <canvas canvas-id="canvas4" style="height:{{height}}px;width:{{windowWidth}}px;" ></canvas>
  </view>
</view>

// pages/enterpriseMatur/analyzeGraph/analyzeGraph.js
var wxCharts = require('../../../utils/wxcharts.js');
import request from '../../../utils/config.js';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    windowWidth: wx.getSystemInfoSync().windowWidth,
    height: wx.getSystemInfoSync().windowHeight / 2 - 44
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setChar1();
    this.setChar2();
    this.setChar3();
    this.setChar4();
  },

  //原被告占比
  setChar1: function (list) {
    let data = [
      {name:"原告",data:70,color:'#5DB1FF'},
      { name: "被告", data: 30,color:'#59D4D4' }
    ]
    // list.map((item) => {
    //   data.push({
    //     name: item.serviceFieldName,
    //     data: item.serviceDuration
    //   })
    // })
    new wxCharts({
      animation: true, //是否有动画
      canvasId: 'canvas1',
      type: 'pie',
      series: data,
      width: this.data.windowWidth,
      height: this.data.height,
      dataLabel: true,
    });
  },

 //诉讼执行占比
  setChar2: function (list) {
    let data = [
      { name: "民事案件", data: 70, color: '#72DADA' },
      { name: "执行案件", data: 30, color: '#83DA9D' }
    ]
    // list.map((item) => {
    //   data.push({
    //     name: item.serviceFieldName,
    //     data: item.serviceDuration
    //   })
    // })
    new wxCharts({
      animation: true, //是否有动画
      canvasId: 'canvas2',
      type: 'pie',
      series: data,
      width: this.data.windowWidth,
      height: this.data.height,
      dataLabel: true,
    });
  },

  //案由分布
  setChar3:function(){
    let main = {
      title: '数量',
      data: [15, 20, 45, 37],
      categories: ['知识产权与竞争纠纷', '知识产权罪', '侵权责任纠纷', '知识产权属、侵权纠纷']
    };
    new wxCharts({
      canvasId: 'canvas3',
      type: 'column',
      animation: true,
      categories: main.categories,
      series: [{
        name: '案由',
        data: main.data,
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        },
        title: '案件数量',
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration'
      },
      extra: {
        column: {
          width: 15
        }
      },
      width: this.data.windowWidth,
      height: this.data.height,
      dataLabel: true,
    });
  },

  //案件数量分布趋势
  setChar4: function(){
    let main = {
      title: '数量',
      data: [0.15, 0.20, 0.45, 0.37,0.24,0.56],
      categories: ['2014', '2015', '2016', '2017', '2018', '2019']
    };
    new wxCharts({
      canvasId: 'canvas4',
      type: 'line',
      animation: true,
      categories: main.categories,
      series: [{
        name: '年份',
        data: main.data,
        format: function (val, name) {
          return val.toFixed(2) + '万';
        }
      }],
      yAxis: {
        format: function (val) {
          return val + '万';
        },
        title: '案件数量',
        min: 0
      },
      xAxis: {
        disableGrid: false,
        type: 'calibration',
        title:"年份"
      },
      width: this.data.windowWidth,
      height: this.data.height,
      dataLabel: true,
    });
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

WXSS

page{
  background: #fff;
}
.graph{
  border-top: 1px solid #eee;
}
.graph .title{
  line-height: 84rpx;
  padding-left: 30rpx;
  color: #222;
  font-weight: 600;
  font-size: 30rpx;
}