- 博客(32)
- 资源 (21)
- 收藏
- 关注
原创 css重叠线
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 500px;
2020-12-31 15:58:48 240
原创 css3 文字卡片折叠效果
主要代码说明包裹字体的卡片必须display: inline-block; display: flex;transform: skewY(-20deg); /扭曲属性/nth:-child(odd)odd代表奇数 even代表偶数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
2020-12-30 15:21:33 370 1
原创 css3----------3D文字
主要取决 text-shadow这个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
2020-12-30 14:21:41 155
原创 VUE开发--全屏插件--screenfull
官网https://github.com/sindresorhus/screenfull.js1、安装npm install screenfull --savce2、引入在你需要使用的页面引入import screenfull from 'screenfull'3、使用 (具体API 看官网 这儿只讲我用的)screenfull.request(element, options?) 页面进入全屏 如果只是某一个元素进入全屏 则 screenfull.request(ele)scree
2020-12-28 22:23:04 1096 1
原创 JS 如何判断当前页面是否全屏
// 监听全屏事件触发 fullscreenchange() { let isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; if (isFullScreen) { // 进入全屏 } else { // 退出全屏 } ...
2020-12-28 13:58:32 11792 8
原创 echarts自适应
//下面my_charts是html中echarts的IDvar myChart= echarts.init(document.getElementById("my_charts"));myChart.setOption(option);//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可在mounted中window.onresize = function () { myChart.resize(); }...
2020-12-24 16:13:15 158 1
原创 Vue 数组中出现__ob__: Observer无法取值
经过查阅,ob: Observer它不可枚举,从中不可xx[0]取值,需要用JSON.parse(JSON.stringify(数组))
2020-12-24 10:08:39 2967 3
原创 js对象的访问方式
访问对象的方式对象的访问有两种方式1、通过对象.属性名2、通过对象['属性名'] 双引号和单引号都可以 方法通用区别方法一、通过.访问:编写简单 有时不能用属性名不能包含特殊字符,及变量方法二、通过['']访问:编写相对复杂 通用属性名可以包含特殊字符,及变量实例1、特殊字符2、属性名是一个变量的使用...
2020-12-23 21:51:14 1086
原创 echarts 堆叠图 解决内容为 0 时,数字被覆盖
bug图:解决方案给label中的normal加一个formatter属性具体如下 label: { normal: { show: true, position: 'insideRight', formatter: function(params) { if (params.value > 0) {
2020-12-23 17:15:29 1034
原创 js引用类型的赋值、深浅拷贝
赋值:当我把一个对象赋值给一个新的变量时,赋的其实时该对象的在栈中的地址,而不是在堆中的数据,也就是说两个对象指向的是同一个存储空间,无论哪个对象发生改变,其实都是改变的存储空间的内容,因此,两个对象是联动的。具体实现:浅拷贝: 重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,但拷贝前后对象的引用类型因共享同一块内存,会相互印象。浅拷贝实现方式:Object.assign()lodash里面的_.clone…展开运算符Array.prototype.concatAr.
2020-12-22 21:50:58 91
原创 vue 如何引入动态本地json
思路:通过require 结合模板字符串实现动态引入本地jsonjs代码: let num = 141000; let linFen = require(`../../public/city-provinces/city-provinces/citys/${num}.json`)
2020-12-21 10:02:24 2355 7
转载 echarts 渲染出的图表和文字模糊问题
方法1:使用svg渲染,svg渲染出的图表的清晰度高于canvasvar myChart = echarts.init(document.getElementById('chart'), null, {renderer: 'svg'});方法2:仍然使用canvas渲染,通过调整devicePixelRatio提升清晰度var myChart = echarts.init(document.getElementById('chart'), null, {devicePixelRatio: 2.5})
2020-12-18 16:14:08 1204 1
原创 echarts---------------Tooltip的小圆点之谜
当你要格式提示框浮层内容(Tooltip)信息时会出现小圆点消失这个问题出现原因:自定义提示框组件的时候会用到 formatter这个属性解决方法:marker即你需要的小圆点name:即你数据的名字value:数据的值如下代码: tooltip: { formatter: function (param) { return param.marker + " " + " &nbs
2020-12-18 15:21:06 798
原创 e-charts中的基本配置------基础地图
backgroundColor:背景色grid:图表离容器的距离title:标题组件left、right、top、bottom: title组件离容器距离text:标题内容textStyle:标题的样式seriestype:表示类型 这里用的是mapmapType:必须存在label:图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等:normal:表示正常状态emphasis:显示高亮状态show:是否显示 这儿.
2020-12-17 17:42:12 421
原创 e-charts中的基本配置------折线图
折线图color:调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色在案例中的作用:改变标题线条颜色和折线颜色 使其能保持一致legend:图例组件(标题)展现了不同系列的标记(symbol),颜色和名字textStyle:图例的公用文本样式可改字体颜色和大小orient:改变标题的布局 (垂直or水平)top、right、bottom、left :标题离容器左侧的距离itemGap:标题每项的间距grid:可以控制直角坐标系内绘图网格
2020-12-17 16:50:46 361
原创 vue 中 echarts的使用
华丽的四部曲1、安装 通过 npm 获取 echarts,npm install echarts --save2、引入 (全局引入或按需引入)这里是全局引入在main.js中import echarts from 'echarts' 引入Vue.prototype.$echarts = echarts 挂在在原型链上3、在你需要的页面创建一个又具体宽高的盒子(可以是百分比) 通过ref获取dom <div class="content" ref="lineCh
2020-12-17 15:35:28 228
原创 v-charts的踩坑之旅
1、如何让饼图标题位于图表左侧解决方法通过echarts的属性来改1、通过对标签加入:extend='chartExtend'2、通过echarts的官方文档找到legend属性 (legend属性的作用:图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示)3、这里通过 orient left top属性控制他的显示位置orient:标题的布局朝向left:图例组件离容器左侧的距离top图例组件离容器顶部的距离代码 <ve-pie
2020-12-15 17:19:54 845
原创 v-charts 如何更改文本颜色
<ve-line :data="chartData" :extend='chartExtend' height="100%"></ve-line> data() { this.chartExtend = { 'xAxis.0.axisLabel.color': 'white', //x轴文本颜色 'yAxis.0.axisLabel.color': 'white', //y轴文本改变颜色 legend: { ..
2020-12-14 15:58:42 1012
原创 v-charts安装-----填坑
v-charts使用,报错找不到 echarts/lib/visual/dataColor或者安装直接报错This dependency was not found:echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.jsTo install it, you can run: npm install --save echarts/lib/visual/dataColor考虑原因v-char
2020-12-14 15:22:23 2592 5
原创 可视化大屏基础(一)------border-image的认识
值描述border-image-source用在边框的图片的路径。border-image-slice图片边框向内偏移。border-image-width图片边框的宽度。border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。使用1、border-image-source:url(图片路径)2、border-image-slice :50 37 20 127 4条线切割成9...
2020-12-11 10:33:02 486
原创 canvas学习(二)----------------绘制图形和文本
VS Code编辑器在不安装相关插件的情况下,使用canvas绘制图形是没有代码提示的,这个时候可以添加一行注释来解决/** @type {HTMLCanvasElement} */画直线设置绘制的起始点ctx.moveTo(x, y)设置经过的某个位置ctx.lineTo(x, y)2个点就是直线(可以或者多个点)通过beginPath()和closePath()可以防止形成连笔<!DOCTYPE html><html lang="en"><head.
2020-12-09 23:00:46 135
原创 canvas学习(一)---------------初始canvas
canvas 三要素:1、id做为唯一的标识2、width:画布内容宽度的像素大小(与style的宽度和高度是有区别的)3、height:画布内容高度的像素大小注:canvas 仅仅只是1个画布标签,要绘制内容,必须要用jscanvas的使用步骤1、找到画布对象2、上下文对象(画笔)3、绘制路径4、填充5、渲染路径 或者描边<!DOCTYPE html><html lang="en"><head> <meta cha.
2020-12-09 21:53:29 111
原创 如何给gif改变颜色
1、通过ps打开gif2、选择色相/饱和度3、通过Alt+左键出现下方图标选中图层的最上层4、通过以下操作完成rgb的调色用于走投无路之时,方便调色的 (自己总结 不是公式)rgb 饱和度 +5点控制r-1 明度+1所有的+2点 色相+2控制g-15、首页判断是否在色相/饱和度最顶层如果不在移至最顶层其次 看通过图片中2的按钮判断是否应用与全部通过存储为web所用格式导出总体思想:1、通过色相找到所在的色系 或者相近色2、如何rgb相差巨大 先调明度2、
2020-12-07 22:08:16 8136
原创 element ui
如果给elementui的组件设置样式 有几点需要注意style标签不能有scoped, 否则不生效 谨慎在全局的css文件设置elementui的样式,因为这样设置后会应用所有页面中的这个组件样式 建议在style后单独再建一个 如下:<style scoped>无法修改到element ui 的样式<style><style>可以修改</style>...
2020-12-03 11:02:29 88 1
转载 VSCode代码自动补全(html标签、style样式、css属性及值)
转自:传送门1.按CTRL+SHIFT+P2.输入搜索Suggest:Snippets Prevent Quick Suggestions(控制在活动代码片段内是否禁用快速建议)3.取消选中4.按CTRL+SHIFT+P输入搜索 File:Associatoin(配置语言的文件相关联)5.点击下面settings.json6.然后修改成{ "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "edito
2020-12-02 14:58:17 12693 8
原创 vue 打包后的如何在本地运行
思路:搭建express本地服务器步骤一: 安装express-generatornpm i express-generator -g 步骤二:创建本地服务器在终端通过以下命令:express myExpressProject步骤三:进入项目目录cd myExpressProject 步骤四:安装相关项目依赖注意: 通过终端进入myExpressProject文件,执行下列代码npm i步骤五:把打包后的dist文件夹下的所有文件复制到myExpressProject文件.
2020-12-01 12:04:51 732
贴图工具贴图工具zip
2024-03-27
自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式
2020-09-25
vue3项目 定时器获取实时时间 检测到dom节点实时增加
2023-05-08
关于#微信小程序#的问题,如何解决?
2023-03-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人