小程序 wxchart 使用简单入门

这篇具有很好参考价值的文章主要介绍了小程序 wxchart 使用简单入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方参考:

Example - wxCharts使用说明 · Issue #58 · xiaolin3303/wx-charts · GitHub

引入

地址:GitHub - xiaolin3303/wx-charts: 微信小程序图表charts组件,Charts for WeChat Mini Program

把clone下来的文件里dist下面的wxcharts.js或者wxcharts-min.js放到自己文件目录中

小程序 wxchart 使用简单入门,前端,javascript,小程序,wxchart

常用参数说明

参数说明
 

opts                      Object
opts.canvasId         String Required        对应wxml中的canvasId
opts.type               String Required        图表类型,可选值为:pie、line、column、area、ring、radar
opts.width             Number Required      canvas宽度,单位px
opts.height            Number Required      canvas高度,单位px
opts.legend           Boolean                   是否显示图表下方各类别的标识,默认true
opts.background    String                      canvas背景颜色 ,默认#fff
opts.animation       Boolean                  是否动画展示,默认true
opts.enableScroll   Boolean                是否开启图表可拖拽滚动,默认false,支持 line、area 图表类型(需配合绑定scrollStart, scroll, scrollEnd 方法)
opts.categories     Array Required        数据类别分类 (pie、ring 图表不需要)
opts.dataLabel      Boolean                 是否在图表中显示数据内容值,默认true
opts.dataPointShare  Boolean             是否在图表中显示数据点图形标识,默认true


opts.xAxis            Object                   X轴配置


opts.xAxis.gridColor  String                X轴网格颜色
opts.xAxis.fontColor  String                X轴数据点颜色
opts.xAxis.disableGrid   Boolean         不绘制X轴网格,默认false
opts.xAxis.type     String                    可选值:calibration(刻度),默认包含样式


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.gridColor  String               Y轴网格颜色
opts.yAxis.fontColor  String               Y轴数据点颜色
opts.yAxis.titleFontColor   String        Y轴title颜色
opts.yAxis.disabled   Boolean            不绘制Y轴,默认false
opts.extra             Object                 其它非通用配置项
opts.extra.ringWidth   Number           ring圆环宽度,单位px
opts.extra.lineStyle     String             仅对line、area图表有效,可选值:curve曲线、straight直线,默认straight
opts.extra.column      Object             column图表相关配置
opts.extra.column.width    Number     柱状图每项的图形宽度,单位px
opts.extra.legendTextColor   String    legend文案颜色
opts.series         Array Required        数据列表


数据列表series每项参数说明

dataItem              Object 
dataItem.data       Array Required        饼图、圆环图为Number数据,如果传入null,图表该处出现断点
dataItem.color      String                     不传入则使用系统默认的配色方案
dataItem.name     String                     数据名称
dataItem.format   Function                 自定义显示数据内容


ring 图表相关配置

opts.title                     Object                  仅支持 ring 图表类型
opts.title.name             String                   标题内容
opts.title.fontSize         Number                标题字体大小,单位px
opts.title.color             String                   标题颜色
opts.title.offsetX          Number                标题横向位置偏移量,单位px,默认0
opts.subtitle                Object                  仅支持 ring 图表类型
opts.subtitle.name        String                  副标题内容
opts.subtitle.fontSize    Number               副标题字体大小,单位px
opts.subtitle.color        String                  副标题颜色
opts.subtitle.offsetX     Number               副标题横向位置偏移量,单位px,默认0


radar 图表相关配置

opts.extra.radar                    Object        radar图表相关配置
opts.extra.radar.max             Number       数据区间最大值,用于调整数据显示的比例,默认series data的最大值
opts.extra.radar.labelColor     String         各项标识文案的颜色,默认#666
opts.extra.radar.gridColor      String         雷达图网格颜色,默认#ccc

pie、ring 图表相关配置

opts.disablePieStroke          Boolean       不绘制pie、ring图表各区块的白色分割线,默认false
opts.extra.pie                     Object         pie、ring图表相关配置
opts.extra.pie.offsetAngle    Number       起始角度偏移度数,顺时针方向,起点为3点钟位置(比如要设置起点为12点钟位置,即逆时针偏移90度,传入-90即可),默认0

type:'pie',设置类型简单,改掉初始时type的值就可以了

pie

ring 

line

column

area

radar

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

实例

饼图 type:'pie'
//wxml
<canvas class="cav" canvas-id="pieCanvas"></canvas>

//js
Page({
  data: {
    chart: null
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
    let chart = new wxCharts({
      canvasId: 'pieCanvas',
      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
    });
    this.setData({
      chart: chart,
    })
  }
});

//wxss

.cav{
  width: 100%;
  height: 540px;
  background-color: antiquewhite;
}
饼图效果

小程序 wxchart 使用简单入门,前端,javascript,小程序,wxchart

圆环

有了饼的经验,这个简单了。把type:'pie'改成 type:'ring' 

//wxml
<canvas class="cav" canvas-id="pieCanvas"></canvas>

//js
Page({
  data: {
    chart: null
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
    let chart = new wxCharts({
      canvasId: 'pieCanvas',
      type: 'ring',
      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
    });
    this.setData({
      chart: chart,
    })
  }
});

//wxss

.cav{
  width: 100%;
  height: 540px;
  background-color: antiquewhite;
}
圆环效果图

小程序 wxchart 使用简单入门,前端,javascript,小程序,wxchart

柱状图:
//wxss
.cav{
    width: 100%;
    height: 540px;
    background-color: antiquewhite;
}

//wxml
<canvas class="cav" canvas-id="column"></canvas>

js
Page({
  data: {
    colChart: null,
  },
  onLoad: function (options) {
    var wxCharts = require('../../utils/wxcharts-min.js');
  
    let col = new wxCharts({
      canvasId: 'column',
      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: 320,
      height: 200
    });

    this.setData({
      colChart: col
    })
  }
});

小程序 wxchart 使用简单入门,前端,javascript,小程序,wxchart

line 线条

效果:

小程序 wxchart 使用简单入门,前端,javascript,小程序,wxchart

案例源码: 文章来源地址https://www.toymoban.com/news/detail-558037.html

//wxml
<view>
  <canvas canvas-id="linec" class="chart"> </canvas>
</view>

//wxss
.chart {
  width: 700rpx;
  height: 600rpx;
}

//js
const wxCharts = require("../../../utils/wxcharts.js")

let areaChart;
Page({
  LoadTu() {
    areaChart = new wxCharts({
      canvasId: 'linec', type: 'line',
      categories: this.data.chartDatas.day7,
      animation: true,
      series: [{
        name: '洗涤费',
        // 线条的颜色
        color: '#FF8A06',
        data: this.data.chartDatas.money7,
        format: function (val) {
          return val.toFixed(1) + '';
        }
      }],
      dataPointShape: true,
      xAxis: {
        fontColor: '#7D7D7F',
        // 不显示x轴 刻度点
        disableGrid: true,
      },
      yAxis: {
        // y轴文字颜色,display:true不显示
        fontColor: '#FF8A06',
        // 不显示y轴
        disabled: true
      },
      // 非通用配置
      extra: {
        legendTextColor: '#c427b1',
        lineWidth: 10,
        // 线条形状:curve 圆滑
        lineStyle: 'curve'
      },
      // dataPointShape:false,
      legend: false,
      width: 320, height: 200,
    });

    return this;
  },

  data: {
    menus: [],
    ordermsg: {},
    swiper_h: 0,
    chartDatas: {
      money7: [6.4, 0, 0, 0, 18.71, 5.6, 0],
      day7: ["13日", "14日", "15日", "16日", "17日", "18日", "19日"]
    }
  },
  onLoad: function (options) {
    this.LoadTu()
  }
});

到了这里,关于小程序 wxchart 使用简单入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JAVA前端快速入门基础_javascript入门(01)

    1.JS是什么 JavaScript是一门跨平台,面向对象的脚本语言(即不需要编译,可以直接通过浏览器进行解释)。JS和Java是两门完全不相同的语言,但是基础的语法是类似的 2.JS的引入方式 JS如何在前端代码里面体现作用。有两种方式,一种是内部脚本,一种是外部脚本 注意,JS代码必

    2024年04月27日
    浏览(49)
  • wxchart 小程序 线条图不显示y轴的网格线 (分割线)

    如下图:项目需求不显示包括x轴的6条灰色分割线。  分析: 看了一下源码已经写死了是5条分割线,加一条x轴刻度线。没给公开配置方法。  解决方案: 既然没有配置项目,可以转变思路,把这些线条配置成白色,那么也是等于没有线条。跟背景色一样。使用yAxis:{ gridCol

    2024年02月16日
    浏览(34)
  • 快速入门使用spring详细步骤(介绍、导入依赖、第一个简单程序)

    目录 一、spring介绍 二、spring使用步骤 (一)创建maven项目  (二) maven项目导入spring依赖 (三)开始编写第一个spring程序 三、新篇章之springboot(额外篇) spring是作为Java EE企业级开发很好的一个框架,这篇文章就来讲解一下怎么使用spring。要使用spring,现在一般都是 使用

    2024年02月04日
    浏览(49)
  • 前端JavaScript入门-day08-正则表达式

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 介绍 语法  元字符  边界符  量词  字符类: 修饰符 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象,通常用

    2024年02月13日
    浏览(60)
  • 零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念

    该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识 HTML,CSS,JavaScript 都是单独的语言;他们构成前端技术基础; (1)HTML:负责网页的架构; (2)CSS:负责网页的样式,美化; (3)JavaScript(JS):负责

    2024年02月08日
    浏览(51)
  • JavaScript 入门(简单易懂) 看这一篇就够了

    目录 1、什么是JavaScript 1.1、概述 1.2、历史 2、快速入门 2.1、引入引入JavaScript 2.2、基本语法 2.3、数据类型 2.4、严格检查模式 3、数据类型 3.1、字符串 3.2、数组 3.3、对象 3.4、流程控制 3.5、Map和Set 3.6 iterator 3.7数据类型转换字符串类型 3.8数据类型转换数字型(重点) 3.9标识

    2024年02月02日
    浏览(99)
  • 【JavaEE初阶】前端第四节.JavaScript入门学习笔记

    作者简介:大家好,我是未央; 博客首页:未央.303 系列专栏:Java测试开发 每日一句:人的一生,可以有所作为的时机只有一次,那就是现在!!! 前言 一、前置知识  1、JS 和 HTML 和 CSS 之间的关系 1.2 JS 的书写形式 1.2.1 内嵌式 1.2.2 行内式  1.2.3 外部式 1.2.4 扩展 1.2

    2024年02月08日
    浏览(46)
  • Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

    路由(英文:router)就是对应关系 SPA指的是一个web网站只有一个唯一的一个HTML页面, 所有组件的展示与切换 都在唯一的一个页面内完成。 此时, 不同组件之间的切换 需要通过 前端路由 来实现 总结:在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成 通俗移动

    2024年01月22日
    浏览(46)
  • 跟着pink老师前端入门教程(JavaScript)-day02

    1、什么是变量 白话:变量就是一个装东西的盒子 通俗:变量是用于存储数据的‘ 容器 ’,通过 变量名 获取数据,甚至数据可以修改 注意: 变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 2、变量在内存中的存储 本质

    2024年02月20日
    浏览(42)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包