05 2023 档案
摘要：//定义格式化函数： const handleTime=(time, format)=> { if (time == null || time == undefined || time == "") { return ""; } var t = new Date(time); var tf = fu
阅读全文
摘要：react-json-view: 前端json可视化插件 安装： npm install --save react-json-view 使用： import ReactJson from 'react-json-view' <ReactJson/> 配置： <ReactJson collapsed=
阅读全文
摘要：<Select options={} onChange={provinceChange} allowClear mode="multiple"// showSearch={false} maxTagTextLength={4} /> mode设置为多选，multiple配合showSearch可以实
阅读全文
摘要：const donwLoadFn = (arr) => { if (arr.length <= 0) return const fullUrl = `http://192.168.2.50:9803${arr[0]?.filePath}` fetch(fullUrl) .then(res => re
阅读全文
摘要：calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规
阅读全文
摘要：git pull http：//..... --rebase
阅读全文
摘要：创建水印方法： const setWaterwark = ({ // 使用 ES6 的函数默认值方式设置参数的默认取值 container = document.body, width = '250px', height = '160px', textAlign = 'left', textBase
阅读全文
摘要：组件内容： <Carousel autoplay afterChange={changeBanner} autoplaySpeed={7000} //添加左右切换箭头 arrows={true} prevArrow={<LeftOutlined />} nextArrow={<RightOutlin
阅读全文
摘要：import React from 'react'; import ReactPlayer from 'react-player'//引入 const LiveBroadcast=()=>{ return<ReactPlayer className='react-player' url='....f
阅读全文
摘要：<div style={{ padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area"> <h4>可滚动的区域 / scrollable area</h4> <Select defaultValu
阅读全文
摘要：git -commit 报错： 可以看到这个报错有两点，第一点是因为npm缓存问题，第二点是pre-commit导致的commit报错 pre-commit钩子都被存储在 Git 目录下的 hooks 子目录中。 当你用 git init 初始化一个新版本库时，Git 默认会在这个目录中放置一些示例
阅读全文
摘要：git -commit 报错： 原因：npm缓存造成的 解决方案： 删除packpackage-lock.json,删除所有依赖，执行 npm cache clean --force npm install
阅读全文
摘要：在antd基础上进行改造，抛弃之前的靠前面+进行展开的方式，在操作列进行点击展开 import { Table } from 'antd'; import React,{useState} from 'react'; import 'antd/dist/antd.css'; import './in
阅读全文
摘要：import React, { useContext, useState, useEffect, useRef } from "react"; import { Table, Input, Button, Popconfirm, Form } from "antd"; const EditableC
阅读全文
摘要：dataZoom属性：//做自适应的时候精良不要使用E charts的interVal属性 dataZoom:[ { id:'dataZoom', type:'inside', xAxisIndex:[0], filterMode:'none', start:xAxis.length>100?100
阅读全文
摘要：axisLabel: { show: true, //重点在这⬇️⬇️⬇️ formatter: (value) => { console.log(value, " >") return (value == 0 ? `${value}` : `${value} %`) }, //⬆️⬆️⬆️ tex
阅读全文
摘要：鼠标移入关闭定时器并清除，鼠标移出组件的时候打开定时器进行循环 const timer = useRef(null); useEffect(() => { startLoop(); }, []); const startLoop = () => { stopLoop(); timer.current
阅读全文
摘要：1 组件可直接使用。 2 tooltip: { 3 show: true, 4 trigger: 'axis', 5 confine: true, 6 padding: 0, 7 borderWidth: 0, 8 backgroundColor: 'rgba(1,1,1,0)', 9 // axi
阅读全文
摘要：center[]:饼图中心的位置，可以是百分比也可以是具体的数值 center: ['228', '142'], radius[]:空心圆环 ，第一个值是内径，第二个值是外径，中间部分是圆环饼图，可以是具体数值，也可以是百分比 radius: ['76', '100'], avoidLabelOve
阅读全文
摘要：一、transform 和@keyframes动画的区别： @keyframes动画是循环的，而transform 只执行一遍. 二、@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——
阅读全文
摘要：先定位 1 position: absolute;//绝对定位(很重要) 2 left: 124px;//定位位置，一般为盒子宽高的一半，可以是50%，50% 3 top: 102px; 4 transform: translate(-50%, -50%);//变换方向 5 //旋转 6 anima
阅读全文
摘要：const formItemLayout = { labelCol: {//左边文字 xs: { span: 24 }, sm: { span: 6 }, }, wrapperCol: {//右边输入框 xs: { span: 24 }, sm: { span: 16 }, }, }; const
阅读全文
摘要：clumns 行设置： 1 onCell: () => { 2 return { 3 style: { 4 overflow: 'hidden',//控制隐藏 5 whiteSpace: 'nowrap',//控制换行 6 textOverflow: 'ellipsis',//显示三点 7 curs
阅读全文
摘要：Modal弹框进行增改，删除直接用filter进行删除 添加： 1 setTabledate([...tabledate, newD]); 删除： setTabledate(tabledate.filter((item) => item.key !== record.key)); 修改： const
阅读全文
摘要：折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无） 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无） 饼
阅读全文
摘要：双X轴： //上轴 position: 'top'//设置在上方，默认下方 //下轴(默认轴) 双Y轴： 在series中绑定轴 yAxisIndex: 0/1/2/3....., 折线变平滑曲线 smooth: true,//变平滑曲线 两侧留白 boundaryGap: true,//默认为fa
阅读全文
摘要：//Echarts数据可视化legend图例属性设置 legend={ show: true, //是否显示 zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面 z: 2, //所属组件的z分层，z值小的图形会被z
阅读全文
摘要：UI图 效果图： 整体来说达到预期，距离林心如版的小龙女还差一点。 柱状图知识点汇总： 1.grid布局 grid: { top: 20, bottom: 30, left: 20, right: 20, containLabel: true,//grid区域是否包含刻度标签，false可能会溢出
阅读全文
摘要：E charts 网格问题： grid: { // 直角坐标系内绘图网格 left: '10', //grid 组件离容器左侧的距离, //left的值可以是80这样具体像素值， //也可以是'80%'这样相对于容器高度的百分比 top: '10', right: '30', bottom: '0'
阅读全文
摘要：实现方式一： color: { type: 'linear', //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 x: 1, y: 1, x2: 0, y2: 0, colorStops: [ { offset: 0, color: '#00FF66', // 0% 处的颜色 },
阅读全文
