- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue+echarts数据可视化大屏开发--自适应处理方案(react中同理)
大屏可视化的自适应处理，除了要懂得前端的基本布局以外，还需要了解各个场景下的自适应方案选型，这里提供三种自适应处理大屏的方案
2020-12-30 11:25:49
5075
2
原创 vue+echarts数据可视化大屏开发--小白基础入门篇(react中同理)
数据可视化开发相关图表库与 echarts 官方文档 类似的图表库还有 highchart 官方文档 和 antv 官方文档等等要说这些图表库如何选型，其实这点大可不必纠结，萝卜青菜各有所爱，可以说这些都有自己的有点，选哪一种只要能完成需求即可。...
2020-12-23 16:56:24
1714
原创 vue+echarts配合bmap做数据可视化页面，在触摸大屏幕上面不支持手势解决方案
bmap在结合echarts做的时候，在触摸大屏幕上面不能够支持手势进行操作(例如双指放大缩小手势)第一步：保存百度使用API返回的脚本，找到接口 http://api.map.baidu.com/getscript?v=版本号，命名为本地js文件；第二步：在刚保存好的本地文件中要做一点修改，全局搜索 navigator 关键词将navigator 取代成 myNavigator，然后重写 ...
2020-01-02 23:29:43
1233
原创 vue+echarts数据可视化大屏开发--图表自适应自动伸缩(react中同理)
这里默认已经具备了vue中如何使用echarts，如是小白先查看echarts在vue里面如何引入使用。下面进入正题 (直接上代码)：<script> export default { data() { return { resizefun:null } }, mounted() { ...
2019-10-28 17:16:14
5006
原创 vue3+echarts5+vite+typescript构建数据可视化大屏驾驶舱
在新技术的驱动下，vue3的版本趋于稳定，使用方式更被大众所熟知，随着echarts5的升级带来了更加符合现代化的视觉体验以及开发配置更加方便，因此搭建基于vue3，echarts5，vite，typescript构建数据可视化驾驶舱大屏。如果你还未接触过vue或者对echarts还不熟知，建议先看一下官方文档，并配合vue2+echarts构建的项目入手。项目框架搭建及配置1.项目框架搭建关于vue3+vite+ts构建项目这里不多赘述，这些不是本篇的主要内容，项目结构构建完成如下图所示，和vue
2021-03-25 13:13:22
6048
原创 移动端H5开发横竖屏切换样式监听适配
@media screen and (orientation:portrait) {//竖屏}@media screen and (orientation:landscape) {//横屏}
2021-03-01 17:03:50
1254
原创 基于vue/react/js+echarts数据可视化大屏开发模板源码(25套)
下载链接https://download.csdn.net/download/qq_36710522/14147525
2021-01-14 11:15:40
2630
1
原创 基于echarts+html+css+jq的数据可视化大屏展示炫酷看板[附源码]
默认你已经具备前端基础 html，css，js，jq这些基本知识都已经掌握。什么是echarts？ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。类似于echarts的图表库还有Highcharts，G2，d3等，至于项目怎么选型图表库，大可不用为这事情纠结，就
2020-12-22 10:35:13
33113
12
原创 页面自动跳转&&页面刷新&&app广告条&&web-app设定&&微信内清理页面缓存
页面自动跳转content第一个值表示时间，单位秒，第二个值url表示跳转的页面<meta http-equiv="refresh" content="3; url=page2.html" />页面刷新content为刷新时间间隔，单位秒<meta http-equiv="refresh" content="3" />app广告条<meta name="apple-itunes-app" content="app-id=myAppStoreID, affili
2020-10-15 09:33:57
505
原创 uniapp中使用live-player组件&&全屏功能的实现&&控制栏自动隐藏
为了在小程序中播放rtmp直播流，研究了下小程序的live-player控件，首先必须在小程序后台开通权限才可以播放视频,个人账号暂时没有权限,必须是公司账号,需要在小程序后台的服务类目设置相应的类目,具体类目可以看文档，设置好类目之后在开发中的接口设置中打开实时播放音视频流,这样你才能够看到视频。功能组件使用权限开通之后，其他不多说直接上代码：<template> <view class="content"> <view class="player-content"
2020-09-28 09:53:13
8452
3
原创 el-upload 连同参数实现多图片上传组件
<template> <div class="upload"> <el-upload :class="{ disUoloadSty: noneBtnImg }" multiple ref="upload" action="laitiaoke" list-type="picture-card" :file-list="fileList" :limit="6" :on-cha
2020-07-23 15:32:16
1245
原创 iframe继承父窗口样式CSS/JS的方法
<script> window.parent.$(function () {//使用window.parent调用父级jquery var head = document.getElementsByTagName("head").item(0); var linkList = window.parent.document.getElementsByTagName("link");//获取父窗口link标签对象列表 for (var i
2020-07-08 18:25:20
1915
原创 pc端web页面样式重置文件&& 常用全局样式
/*==样式重置==*/@charset "utf-8";html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b
2020-07-01 09:28:50
429
原创 vue中使用echarts+Highmaps开发数据可视化大屏(数据分析/数据看板/科技感页面)
echarts和highchart的区别echartsecharts的前身是百度公司前端开发的一个图表库，后捐献给阿帕奇公司维护。支持柱状图、饼状图、k线图、map图、热导向图、折线图等常用图表，主要采用canvas画图。highcharthighcharts是国外的一家公司开发的图表库，主要采用svg画图。支持的图表也很多，功能也比较强大。到底是使用echarts还是使用highchart呢？(萝卜青菜各有所爱，当然你也可以选择G2等一些图表库)此项目之所以使用echarts+highc
2020-06-28 14:32:42
7813
2
原创 vue重置data或者获取data初始值
Object.assign(this.data,this.data, this.data,this.options.data()) // 重置data对象到初始化状态
2020-05-19 13:40:38
1911
原创 移动端 H5 与 Hybrid(踩坑总结篇)
问题分析与解决方案 查看方案为什么有 1px 这个问题？实现 1px 有哪些方法？这些方法分别有哪些优缺点？开源项目中使用的哪些解决方案？如何在项目中处理 1px 的相关问题？问题分析与解决方案查看方案写移动端 H5 相关页面，相比 PC 端有哪些值得注意的点？关于H5 响应式布局有哪些解决方案？什么是 rem？如何在项目中完美使用它？vh/vw 是最佳解决方案吗？它有什么优...
2020-03-09 17:03:23
1599
原创 微信浏览器内关闭打开的H5页面功能
浏览器端常使用的window.close();// 关闭当前页面会发现在微信内打开的H5页面想在定时器结束或者点击按钮就关闭页面使用此方法就无效了。解决方案：//调用weixinClosePage关闭微信内浏览器打开的页面function weixinClosePage() {if (typeof WeixinJSBridge == “undefined”) {if (documen...
2020-02-21 15:22:04
4223
1
原创 mac os + flutter + vscode 最详细的配置以及使用方法
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。这里详细介绍一下 Flutter 在mac 上的环境部署以及开发准备。Flutter 是为了跨平台而生的，所以为了验证在iOS和Android 的运行情况，必须先在...
2020-02-13 10:32:56
3861
原创 获取任意网站的图标，标题栏logo，网站logo的方法
不错呦~我想要这个图表怎么办呢？直接使用网址加上： https://csdn.net/favicon.ico 获取到了说明：这种方法适用于百分之九十的站点，如果你有想要使用的LOGO或者ico可以使用此方法简单获取。...
2020-02-13 09:19:24
2620
1
转载 js禁止鼠标右键及F12禁止查看源代码及禁止其他操作
一、屏蔽F12 审查元素<script> document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { alert("F12被禁用"); event.keyCode = 0; ...
2020-02-13 09:08:54
651
原创 温故而知新---ES6知识详解篇
ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。各大浏览器的最新版本，随着时间的推移，支持度已经越来越高了，ES6的大部分特性都实现了。那么也就意味着低版本浏览器是不支持ES6的。1：let/constlet命令：ES6新增了let...
2019-12-21 17:18:00
211
原创 移动端H5 图片/视频上传预览（不依赖于任何框架）--input:file总结
写在前面：这里先来介绍下input:file的几个属性：accept：规定通过文件上传来提交的文件的类型。capture：该属性用于调用设备的摄像头或麦克风。multiple：可勾选多文件，调用系统摄像头或者录音机都只是单文件。一、常规上传（选取本地的图片/视频文件进行上传）<!DOCTYPE html><html> <head> <m...
2019-11-19 10:37:03
3999
2
原创 基于Echarts数据可视化地图模块（地图下钻+地图迁徙线）
数据可视化大屏展示使用频率最高的应该就是地图了，无论是做功能性的还是做装饰用的，都是非常实用的，放上它项目才有了灵魂，显得非常的炫酷。这里分别对地图下钻，迁徙图，地图下钻+迁徙图的合并，记录介绍一下：一、地图下钻先看下效果：核心源码(js文件)：//地图容器var chart = echarts.init(document.getElementById('main'));//34个省...
2019-11-07 10:44:59
10515
4
原创 web视频（点播/直播）播放器选型
随着互联网发展，网页已不仅仅承载着图文信息，更多的是音视频信息，而播放器，也逐渐成为一个web系统前端独立的模块，现因项目中web播放器的使用对直播和点播模块的实现，对此块支持性上简单做了一下系统的梳理。目前web端个人所了解的播放器做了一下对比：1.video.js2.阿里web播放器3.ckplayer播放器4.网易播放器5.MediaElement.js播放器点击进入这五款播放...
2019-10-28 16:40:49
3410
1
原创 移动端H5页面-微信内浏览器软键盘弹起input失焦后不回弹
场景：微信内置浏览器在打开H5页面的时候，input输入时软键盘弹起，页面会被顶起来，软键盘收起的时候页面视觉上已经复原了，可是页面dom元素是错位的状态解决：（以vantUI的输入框为例）给输入框添加一个失去焦点的事件 //解决微信端页面被顶起 temporaryRepair() { let currentPosition, timer; let speed...
2019-10-25 09:41:26
1962
原创 vue(hash路由) 微信内浏览器进行支付宝支付，解决在浏览器中打开后，#后面的链接被截取的问题
<template> <div class="isWenxin-mask"> <div class="in-weixin" v-if="isWeixin"> <div class="not-pay" v-if="!payStatus"> <div class="weixin-tip"> ...
2019-08-30 13:58:12
2125
原创 vue H5+原生(利用WebViewJavascriptBridge)快速开发Hybrid APP（仅前端部分）
项目背景：现有H5项目，要快速完成一个app开发，由于周期紧张只能先用H5套壳完成一版app一 、什么是webViewjavascripBridge？WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用白话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得我们的开发更...
2019-08-29 15:53:41
2825
原创 vue 微信扫一扫（多个站点项目统一使用一个扫码页面）
微信内扫码功能很多人都会在项目中用到，使用扫码微信公众号的配置也比较严格，需要你的网页有签名，而签名生成需要有一个微信公众号的appkey和APPsecret，然而要有这两项得注册个微信公众号，并且公众号还需要认证。微信白名单的限制总不能每次开发一次项目有用到微信码就要配置一遍微信公众号，写一遍扫码功能吧？终极解决方案：写一个扫码功能的页面放在服务器，所有的项目都往这个扫码页面跳转，然后带着扫...
2019-08-23 14:42:39
865
原创 vue + elementUI (el-upload) + 阿里oss 上传文件（视频，图片等） 并 显示上传进度条
先来看上传效果1.先安装aliossnpm install ali-oss2.安装完事之后，进行引入并进行oss的初始化，这里把初始化和后面用到的UUID生成规则放在一起，ali-oss.js文件// 引入ali-osslet OSS = require('ali-oss')/** * [accessKeyId] {String}：通过阿里云控制台创建的AccessKey。 ...
2019-08-14 13:59:15
14310
15
原创 mpvue中引用Vant-weapp时，没有把原来的px转换成rpx问题解决办法（踩坑记录）
由于node_modules不会编译到dist目录中，所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下，至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去，使用的时候还是会按照vant-weapp固有的px单位，如果每次引用一个组件都要修改的话太麻烦，所以也可以修改下webpack配置文件实现编译转换：修改文件...
2019-08-13 09:59:42
2790
1
原创 温故而知新---jquery（jq）进阶篇
1：操作DOM创建 var $div = $(‘’)内部插入操作：append(content|fn)：向每个匹配的元素内部追加内容。prepend(content)：向每个匹配的元素内部前置内容。外部插入操作：after(content|fn)：在每个匹配的元素之后插入内容。before(content|fn)：在每个匹配的元素之前插入内容。包裹操作：wrap(html|el...
2019-08-06 14:00:21
351
原创 温故而知新---jquery（jq）入门篇
1：jQuery简介：jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。今天，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery，顾名思义，也就是JavaScript和查询（Query），jQuery是免费、开源的。它可以简化查询DOM...
2019-08-06 13:52:47
226
原创 jquery实现在一定范围拖拽小窗口，并拖到固定区域触发事件
先上效果图一个小小的需求案例，技术栈 jq，一个看似简单的效果，涉及到鼠标事件以及元素坐标等知识点，其实拖拽的实现原理很简单就是利用元素绝对定位实现的拖拽position: absolute。封装拖拽（开箱即用）$.fn.extend({ dragging: function(data) { var $this = $(this); var xPage; var yPage;...
2019-08-06 10:34:27
988
原创 vue中使用WebSocket与java SpringBoot进行交互实现聊天室
一、简单介绍下HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API ...
2019-07-24 13:40:06
8066
3
原创 基于vue + echarts 数据可视化大屏展示[附源码]
一、老规矩先npm安装echartsnpm install echarts --save二、引入使用1.全局引入main.js中配置（这种方式在我项目中报echarts未定义错，求大神指点~。解除报错，就是在使用的组件内引入下let echarts = require("echarts/lib/echarts");很是蒙为什么组件全局挂载在原型了，组件内还要重新引入？？？）impor...
2019-06-21 16:35:21
28637
48
原创 windows + flutter + vscode 最详细的配置以及使用方法
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。flutter中文网Windows上搭建Flutter开发环境（vscode）（1）获取Flutter SDK（2）安装Android Studio（3）开发...
2019-05-28 11:28:59
13070
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人