微信小程序图表插件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根据指定下标或对象删除数组元素
Dec 21 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
js实现随机圆与矩形功能
Oct 29 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的安全
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python操作gmail实例
2015/01/14 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python+mysql实现教务管理系统
2019/02/20 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
四查四看整改措施
2014/09/19 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
产品质量保证书范本
2015/02/27 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书