微信小程序图表插件wx-charts用法实例详解


Posted in Javascript onMay 20, 2019

本文实例讲述了微信小程序图表插件wx-charts用法。分享给大家供大家参考,具体如下:

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

支持图标类型

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

如何使用?

1. 直接引用编译好的文件 dist/charts.js(js下载地址)

.wxml中定义

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas>

canvas-id与new wxCharts({canvasId:”})中canvasId一致

2. 命令行

git clone github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c #或者 rollup --config rollup.config.prod.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 自定义显示数据内容

详见demo(具体demo git地址)

1.pie

new wxCharts({
  animation: true, //是否有动画
  canvasId: 'pieCanvas',
  type: 'pie',
  series: [{
    name: '成交量1',
    data: 15,
  }, {
    name: '成交量2',
    data: 35,
  }, {
    name: '成交量3',
    data: 78,
  }],
  width: windowWidth,
  height: 300,
  dataLabel: true,
 });
}

微信小程序图表插件wx-charts用法实例详解

2. ring

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: windowWidth,
  height: 200,
  dataLabel: false,
  legend: false,
  padding: 0
});

微信小程序图表插件wx-charts用法实例详解

3. line

new wxCharts({
  canvasId: 'lineCanvas',
  type: 'line',
  categories: simulationData.categories,
  animation: true,
  background: '#f5f5f5',
  series: [{
    name: '成交量1',
    data: simulationData.data,
    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: windowWidth,
  height: 200,
  dataLabel: false,
  dataPointShape: true,
  extra: {
    lineStyle: 'curve'
  }
});

微信小程序图表插件wx-charts用法实例详解

4. column

new wxCharts({
  canvasId: 'columnCanvas',
  type: 'column',
  animation: true,
  categories: chartData.main.categories,
  series: [{
    name: '成交量',
    data: chartData.main.data,
    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: windowWidth,
  height: 200,
});

微信小程序图表插件wx-charts用法实例详解

5. area

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: windowWidth,
  height: 200
});

微信小程序图表插件wx-charts用法实例详解

6.radar

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
    }
  }
});

微信小程序图表插件wx-charts用法实例详解

本人是自己查阅资料自己整理,希望对自己和有问题的你们都有帮

Javascript 相关文章推荐
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Nuxt项目支持eslint+pritter+typescript的实现
May 20 #Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 #Javascript
vue-cli webpack配置文件分析
May 20 #Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 #Javascript
微信小程序rich-text富文本用法实例分析
May 20 #Javascript
bootstrap中的导航条实例代码详解
May 20 #Javascript
详解小程序云开发数据库
May 20 #Javascript
You might like
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP令牌 Token改进版
2008/07/18 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
js实现每日签到功能
2018/11/29 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python3多线程基础知识点
2019/02/19 Python
python中的逆序遍历实例
2019/12/25 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
三个Unix的命令面试题
2015/04/12 面试题
即兴演讲稿
2014/01/04 职场文书
出生公证书样本
2014/04/04 职场文书
预防煤气中毒方案
2014/06/16 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL