原生小程序实现折线图wx-charts(比echars体积小很多)

因工作需要做折线图,做插件的时候使用echars的定制折线图,但是体积还是太大了,就定制了一个体积就有500kb,所以后来大改,全部改用wx-charts显示折线图,只有40kb左右,做个普通的显示图表还是很不错的选择

实现效果如图:

1.首先下载wx-charts图表,选择我框的这个压缩后的文件就行

2.可以看看wx-charts官网

3.在需要使用图表的pages页面的wxml文件下先定义一个画布,

canvas-id:这个很重要,自己定义个属性值,对应后面的js代码!!!

  <view class="mychart-view"><canvas canvas-id="areaCanvas" disable-scroll="true" class="canvas"></canvas></view>

4.在wxss页面给画布添加宽度和高度,我在这边的画布父级添加了宽高,当然你也可以直接给canvas添加宽高,如果不添加宽高可能导致无法正常显示哦

  .mychart-view,.mychart-wd{margin-top: 50rpx;width: 100%;height: 520rpx;}.canvas{width: 100%;height: 100%;
}

5.到了最重要的js代码了!

5.1-首先先把下好的wxcharts-min.js文件放在项目公用的文件夹下,之后导入到需要使用的页面的js文件中,我在这是放在了api的文件,可以自行更改哈~

import wxCharts from '../../api/wxcharts-min'

js文件如下, x轴和y轴数据都是后台反的数据哈,是以['1','2','3']这种格式的,如果想使用静态可以使用这种格式显示哈~,顺便提一嘴,函数要定义在page({})的外面,和page同级,如果page里要调用,可以使用函数名的形式调用echartsdt()

function echartsdt() {var windowWidth = '',windowHeight = ''; //定义宽高try {var res = wx.getSystemInfoSync(); //试图获取屏幕宽高数据windowWidth = res.windowWidth / 750 * 650; //以设计图750为主进行比例算换windowHeight = res.windowWidth / 750 * 500 //以设计图750为主进行比例算换} catch (e) {console.error('getSystemInfoSync failed!'); //如果获取失败}new wxCharts({canvasId: 'areaCanvas',type: 'area',categories: dateechars,//x轴数据animation: true,legend: false,series: [{name: '步数',data: all_walk,//y轴数据color: '#9ad672' //折线颜色}],yAxis: {title: '步数/步',min: 0,gridColor: '#e0e6f1',type: 'value'},xAxis: {},extra: {legendTextColor: '#333',// lineStyle: 'curve'},width: windowWidth * 1.1, //图表展示内容宽度height: windowHeight, //图表展示内容高度});}

讲解结束啦~希望对你有所帮助

原生小程序实现折线图wx-charts(比echars体积小很多)相关推荐

微信小程序显示折线图
插件地址:https://github.com/xiaolin3303/wx-charts/blob/master/dist/wxcharts.js 推荐使用百度的echarts来做图表!!! 微信小 ...
微信小程序——绘制折线图
一.wxml <view class="canvas-view"><canvas class="canvas" canvas-id=" ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
uniapp开发小程序引入折线图
在网上找了好多说的都不是太清楚,我这边直接上代码演示,也方便以后自己能用到下面两个标签+js然后引入一个js文件就可以实现,js文件我的资源里面有大家可以去下载,文件 <u-calendar ...
微信小程序实现Echarts图的动态实时刷新
在微信小程序绘制折线图时,选择Echarts.官网如下:https://echarts.apache.org/zh/index.html 效果如下:(由于为截取动态图,只有实时图片结果) 微信小程序中 ...
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序绘制分享图
微信小程序绘制分享图例子: demo下载地址:https://gitee.com/v-Xie/wxCanvasShar 大致代码会再以下说明实际开发项目: 基础知识点: 了解canvas基础知识 w ...

原生小程序实现折线图wx-charts(比echars体积小很多)

原生小程序实现折线图wx-charts(比echars体积小很多)相关推荐

最新文章

热门文章