上一页 1 2 3 4 5 6 7 ··· 23 下一页
摘要:达到截图的效果,一般用于生成指定报表 首先引入html2canvas,因为报表图中也需要数据可视化图,因此用到了echarts。要做的效果是:看不到dom生成图片。 但是要生成图片,不能将dom使用display:none;,这样就读取不到宽高了,所以想了其他方式。 第一种:使用absolute将d 阅读全文
posted @ 2020-09-17 17:41 herry菌 阅读(171) 评论(0) 推荐(0) 编辑
摘要:效果图: 完整代码: import React from 'react'; import { DatePicker,ConfigProvider } from 'antd'; import zh_CN from 'antd/es/locale/zh_CN'; import moment from ' 阅读全文
posted @ 2020-09-17 17:08 herry菌 阅读(280) 评论(0) 推荐(0) 编辑
摘要:效果图: 如果还有数据,显示正在加载中,没有下一页数据了显示无更多数据 做法: 在state中设置表头信息structure、数据列表list、是否加载下一页isLoad state={ structure: [ { name: '排名', width: '15%', key: 'order', t 阅读全文
posted @ 2020-09-17 16:27 herry菌 阅读(120) 评论(0) 推荐(0) 编辑
摘要:效果图: 一般用于实现这种的饼图 看下实现代码: 第一个pie用于做扇形统计,第二个pie用于做圆形虚线第三个pie为最里面的圆。 const option={ series:[ { name: '访问来源', type: 'pie', hoverAnimation: false, color: [ 阅读全文
posted @ 2020-09-17 11:41 herry菌 阅读(261) 评论(0) 推荐(0) 编辑
摘要:效果图: 渐变使用line的areaStyle属性,linear为线性渐变 let option={ series:[ { type:'line', areaStyle:{ color:{ //线性渐变 type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorS 阅读全文
posted @ 2020-09-17 09:58 herry菌 阅读(185) 评论(0) 推荐(0) 编辑
摘要:渐变进度条,如图: 实现: dom: <div className={s.progress}> <div className={s.bar} style={{ width:'73%'}}/> </div> css:外层div设置背景色有透明度,内层div设置渐变,有宽度,有圆角 .progress{ 阅读全文
posted @ 2020-09-16 23:00 herry菌 阅读(185) 评论(0) 推荐(0) 编辑
摘要:css实现自动向上轮播,效果图: 实现方式: 外层div的盒子加入: div{ position:relative; animation: moveUp 8s 1s infinite; -webkit-animation: moveUp 8s 1s infinite; &:hover{ animat 阅读全文
posted @ 2020-09-16 22:37 herry菌 阅读(318) 评论(0) 推荐(0) 编辑
摘要:先上实现代码: function PubSub() { this.handlers = {}; } PubSub.prototype = { // 订阅事件(定义的key值,绑定的函数) on: function(eventType, handler){ var self = this; if(!( 阅读全文
posted @ 2020-09-16 16:41 herry菌 阅读(146) 评论(0) 推荐(0) 编辑
摘要:2个组件都需要引入 API: publish:触发事件 subscribe:绑定事件 unsubscribe:卸载绑定事件 订阅与发送需要一个相同的字符串key进行绑定,一般我们会单独使用一个文件作为key的保存点,引入 在被动的组件中componentDidMount中可绑定事件 也可在前面定义一 阅读全文
posted @ 2020-09-16 15:25 herry菌 阅读(63) 评论(0) 推荐(0) 编辑
摘要:先上代码: import React from 'react'; export default class ListArea extends React.Component { state = { currentIndex: 0, interval: 3000, suspend: false }; 阅读全文
posted @ 2020-09-16 14:47 herry菌 阅读(81) 评论(0) 推荐(0) 编辑
上一页 1 2 3 4 5 6 7 ··· 23 下一页