- 博客(32)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
原创 将数组对象分组,拆分为多个数组
将数组中的对象数据按照某个属性值进行分组,拆分为多个数组let list = [{ "name": "aa", "sex": '0' }, { "name": "bb", "sex": '1' }, { "name": "cc", "sex": '0' }, { "name": "dd", "sex": '1' }];将数组数据按照性别进行分组fu
2022-01-19 16:15:53
3389
原创 vue项目中axios请求接口的统一管理
在vue项目中,会使用到axios去调用接口,我们可以创建一个api文件夹,在内部创建js文件,以页面命名,将同页面的接口放入一个js文件中,这样方便管理api内的js文件内容如下:import request from './request'export function apiName(data) { return request({ url: "", method: "post", data })}apiName:为接口名称,建议 语.
2021-09-02 11:48:58
584
原创 大屏缩放,实现自适应布局
;(function(win){ var bodyStyle = document.createElement('style') bodyStyle.innerHTML=`body{width:1920px; height:1080px!important;overflow: hidden}` document.documentElement.firstElementChild.appendChild(bodyStyle) function
2021-08-30 10:18:25
827
原创 vue状态管理器基础使用(Vuex)
1. Vuex 概述1.1 组件之间共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 事件绑定兄弟之间共享数据:EventBus$on 接收数据的那个组件$emit 发送数据的那个组件1.2 VuexVuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享1.3 使用 Vuex 统一管理状态的好处能够在Vuex 中集中管理共享的数据,易于后期开发和维护能够高效的实现组件之间的数据共享,提高开发效率存储在Vuex中的数据都是响应
2021-05-17 11:16:13
287
1
原创 echarts柱图分组显示(簇状柱形图)
需求:设计echarts柱图,相同类型数据放在一起,使用不同背景色分割所用属性:yAxis/xAxis.splitAreasplitArea:坐标轴在 grid 区域中的分隔区域思路:其实我这个很简单,就是在拿到数据后进行个处理,将相同类型的数据相邻排放,然后在渲染的时候,给每个柱图背景色,这样的话,同类型的柱子背景色一样,就形成了区域分组效果代码如下//x轴数据var _xAxis = ['红1', '红2','绿1','绿2','黄1','黄2','橘1','橘2'];//y轴数据va.
2021-01-29 16:01:33
4645
原创 echarts地图海南省地图问题
需求:在echarts地图开发中,有时候需要点击某个省份的时候,地图变成当前省份的下级地图。问题:在海南岛点击下钻时,由于海南岛的三沙市是由很多岛屿组成(南海诸岛),而地图下钻会默认视图区域自适应,就会导致下面的情况:通过实验发现,主要地区会挤在一起,正常情况下,应该是展示中间的大岛屿,而三沙市(南海诸岛)只需展示部分即可解决:option = { ... } //对echarts的一些设置//由于海南地图包括南海及南海诸岛在内的大片区域,所以显示海南地图时,要将地图放大,并设置海
2021-01-06 15:50:06
2999
6
原创 数字跳动
在界面中显示数字,并动态的从0累加到所要的最大值使用countUp.jscountUp.js示例.使用eg:html:<div id="num"></div>js:var options = { useEasing: true, // 使用缓和 useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true) separator: ',', // 分隔器(千位分隔符,默认为',') decimal: '.', .
2020-12-29 14:23:49
1135
原创 小程序基础整理一
1、页面目录结构1.1 全局配置文件 app.json1、******pages:页面路径******在全局配置文件app.json中:在pages中添加需要增加的页面路径即可"pages":[ "pages/dome1/dome1", //新添加的文件 "pages/index/index", "pages/logs/logs" ],【在pages中,数组中第一个元素即为项目初始页面】2、******window:全局默认窗口表现******window属
2020-12-24 17:13:02
305
原创 js导出为excel表格
html:<table id="data"> <tr> <th>序号</th> <th>姓名</th> <th>成绩</th> </tr> <tr> <td>1</td> <td>张三</td> <td>680
2020-12-23 14:42:26
293
原创 layui表格添加千分位排序
在项目开发中,有时会使用到表格,我们可以使用ui库提供的表格组件,来实现相关功能,我这里使用的是layui中的数据表格:<table class="layui-hide" id="test"></table>layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test', data: userData, cellMin.
2020-12-17 14:36:05
1438
2
原创 高德地址转经纬度求解(附解决方案)
有这样一个需求,从接口获取数据,为一个数组,然后根据数组数据的地址在高德地图上打点,我用到的是高德的 geocoder.getLocation()方法进行地址编码,转为经纬度,下面是我的代码:var arrData = [];$this.parmet.street.map((item, i) => { geocoder.getLocation(item.Address, function (status, result) { if (status === 'comple.
2020-12-09 12:18:34
1293
原创 jq异步获取值
在开发过程中,如果使用jquery时,有时候会用到ajax的一些方法去异步获取值,这时候就是出现一些问题,如下:var arr = [];$.ajax({ url: 'xxx', data: {}, type: {}, success(function(res){ arr = res.data })});console.log(arr);console.log(arr.length);通过打印的数据会发现,虽然arr中的数据确实是接口返回的数据,但是通过打印的长度,发现,并不等.
2020-12-03 13:53:46
470
原创 echarts中label.formatter不生效问题
在echarts开发过程中,在使用地图时,如果使用geo,并且想设置地图上文本内容以及样式的时候,我们可以使用geo.label.normal.formatter来自定义这些功能,但是有时候会出现formatter不生效的情况,这时候可以通过修改源代码来解决该问题1、打开echart.js文件2.搜索 ‘getFormattedLabel’3.找到这个位置:将上图中,源码原有的那行代码给注释,然后添加两行代码,搞定代码如下var path = status == 'normal' ? 'la.
2020-11-25 13:31:59
8553
4
原创 Vue基础整理2
1、获取DOM元素及组件使用ref<div id='app'> <input type='button' @click='getElement' value='获取元素'> <p ref='content'>来找我啊</p> <com ref=‘sonContent’></com></div><template id='son'> <div> <p>哈哈哈<
2020-10-13 15:15:17
4067
1
原创 js常用数据处理方法封装
1、去除千分位function clearComma(s) { if ($.trim(s) == "") { return s; } else { return (s + "").replace(/[,]/g, ""); }}2、排序function sort(a, b) { return clearComma(a.SalesAmt) - clearComma(b.SalesAmt);}arr.sort(sort)3、添加千分位function add
2020-09-30 10:18:52
4430
原创 Vue基础整理1
MVC、MVVM关系图解1. mvc(后端思想)2. mvvm(前端思想)简单指令1.v-cloak<div v-cloak>{{ msg }}</div>解决插值表达式的闪烁问题(页面刷新加载时出现的{{}})注:配合样式[v−cloak]dislpay:none\color{red}{注:配合样式 [v-cloak] { dislpay: none }}注:配合样式[v−cloak]dislpay:none**不解析标签只替换占位符,不覆盖原本内
2020-09-23 17:47:10
6672
1
原创 echart柱子太短无法点击问题
在做echarts柱图的时候,有时候可能会有下转或者一些点击功能,一般会使用myChart.on('click',function(){//执行代码})去实现功能,但是,有的时候,会出现某个柱子数据太少,可能会点不到,这是可以使用myChart.getZr().on('click',function(){})去代替之前的点击事件,如下:myChart.getZr().on('click', function (p) { const pointInPixel = [p.offsetX, p.of.
2020-08-18 16:02:26
5976
1
原创 echart柱图点击高亮问题
echarts柱图点击高亮问题在建立echarts柱图时,都会有一个默认的点击高亮效果,有时候想取消高亮,有如下方法:slient(默认为’false’)series: {slient: true}该属性为柱图是否不响应鼠标的点击,设为true则为不响应,但是后续的其他点击效果也会不生效emphasisserise: { itemStyle: { color: "",//柱条颜色,设置为柱图颜色则取消高亮 borderColor: ''//柱条边框颜色 ... //更
2020-08-04 18:33:32
4213
原创 js部分基础
目录bug:程序中的错误、漏洞数值类型:运算符:数据类型转换:程序结构;函数一:数组:字符对象:万物皆对象,任何可被描述的事物都是对象document:网页ES6新增面向对象phpmysql(不是数据库)ajax:异步的js和服务端的数据通信协议:计算机与计算机沟通的语法闭包与继承设计模式:面向对象的代码的编写方式jQuery:bug:程序中的错误、漏洞分类:有报错:(1). 在报错信...
2020-03-16 17:09:25
4272
原创 vue概述(常用面试考点)
1、MVC、MVP与MVVM模式1.1 mvc一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。组成:模型(model) - 视图(view)-控制器(controller)模型:用...
2019-11-30 23:39:42
446
原创 简单回顾(vue + js)
1、forEach与for循环的区别forEach没有返回值,无法中断,不支持循环中添加删除操作,只适用于进行集合或数组遍历2、弹性和布局1、实现:父元素为弹性盒,内部有三个子元素,设置子元素水平方式对齐,并且第一个元素占20%,第二个元素占30%,第三个元素占剩余空间水平方式对齐:flex-direction:row设置占比:第一个元素 flex:2;第二个元素 flex:3;第...
2019-11-30 17:36:39
2199
原创 简单的轮播图实现
轮播图介绍轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容,设计师们利用轮播图来最大化信息密度。轮播图有多种形状和大小,但本文中谈及的轮播图具有以下特性:它显示在首页的顶部,并占据不用滚动即可显示的页面上相当可观的面积。 同一个地方会展示多页内容,虽然一次只展现一个页面;每页中包含图片以及小段文字。会有指示器表明,这个轮播图中不止一张图片。轮播图也有着自己的优缺...
2019-08-22 17:52:50
3566
1
高德api地址转经纬度问题
2020-12-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人