小程序wxcharts的项目实用-即速应用

大家好，我是小九
最近公司的一个小程序项目要用到统计类折线图

于是准备用wx-charts来做这个趋势图
首先从gethub上或者从码云上下载wx-charts.js,传送门:https://gitee.com/Q_Augly/wx-charts.git
打开git地址后我们可以看到wx-charts的一些介绍。
wx-charts是基于canvas用js写的。
支持的图表类型有：

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

点击查看代码分析

我们先来看一下例子

小程序

参数说明

参数说明-wxCharts文档

方法&事件

具体实现

本文以我自己的项目作为实例,给大家讲解一下

引入wxChart.js
在项目中，我直接引用的wxChart.js
创建画布
打开趋势图的html文件

view class='head'  view class="head_item" bindtap='torecord'血压记录/view  view class='line'/view  view class="head_item head_itemActive"趋势图/view/viewview class='mymain'  view class='qs'    view class="container"      view class='container_head'        view class='container_head_top'          view class='prev'            text class='iconfont icon-iconfontzhizuobiaozhun023126'/text            text上一周/text          /view          view class='top_title'本周6月7日-6月13日/view          view class='next'            text下一周/text            text class='iconfont icon-jiantouyou'/text          /view        /view        view class='container_head_main'          view            view class='main_Ttitle'平均血压值/view            view class='main_main'138/80/view            view class='main_mintitle'mmHg/view          /view          view            view class='main_Ttitle'平均心率值/view            view class='main_main'65/view            view class='main_mintitle'次/分钟/view          /view        /view      /view      canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"/canvas    /view  /view/view

wxss：

/* pages/index/lookrecord/lookrecord.wxss */page {  background-color: rgba(239, 239, 240, 1);}.head_item {  width: 374rpx;  text-align: center;  font-size: 34rpx;  color: #999;  letter-spacing: 0;}.head_itemActive {  color: rgba(87, 213, 200, 1);}.line {  width: 2rpx;  height: 100%;  background-color: rgba(204, 204, 204, 1);}.head {  width: 100%;  height: 100rpx;  background-color: rgba(255, 255, 255, 1);  border-bottom: 1rpx solid rgba(204, 204, 204, 1);  display: flex;  align-items: center;  justify-content: space-between;  position: fixed;  top: 0;  z-index: 10;}.mymain {  position: absolute;  width: 100%;  height: 100%;  display: block;  box-sizing: border-box;  padding-top: 100rpx;  top: 0;}.xyjl {  width: 100%;  height: 100%;  box-sizing: border-box;  padding: 0rpx 30rpx;}.item_title {  width: 100%;  height: 91rpx;  line-height: 90rpx;  font-size: 26rpx;  color: #999;  letter-spacing: 0;}.item_main {  border-radius: 30rpx;  background-color: rgba(255, 255, 255, 1);  width: 100%;  height: auto;  box-sizing: border-box;  padding: 0rpx 40rpx;}.icon-jiantouyou, .icon-icon_arrow_top, .icon-jiantouxia,.icon-iconfontzhizuobiaozhun023126 {  font-size: 30rpx;  color: rgba(199, 199, 204, 1);}.main_title {  width: 100%;  height: 250rpx;  box-sizing: border-box;  padding: 30rpx 0rpx;  display: flex;  align-items: center;  justify-content: space-between;}.main_item {  width: 100%;  height: 200rpx;  box-sizing: border-box;  padding: 30rpx 0rpx;  display: flex;  align-items: center;  justify-content: space-between;  border-top: 1rpx solid rgba(216, 216, 216, 1);}.title_kind {  width: 150rpx;  height: 100%;  display: flex;  flex-direction: column;  justify-content: space-between;  align-items: center;}.kind_title {  font-size: 26rpx;  color: #333;  text-align: center;  line-height: 30rpx;}.kind_number {  font-size: 34rpx;  color: #d63030;  letter-spacing: 0;  line-height: 45rpx;}.kind_numberSussece {  color: rgba(99, 218, 121, 1);}.kind_dw {  font-size: 26rpx;  color: #333;  line-height: 45rpx;}.kind_result {  display: inline-block;  height: 45rpx;  padding: 0rpx 20rpx;  border: 2rpx solid #e68a8a;  border-radius: 100rpx;  font-size: 26rpx;  color: #d73737;  line-height: 40rpx;}.kind_resultSuccess {  border: 2rpx solid rgba(99, 218, 121, 1);  color: rgba(99, 218, 121, 1);}.qs {  width: 100%;  height: 100%;  box-sizing: border-box;  padding-top: 80rpx;}.container {  width: 690rpx;  border-radius: 30rpx;  background-color: rgba(255, 255, 255, 1);  height: 950rpx;  display: flex;  flex-direction: column;  box-sizing: border-box;  font-size: 35rpx;  color: #333;  margin: 0 auto;}.container_head {  width: 640rpx;  margin: 0 auto;  height: auto;}.container_head_top {  width: 100%;  height: 100rpx;  border-bottom: 1rpx solid rgba(216, 216, 216, 1);  display: flex;  align-items: center;  justify-content: space-between;}.canvas {  width: 100%;  height: 550rpx;  margin-top: 30rpx;}.prev, .next {  width: 130rpx;  border-radius: 100rpx;  display: flex;  justify-content: space-between;  font-size: 24rpx;  align-items: center;  
            
              
                点击这里免费试用，快速创建您的专属小程序
              
              
                标签：
                微信小程序
                小程序
                小程序是什么
              
            
            版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。