微信小程序图表插件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 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
js确认删除对话框效果的示例代码
2014/02/20 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript多线程详解
2015/08/12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python不同系统中打开方法
2020/06/23 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
教师学习培训邀请函
2014/02/04 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
助学感谢信范文
2015/01/21 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
任命书格式模板
2015/09/22 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis