- 博客(14)
- 收藏
- 关注
RSS订阅原创 JavaScript实现万年历【展示前后月补充日期、可上下月份切换】
最近在产品业务开展中，碰到了有使用日历展示数据的需求，当即想起来了js常用案例——万年历的实现，这里做的相对简单，只需获取本月的日历展示出来即可，没有添加手动切换的功能，后续更新会补充。首先，我们先来看一下最终要实现的效果，即UI设计图：（这里只讨论万年历展示的实现，业务数据展示已马赛克，请见谅~~）在设计图中我们可以看出，首尾的灰色部分为上月和下月的相关日期补充，蓝色部分为本月日...
2020-09-26 23:39:08
1863
2
原创 微信小程序中AntV F2的使用
最近在做小程序时，需要做部分数据图表，对比了AntV F2、echarts和ucharts，最后选择了比较陌生的AntV F2，想尝试一下。一、使用环境准备1、创建全新小程序。2、打开刚刚创建的小程序，在项目根目录下，初始化package文件npm init3、使用--production选项可以减少安装一些无用的npm包，可有效减少整个小程序的体积大小。npm ins...
2020-03-24 22:16:09
5129
1
原创 常用倒计时/计时器效果
倒计时：此效果为近期业务开展中使用，输入一个分钟数后开始进行倒计时。<h6 style="color: #f00;" id="ExamNeedTime"></h6>var intNeedTime = 50; // 传入分钟数，示例50分钟var timer = null; var new_h = parseInt(intNeedTime/60);var...
2020-02-22 14:57:08
409
原创 echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素（如图片、SVG PathData等）的柱状图，往往用在信息图中，用于有至少一个类目轴或时间轴的直角坐标系上。先上一个简单的效果：其实实现思路主要在于：绘制具有颜色定义的背景以及对应的数据标识列，废话咱也不多说，直接上代码，此代码可直接复制至echarts官网运行查看。var maxData = 2000; option = { g...
2020-02-10 21:31:22
8665
原创 echarts柱状图自定义样式（二）
后补柱状图样式设置，效果：代码呈上：<div class="columnstyle" id="deviceRepair"></div>JavaScript：var deviceRepair = echarts.init(document.getElementById('deviceRepair'));var deviceRepair1 = [10...
2020-02-09 20:15:10
1775
原创 echarts柱状图自定义样式（一）
在最近业务开展过程中，涉及到highcharts和echarts的图表数据展示颇多，后UI设计师根据数据展示要求设计出花里胡哨的图表样式，正好最近也来研究一下，后续会补几篇相关博文。废话也不多说，先上效果：以下为实例代码（可直接复制至echarts官网查看效果）option = { grid: { left: '-5%', right:...
2020-02-09 20:05:59
7709
原创 动态处理scroll-view组件高度以来适配不同手机屏幕
在微信小程序开发中，使用scroll-view组件可以设置一定区域实现滚动，此组件在使用竖直滚动时，需要设置一个固定高度，但是在实际业务中，用户使用的手机型号千变万化，我们不能按照开发环境中的调试来固定高度，所以我们需要对scroll-view组件的高度设置适配。这里特此为该情况出以下解决方案。注：组件属性的长度单位默认为px，2.4.0版本起支持传入单位(rpx/px)。思路：通过 手机...
2020-01-17 13:31:34
935
原创 获取数组中最大值和最小值的方法汇总
1、排序法：思路：对数组进行排序，可以按照从小到大的顺序来排，排序之后的数组中第一个和最后一个就是我们想要获取的最小值和最大值。排序使用数组中的sort方法。var arr = [14,78,25,1,82,51,22];arr.sort(function (a, b) { return a-b;}); var min = arr[0]; var max = arr[a...
2020-01-17 13:08:41
7471
转载 highcharts 设置柱子之间的距离 柱子宽度
plotOption : { column : { // x轴每个点只用一个柱，则这个属性设置的是相邻的两个点的柱之间的间距。 // 如果x轴每个点有2个柱，则这个属性设置的是左侧点的右柱与右侧点的左柱之间的间距。 // 0.5的含义是，如果x轴长100px,则间距是100*0.5=50px pointPaddi...
2020-01-16 20:16:42
3121
原创 highcharts折线图设置负值边线颜色，节点颜色
在最近项目中使用到highchars折线图，根据正负值区分折线颜色和点颜色，目前已解决该问题。var chart = Highcharts.chart('monthlyincome', { chart: { type:'spline' // 平滑 }, title: { text: null }, subtitle: {...
2019-12-25 20:47:45
2008
原创 highcharts柱状图设置渐变色，设置圆角
设置渐变色/圆角1、设置渐变色：修改Highcharts对象中的colors数组各颜色值即可。var scancolors = ['#a524ff', '#ff4f76'];Highcharts.getOptions().colors = Highcharts.map(scancolors, function (scancolors) { return { ra...
2019-12-25 20:40:22
2645
4
原创 微信小程序_分包预加载处理
使用背景：微信限制了小程序代码包不能超过 2MB，然而，2MB 的大小严重限制了小程序功能的扩展，小程序业务的发展可能需要更多的空间，为了突破2MB大小的限制，同时不影响小程序访问响应速度，微信推出了“分包加载方案”。分包准备工作：开发者需根据自己的实际业务开展，将整个程序按照功能和业务划分为几个不同的模块，在构建时根据自己划分的模块将打包成不同的分包，用户在使用时按需进行加载。进...
2019-12-11 14:18:44
1158
原创 微信小程序_动态生成picker选择器后做改变picker值操作后互不影响
需求描述：通过请求后端接口，获取到数据源（json格式，数组），使用小程序wx:for循环遍历，对接口返回的数组中的一个字段存为picker组件选择器，并允许用户进行选择修改该值。问题描述：在使用wx:for循环时，picker选择器修改值操作直接使用this.setData({index:e.detail.value})的方式进行修改保存，使用这种方式就会出现picker选择器渲染完...
2019-12-03 16:12:56
3854
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人