关于微信小程序wepy框架下wx-charts的使用

wx-charts在微信小程序wepy框架下的使用

wx-charts

微信小程序主流的图表工具

基于 Canvas，体积小
支持图表类型

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

直接上代码跟效果图，在这里我只选择环状图进行举例。。。

// An highlighted block
<style lang='css'>
.canvas{height: 280px;width: 100%;
}
</style>
<template><view class="container"><canvas canvas-id="ringCanvas" class="canvas" bindtouchstart="touchHandler"></canvas><!--<button type="primary" bindtap="updateData" style="margin-top:100rpx">更新title</button>--></view>
</template>
<script>import wepy from 'wepy'var WxChartsring = require('../../utils/wxcharts-min.js')var ringChart = nullexport default class field extends wepy.page {config = {navigationBarTitleText: '环状图'}components = {}data = {}methods = {}events = {}onShow() {}touchHandler(e) {console.log(ringChart.getCurrentDataIndex(e))}updateData() {ringChart.updateData({title: {name: '80%'},subtitle: {color: '#ff0000'}})}onLoad() {var windowWidth = 320try {var res = wx.getSystemInfoSync()windowWidth = res.windowWidth} catch (e) {console.error('getSystemInfoSync failed!')}ringChart = new WxChartsring({animation: true,canvasId: 'ringCanvas',type: 'ring',extra: {ringWidth: 25,pie: {offsetAngle: -45}},title: {name: '周六',color: '#7cb5ec',fontSize: 25},subtitle: {name: '04.03',color: '#666666',fontSize: 15},series: [{name: '正常 15人',data: 78,stroke: false}, {name: '休假 35人',data: 35,stroke: false}, {name: '漏卡 15人',data: 15,stroke: false}, {name: '早退 63人',data: 63,stroke: false}, {name: '迟到 23人',data: 23,stroke: false}],disablePieStroke: false,width: windowWidth,height: 270,dataLabel: true,legend: true,background: '#f5f5f5',padding: 0})ringChart.addEventListener('renderComplete', () => {console.log('renderComplete')})setTimeout(() => {ringChart.stopAnimation()}, 500)}}
</script>

本人只是学习使用所以代码中数据没有做成动态，请忽略这点。
每一个插件都不是完美的，wx-charts虽然体积小容易上手，但更复杂的图表无法满足，只能做一下简单的图表,关于更为复杂的图表本人推荐echarts，唯一缺点对于小程序来说体积有点大。

来源于wx-charts github示例

https://github.com/xiaolin3303/wx-charts
https://github.com/xiaolin3303/wx-charts-demo

关于微信小程序wepy框架下wx-charts的使用相关推荐

微信小程序wepy框架快速入门
微信小程序wepy框架快速入门微信小程序简介微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一 ...
微信小程序wepy框架编译生成dist目录
微信小程序wepy框架编译生成dist目录(微信小程序原生语言) 坑:如果提示sass没有安装的错误,但按提示的命令仍无法成功安装,就是node npm版本的问题,经测试发现node v10.14. ...
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿
微信小程序 wepy 框架手势密码 ios 安卓真正的无卡顿 https://github.com/t5442107/yj_wepy_gesture_lock 用vscode 打开测试! 下载 h ...
微信小程序wepy框架开发资源汇总
开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程序 wepy-demo-bookmall:微信小程序??代码示例,使用w ...
微信小程序wepy框架资源汇总
微信小程序wepy开发资源汇总 ! wepy官方仓库 wepy官方文档开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程 ...
微信小程序wepy框架+minui踩坑之路
近期项目涉及微信小程序,鉴于原生小程序文件结构过于复杂,决定使用wepy框架开发 wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一下项目开发过程中 ...
微信小程序Wepy框架——ThirdScriptError解决方法
微信小程序报错ThirdScriptError 我使用的是wepy框架,后台实时进行编译,微信开发者工具作为界面展示错误信息如下: 解决方法如下: 第一眼看到这个错误,根据错误信息TypeError ...
微信小程序WePY框架手册
WePY 框架概述 WePY 是腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式,并支持ES6/7的一些新特性,同时语法风格更接近于 Vue.j ...
wepy 父调用子组件方法_微信小程序wepy框架笔记小结
该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风格上80%以上接近VUE 优势组件化开发小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互 ...

关于微信小程序wepy框架下wx-charts的使用

wx-charts在微信小程序wepy框架下的使用

来源于wx-charts github示例

关于微信小程序wepy框架下wx-charts的使用相关推荐

最新文章

热门文章