- 博客(29)
- 收藏
- 关注
原创 vue引入svg文件及交互,使用svg-pan-zoom插件实现svg图放大缩小等操作
vue引入svg文件及交互,使用svg-pan-zoom插件实现svg图放大缩小等操作
2024-05-11 10:57:12 1406
原创 Promise常用方法及区别
Promise.resolve、Promise.reject、Promise.all、Promise.race、Promise.any、Promise.allSettled等方法介绍及使用
2024-04-11 10:32:16 316
原创 微信小程序base64与十六进制相互转换(使用btoa、atob方法报undefined)
微信小程序base64与十六进制相互转换(使用btoa、atob方法报undefined)
2023-12-06 14:53:18 2282
原创 vue二维码生成插件qrcodejs2-fix、html生成图片插件html2canvas、自定义打印内容插件print-js的使用及问题总结
qrcodejs2-fix插件、html2canvas插件、print-js插件使用及问题总结
2023-11-03 15:55:40 1695
原创 文件格式相互转换(base64转File等)
base64转为File对象 、File对象转为base64 、base64 转成blob、blob与ArrayBuffer相互转换
2022-10-11 17:09:54 3335
原创 多个项目共用一个node_modules依赖包文件夹(软连接、硬链接、符号链接)
多个项目共用一个node_modules依赖包文件夹(软连接、硬链接、符号链接)
2022-08-02 11:42:47 5527 2
原创 通过vue-cli或webpack-cli搭建的vue项目使用amfe-flexible进行rem适配
前言:目前大多是通过vue-cli来搭建项目,但早前也有使用webpack-cli搭建项目,两者会在文件的目录上有些区别,整体的结构和原理是一样的。此处会分别进行介绍。一、通过vue-cli搭建项目1.安装依赖npm install amfe-flexible –savenpm install postcss-pxtorem@5.1.1 –save(尝试过下载最新版本的postcss-pxtorem报错)2.在main.js或index.js中引入import 'amfe-flexible'
2021-04-06 14:50:55 518
原创 echarts叠加3D立体柱状图
效果图:实现代码:var xData = ["项目1", "项目2", "项目3", "项目4", "项目5", "项目6"]; // 计划数据数组var planData = [320, 302, 301, 334, 390, 0];// 完成数据数组var completeData = [320, 132, 101, 0, 90, 0];var color = [ { type: "linear", x: 0, x2: 1, y:
2020-12-29 14:36:09 4164 18
原创 echarts带指针的仪表盘进度条
效果图:实现代码:var data = [{value: 85}];var num = data[0].value / 100var option = { backgroundColor: '#fff', series: [{ type: 'gauge', splitNumber: 1, axisTick: { show: false }, axisLabel: { show: false, }, ax
2020-11-26 18:26:06 1223
原创 echarts饼图中插入图片
效果图:实现代码:function getPieOption (data) { var imageArr = [ './img/officeSupplies_04.gif', './img/officeSupplies_06.gif' ]; if (!data[0]) imageArr[0] = ''; if (!data[1]) imageArr[1] = ''; var seriesData = [ {
2020-11-26 18:15:16 3505 6
原创 echarts实现多3D立体柱状图
效果图:实现代码:// 立体多柱状图function getSolidOption(data1, data2, data3) { // 月份坐标轴 var nowMonth = new Date().getMonth() + 1; var lineXAxisData = []; for (var i = 5; i >= 0; i--) { var month = nowMonth - i; if (month < 1) { lineXAxisD
2020-11-26 15:40:25 11501 16
原创 echarts实现单3D立体柱状图
效果图:实现代码:function getEcharts3DBar (xAxisData, data, colorType) { var colorArr = []; if (colorType == '01') { colorArr = ["#2886c6", "#50bfda", "#89e3ec"]; } else { colorArr = ["#28c1c6", "#50dac0", "#87e8c7"]; } var c
2020-11-26 15:19:48 15909 31
原创 echarts地图双击区域展示下级市区县地图
效果图:1.默认展示全国地图2.双击江苏区域,展示江苏省地图3.双击南京市区域,展示南京市地图注:左上角点击返回上一级,可依次返回至上一级地图。实现代码:// 地图var mapStack = []; //存储双击时当前地图,用于返回上一级var curMap = {}; //当前地图信息var mapData = {}; //存储当前地图各个区域的名称、code编码等,便于双击时获取该区域编码加载下一级的地图function initOption (mapName) { //
2020-11-26 14:56:46 2359 6
原创 echarts仪表盘式进度条
效果图:实例代码:function getHalfPro ( value, color ) { return { title: { text: '完成率', left: 'center', bottom: '20%', textStyle: { fontSize: '200%', fontWeight: 'bold',
2020-11-19 16:24:43 4535
原创 echarts嵌套饼图,实现多层级饼图效果
效果图:实例代码:let option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, series: [ { name: '数据', type: 'pie', selectedMode: 'single', radius: [
2020-11-12 16:09:23 8315 3
原创 获取年月日等,计算每月几周,指定日期为周几,以及时间赋值
1.获取年月日时分秒毫秒时间戳// 年var year = new Date().getFullYear();// 月(获取的月份会比实际越小1,所以在使用的时候需要加1)var month = new Date().getMonth() + 1;// 日new Date().getDate();// 时new Date().getHours();// 分new Date().getMinutes();// 秒new Date().getSeconds();// 毫秒(返回 197
2020-11-11 15:56:39 276
原创 通过文件流下载、预览图片,以及导出Excel表格
一、通过文件流下载图片1.接口为get方法使用window.location或a标签的src直接接收接口地址2.接口为post方法// url为获取文件流地址,payload为接口参数,fileName为图片名称axios.post(url, payload, { responseType: 'blob'}) .then(res => { let b = new Blob([res.data]); let url = URL.createObjectURL(b)
2020-11-11 10:52:33 878
原创 iframe父页面和子页面之间的交互
父页面:(1.html)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="parId">嵌入</div...
2020-03-23 10:20:35 441
原创 监听sessionStorage中值的变化
应用场景:将登录接口所返回的用户信息存入sessionStorage,在其他地方需要使用到用户信息,但不知道什么时候接口请求完,此时可以监听sessionStorage中值的变化。var orignalSetItem = sessionStorage.setItem;sessionStorage.setItem = function(key, newValue) { var setItem...
2020-03-13 11:12:36 7287
原创 vue中全局和局部引入批量组件方法
前言:我在开发的时候使用到动态组件,但由于需要切换的组件太多,并且不确定到底有哪些需要切换的组件,这样的话,使用import一个一个引入是不可取的,想到官网上提供了批量引入组件的方法,用起来果然方便高效多了。一、全局批量引入创建一个.js文件,并在main.js中引入即可。( 这样引入的组件即成了全局组件,可直接使用。可根据自己的需求进行一些过滤,避免引入一些不必要的组件。)...
2020-02-28 15:46:22 4291 5
原创 vue4.0本地及上线环境请求后端配置
一、在根目录下创建三个文件:1、.env.development2、.env.production3、vue.config.js文件.env.development文件代码如下:(此文件只会在开发环境下执行)NODE_ENV = developmentVUE_APP_BASE_URL = "/api".env.production文件代码如下:(此文件只会在生产环境下执行,及...
2020-02-28 10:26:14 1408
原创 vue-cli4项目搭建及目录简介
一、vue-cli4项目搭建1.卸载旧版本,安装新版本卸载: npm uninstall -g @vue/cli安装: npm install -g @vue/cli查看版本:vue -V2.创建项目vue create project-name(项目名称)default:使用默认配置Manually select features:自定义配置(使用上下键切换选中后回车)3....
2020-02-27 10:37:47 4848
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人