美文网首页
小程序wx-charts的项目实用

小程序wx-charts的项目实用

作者: 27亿光年中的小小尘埃 | 来源:发表于2019-10-11 23:42 被阅读0次

    大家好，我是小九

    最近公司的一个小程序项目要用到统计类折线图

    趋势图效果 这里写图片描述

    于是准备用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

    点击查看代码分析

    我们先来看一下例子

    这里写1代码片 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

    参数说明

    参数说明-wxCharts文档

    方法&事件

    方法&事件

    具体实现

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

    1. 引入wxChart.js

    在项目中，我直接引用的wxChart.js

    这里写图片描述
    1. 创建画布

    打开趋势图的html文件

    
<view class='head'>

  <view class="head_item" bindtap='torecord'>血压记录</view>

  <view class='line'></view>

  <view class="head_item head_itemActive">趋势图</view>

</view>

<view 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;

  color: #fff;

  box-sizing: border-box;

  padding: 3rpx 15rpx 0rpx 15rpx;

  line-height: 50rpx;

  background-color: rgba(87, 213, 200, 1);

}

.prev text {

  display: block;

}

.next text {

  display: block;

}

.iconfont {

  font-size: 20rpx;

  color: #fff;

}

.top_title {

  font-size: 26rpx;

  color: #333;

}

.container_head_main {

  width: 100%;

  height: 170rpx;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1rpx solid rgba(216, 216, 216, 1);

}

.container_head_main view {

  width: 50%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.main_Ttitle {

  font-size: 26rpx;

  color: #333;

  text-align: center;

  line-height: 50rpx;

}

.main_main {

  font-size: 34rpx;

  color: #333;

  text-align: center;

  font-weight: bold;

  line-height: 40rpx;

}

.main_mintitle {

  font-size: 26rpx;

  color: #333;

  text-align: center;

  line-height: 50rpx;

}
    1. 开始写js

    js文件：

    
// pages/index/lookrecord/lookrecord.js

var wxCharts = require('../../../utils/wxcharts.js');  //引入wxChart文件

var app = getApp();

var lineChart = null;

Page({

  /**

  * 页面的初始数据

  */

  data: {

  },

  torecord() {

    // wx.navigateTo({

    //  url: '../lookrecord/lookrecord',

    // })

    wx.navigateBack({

      delta: 1,

    })

  },

  touchHandler: function (e) {

    lineChart.showToolTip(e, {

      // background: '#7cb5ec',

      format: function (item, category) {

        return category + ' ' + item.name + ':' + item.data

      }

    });

  },

  // createSimulationData: function () {

  //  var categories = [];

  //  var data = [];

  //  for (var i = 6; i > 0; i--) {

  //    categories.unshift('2018-' + (i + 1));

  //    data.push(Math.random() * (20 - 10) + 10);

  //  }

  //  // data[4] = null;

  //  return {

  //    categories: categories,

  //    data: data

  //  }

  // },

  updateData: function (e) {

    // var simulationData = this.createSimulationData();

    // var series = [{

    //  name: '成交量1',

    //  data: simulationData.data,

    //  format: function (val, name) {

    //    return val.toFixed(2) + '万';

    //  }

    // }];

    // lineChart.updateData({

    //  categories: simulationData.categories,

    //  series: series

    // });

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (e) {

    var windowWidth = '', windowHeight='';    //定义宽高

    try {

      var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据

      windowWidth = res.windowWidth / 750 * 690;  //以设计图750为主进行比例算换

      windowHeight = res.windowWidth / 750 * 550    //以设计图750为主进行比例算换

    } catch (e) {

      console.error('getSystemInfoSync failed!');  //如果获取失败

    }

    lineChart = new wxCharts({    //定义一个wxCharts图表实例

      canvasId: 'lineCanvas',    //输入wxml中canvas的id

      type: 'line',      //图标展示的类型有:'line','pie','column','area','ring','radar'

      categories: ['2018-6-13', '2018-6-14', '2018-6-15', '2018-6-16', '2018-6-17', '2018-6-18', '2018-6-19'],    //模拟的x轴横坐标参数

      animation: true,  //是否开启动画

      series: [{  //具体坐标数据

        name: '收缩压',  //名字

        data: [60,90, 60, 110,120,105,70],  //数据点

        format: function (val, name) {  //点击显示的数据注释

          return val + 'mmHg';

        }

      }, {

        name: '舒张压',

        data: [50, 100, 80, 115, 120, 90, 125],

        format: function (val, name) {

          return val + 'mmHg';

        }

      }, {

        name: '心率',

        data: [60, 70, 90, 105, 120, 130, 95],

        format: function (val, name) {

          return val + '次/分钟';

        }

      }

      ],

      xAxis: {  //是否隐藏x轴分割线

        disableGrid: true,

      },

      yAxis: {      //y轴数据

        title: '数值',  //标题

        format: function (val) {  //返回数值

          return val.toFixed(2);

        },

        min: 30,  //最小值

        max:180,  //最大值

        gridColor: '#D8D8D8',

      },

      width: windowWidth,  //图表展示内容宽度

      height: windowHeight,  //图表展示内容高度

      dataLabel: false,  //是否在图表上直接显示数据

      dataPointShape: true, //是否在图标上显示数据点标志

      extra: {

        lineStyle: 'curve'  //曲线

      },

    });

  },

  /**

  * 生命周期函数--监听页面初次渲染完成

  */

  onReady: function () {

  },

  /**

  * 生命周期函数--监听页面显示

  */

  onShow: function () {

  },

  /**

  * 生命周期函数--监听页面隐藏

  */

  onHide: function () {

  },

  /**

  * 生命周期函数--监听页面卸载

  */

  onUnload: function () {

  },

  /**

  * 页面相关事件处理函数--监听用户下拉动作

  */

  onPullDownRefresh: function () {

  },

  /**

  * 页面上拉触底事件的处理函数

  */

  onReachBottom: function () {

  },

  /**

  * 用户点击右上角分享

  */

  onShareAppMessage: function () {

  },

})
    1. 调制

    实际项目当中可能我们的线条的颜色和数据点的形状可能跟默认的不一样怎么办呢？

    没关系，我们打开wxCharts.js

    var config = {

    yAxisWidth: 15,

yAxisSplit: 5,    //这个是把y轴平分成几分的

xAxisHeight: 15,

xAxisLineHeight: 15,

legendHeight: 15,

yAxisTitleWidth: 15,

padding: 12,

columePadding: 3,

fontSize: 10,

// dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],  // 这里是改变数据点的形状的

dataPointShape: ['circle'],

// colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'],  //这里是数据线条以及相应的数据点的颜色

colors: ['#6EB9FF', '#ECB97D','#51DBA2'],

pieChartLinePadding: 25,

pieChartTextPadding: 15,

xAxisTextPadding: 3,

titleColor: '#333333',

titleFontSize: 20,

subtitleColor: '#999999',

subtitleFontSize: 15,

toolTipPadding: 3,

toolTipBackground: '#000000',

toolTipOpacity: 0.7,

toolTipLineHeight: 14,

radarGridCount: 3,

radarLabelTextMargin: 15

    };

    以上是我使用wxCharts的项目经验，感谢wxChatrs开发人员，请大家多多指教

    相关文章

      网友评论

          本文标题：小程序wx-charts的项目实用

          本文链接：https://www.haomeiwen.com/subject/zarfmctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|小程序wx-charts的项目实用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！