- 博客(76)
- 收藏
- 关注
RSS订阅
原创 echarts图表实现预测数据展示，前段数据显示实线，后段数据显示虚线,柱状图图表效果在底部
如图：import _ from "lodash"valdata的数据我未展示，数据格式为：valdata = [ {aaa:111},{bbb:222},{ccc:333},{ddd:444},{eee:555},{fff:666}]getCaseNumberPic = (valData) => { var _this = this const xAxis = [] valData.forEach(function (o.
2021-10-19 15:01:02
1459
原创 echarts图表tooltip内部实现事件传参效果
图片效果：tooltip内容可点击并且可实现动态传参，常见场景为散点图x与y轴值相同导致点重叠引发的问题：newInnerText方法在全局没有，所以一定需要将newInnerText方法注入全局才行，（重要）constructor(props) { super(props); window.newInnerText = this.newInnerText.bind(this) //非常重要，该代码代表此方法已注入 this.state = { .
2021-10-19 14:38:02
1123
原创 echarts图表相关配置问题整理、自定义图表滚动条样式、x轴label竖直显示、自定义toolltip内容及样式、tooltip位置自适应、图表无数据引用自定义图片、浏览器窗口变化图表自适应更新等
自定义echarts图表滚动条样式：代码：图表的html格式为：<div className="medicFeeStyl"> <div id="medicFeePic" style={{ width: '100%', height: '100%' }}></div> <div id="noDataImg6" style={{ width: '100%', height: '100%', display: 'flex', justif.
2021-10-19 14:13:33
614
原创 echarts+react实现散点图的全选图例、缩放、自适应页面宽高、x轴文字竖直显示
一、初始数据import selectPic from "@/assets/img/selectPic.png"import unSelectPic from "@/assets/img/unSelectPic.png"import open from "@/assets/img/icon_open.png"import close from "@/assets/img/icon_close.png" //引入图片import * as echarts from 'echarts' //
2021-08-27 11:29:23
951
原创 实现localStorage伪过期功能 类似效果
一、实现该需求的思路：因为localStorage的特性是永久保存，但现在我们要对他进行达到一定时间后自动过期又得怎麽做呢，所以，我就在时间上对他进行了操作，当我们存入数据的时候，一并将当时的时间也存进去，然后设置在未来的某一时间，达到那个时间的时候删除数据，也就形成了类似的过期功能,不懂local什么意思的自行查看我的另一篇原创文章--------Vue数据存储本地 localStorage ES6-Map 存本地Value未定义 data: function() {
2021-03-19 17:09:19
113
原创 vue项目结合iview4UI组件实现树状结构及复杂动态表头列表 Tree-Table 及复杂header 省市区树状表格联动 数据优化后台一次性返回一万条数据页面卡死问题
一、首先看看需求最终效果图，该需求总共罗列以下几点最左侧采用树状结构将地址省市区县街道展示出来，并且控制名称长度限制，多余的用省略号表示，鼠标悬浮上去名称展示出来 列表默认展示市一级数据，县及街道数据都是点击+按钮，通过ajax向后台请求获得 表头日期也是后端动态获得，具体情况看下面代码 ,二、表格数据html及css部分.adressTable .ivu-table-cell { display: flex; justify-conte.
2021-02-07 17:34:04
1184
原创 自制用Vue框架实现table切换功能 手写 vue实现
首先，需要对HTML结构格式进行书写，table标签头如下：<ulclass="yulandParkDtlTabBtn"><liv-for="(spanNames,index)inspanNameList"class="spanList":class="{active:num==index}" //当num==index为true时，table头添加类...
2020-09-03 14:24:45
766
原创 手机访问h5页面、html静态网页进行真机调试
起初，将需要在手机上查看的html文件，css文件及图片放入一个文件夹中，在全局安装BrowserSync ：npm install -g browser-sync其次在项目文件夹下运行：browser-sync start --server --files"css/*.css, *.html"用以监听css和html文件，该文件夹下最好有index命名的html文件运行完成后会跳出如下页面：ctrl+单击进入，页面就会跳转至http://192.168.0.113:3000,...
2020-08-30 22:14:38
2301
原创 Vue数据存储本地 localStorage ES6-Map 存本地Value未定义
数据存本地js方法文件const local = {}/** * put 把数据放到本地存储 * @param {*} key * @param {*} value */local.set = function (key, value) { window.localStorage.setItem(key, JSON.stringify(value));};/** * ge...
2020-04-19 22:06:29
2475
原创 React 运用redux简单实现一个添加数据功能
reduxredux也是一个架构思维， 在这个架构思维中 React 充当是 视图 Vredux使用流程 ( todolist – 增加一条数据 )redux是一个架构思维，我们实现需要一个工具，这个工具叫做redux安装redux$ yarn add redux在src下新建一个store,store中新建index.js用来打造store import { create...
2019-06-20 15:31:16
1168
原创 jquery实现甘特图时效管理
*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*滚动条整体样式*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*/
2023-07-11 16:43:14
1128
原创 移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
所有文件直接引用，有时候自动定位会报错，需要升级https站点，localhost下可以定位成功
2022-10-24 11:31:20
9924
11
原创 数组对象根据条件删除某一字段数据、自定义组装数组对象数据、引入侧边模态框滚动内部内容不应滚动底层页面、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用、div横向滚动条位置放上面
1、数组对象根据条件删除某一字段数据js逻辑：2、自定义组装数组对象数据3、引入侧边模态框滚动内部内容不应滚动底层页面vue项目main.js文件注册全局方法4、自定义列表循环生成的按钮切换实时更新视图this.$set的正确使用......
2022-06-24 16:36:45
247
原创 elementUI表格二级目录展示，自定义图标展开与收起
收起：展开：followListData数据格式：<el-table :data="followListData" ref="table" :row-class-name="tableRowClassName" style="width: 100%" > <el-table-column type="expand"> <templ...
2022-05-25 18:04:23
1954
1
原创 element UI日历组件自定义操作设置农历、阳历、节日展示、单日操作
图例：自定义calendar.js,其他页面直接引入就可以/*** @1900-2100区间内的公历、农历互转* @charset UTF-8* @Author Jea杨([email protected])* @Time 2014-7-21* @Time 2016-8-13 Fixed 2033hex、Attribution Annals* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug* @T.
2022-05-20 18:14:18
4586
2
原创 moment.js获取日期
npm install momentmain.js文件全局引入moment.jsmain.js文件Vue.prototype.$moment = moment其他页面引用console.log('今天：' + this.$moment().format("YYYY-MM-DD"))console.log('昨天：' + this.$moment().subtract(1, 'days').format("YYYY-MM-DD"))console.log('明天：' + this..
2022-05-20 17:52:41
1624
原创 vue循环背景图:style引用
<div :class="{ gradePicActive: detailNum== item2.label }" :style="{ 'background-image': `url(${require('../../assets/' + item.url + '.png')})`, }" .
2022-05-20 17:00:26
360
原创 vue项目路径别名配置、ngnix反向代理配置、代码压缩配置、浏览器favicon.ico配置汇总
根目录下创建vue.config.js文件const { defineConfig } = require('@vue/cli-service')const CompressionPlugin = require('compression-webpack-plugin'), zlib = require('zlib')module.exports = defineConfig({ productionSourceMap: false, transpileDependencies: tr
2022-05-19 16:06:12
203
原创 vue项目自定义复选框、引用vuetify组件相关的一系列问题汇总、日期组件、表格组件
图例：一、<template><div class="moreSelect"> <div class="moreSelectLi" v-for="(item, index) in riskDataList" :key="index" :class="{ liActive: checkedGroup.includes(item.v
2022-05-19 15:50:57
764
原创 一维数组对象根据对象中的某个字段组装三维数组，三维数组扁平化成一维数组
一初始数组格式：firstArr = [{titleCode:'101',aa:111},{titleCode:'102',aa:222},{titleCode:'103',aa:333},{titleCode:'104',aa:444},]期望数据格式：finaArr = [{name:'名字1',orign:[{titleCode:'101',aa:111,orign:[{titleCode:'102',aa:222}]}]},{name
2022-05-19 15:42:01
323
原创 ie浏览器、低版本火狐浏览器兼容问题汇总
一、兼容es6语法1、安装babel-polyfillnpm install babel-polyfill2、在src/main.js最上面第一行代码引入import 'babel-polyfill'二、兼容.finally方法npm install promise.prototype.finally --save然后在src/main.js文件中引入require('promise.prototype.finally').shim()三、滚动条样式兼容，隐藏滚动
2022-05-19 15:05:23
1401
原创 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。
首先，新建一个perTest.js文件const limitListGroup = window.permisListAll || []//收集到的权限数组/** * 判断是否有权限。根据传入的权限标识，查看是否存在于用户的权限标识集合内。 */export default function hasPermission(perms) { let hasPermission = false for (const item of limitListGroup) { if (ite
2022-05-19 14:37:23
255
原创 vue项目引用elementui侧边栏导航 后端返回路径数据 bus传参 侧边栏收缩展开其他页面echarts图实时刷新问题
图例：<template> <div style="min-height: 900px"> <el-menu :collapse="isCollapse" default-active="1" class="el-menu-vertical-demo menuStyl" active-text-color="#0b41cd" text-color="#303133" >
2022-05-19 14:28:19
396
原创 Vue项目axios自定义封装请求
1、首先，安装axiosnpm install axios2、自定义request.js文件import axios from 'axios'// 环境的切换if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = process.env.VUE_APP_SERVER_URL //开发环境} else if (process.env.NODE_ENV === 'debug') { axios.
2022-05-19 14:07:21
467
原创 vuetify表格自定义拖拽排序
图例：1、首先安装sortablejsnpm install sortablejs2、页面引入<template> <div id="standardAssay"> <div class="tabListOne"> <v-card class="mx-auto"> <div class="tableTitle"> <div class="title..
2022-05-19 13:49:58
704
原创 echart环形图图例位置自定义设置
图例：示例代码：patientDistri5(valData, newColor) { const option = { tooltip: { trigger: 'item', textStyle: { color: '#333', fontSize: 14, fontWeight: 'normal' }, for.
2022-05-19 13:31:21
3692
原创 vue项目数据循环渲染echarts图 数据为0不显示
图例：1、首先安装echartsnpm install echarts --save2、然后在main.js文件中引入echarts//main.jsimport * as echarts from 'echarts'Vue.prototype.$echarts = echarts //全局注册echarts3、现在，其他页面就可以正常引用了//echartsData.vue<template><div class="modelRiskSt.
2022-05-19 12:02:13
1235
原创 VSCode 保存、自动格式化时ESLint 配置不生效
1、问题描述VSCode 中安装了 Prettier 和 ESLint 插件，在项目中使用了.eslintrc.js文件规范项目代码。但是保存代码时格式化并不是按该文件的配置而是按 Prettier 的配置2、当前项目.eslintrc.js文件是单独文件解决：1、首先打开vscode，在vscode的设置扩展中安装eslint插件；3、查看下面截图，按步骤1、2、3、4执行操作，即可配置成功。点击左下角设置，弹出设置，点击右上角3位置，弹出Settings.json 文件，修改，代码..
2022-05-18 15:14:23
7079
1
原创 前端vue项目实现3/4圆环图
示例图：悬浮名字显示鼠标悬浮文献出处显示鼠标悬浮圆环显示一、自定义组件CircleData.vue<template> <div class="hemp-circle"> <svg viewBox="0 0 100 100"> <defs v-if="isGradient"> <linearGradient :id="id" x1="10%" y1="45%" x2="50%" ...
2022-05-18 14:50:35
1217
原创 鼠标悬浮显示二级菜单
示例图：鼠标悬浮显示二级菜单//css.downAlls{ color: #fff; font-size: 14px; cursor: pointer; position: relative; } .ineerList{ position: absolute; left: -20px; t.
2022-02-16 16:08:50
783
原创 前端实现半圆进度条数据动态展示js
效果图示例：html代码：<div class="bigBox"> <div class="box1">100</div> <div class="box2"></div> <div class="box3"><span class="smallBorder"></span></div></div>css代码：.box2{ box-si.
2022-01-05 18:12:01
1420
1
原创 js获取地址栏参数方法
getQueryString = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return ''; }获取地址栏参数：let aab= th.
2021-12-20 14:05:29
504
原创 tab切换实现锚点动画定位
一、需求demo示例二、html部分代码，css自己书写<div class="tableul"> <div class="tableli" v-for="(item, index) in allMenuList" :key="index" :class="{tableliActive:tabNum==item.id}" @click="signTable.
2021-12-20 13:24:41
638
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人