- 博客(84)
- 收藏
- 关注
RSS订阅原创 bizcharts图表封装之基础饼图
一、基础饼图“分类”及不同分类后的封装1.1分类 基础饼图表现形式一样，但是按照使用上的不同，基础饼图封装分为两类：组件（前端）计算所占百分比和接口（后端计算百分比）。区别如下： 组件计算百分比（百分比饼图）：①、需要前端手动处理接口数据；②、需要处理保留到小数点后x位；③、各个item所占比例和最大限度接近100%； 接口返回百分比：①、直接使用接口数据（后端处理数据以及小数点问题）；②、一般情况下，后端返回的百分比不带“%”,前端需要手动增加；③、各item所占比例...
2020-06-18 11:36:28
2116
原创 bizcharts图表封装之百分比堆叠面积图（可设置Slider）
一、百分比堆叠面积图（可设置Slider）需求：统计出x年下，人民年收入（收入：1万以下、1万-10万、10万-20万、20万以上）所占比例要求：使用堆叠面积图；保留小数点后两位小数遇到问题：后端接口返回x年各收入所占比例，四舍五入导致这些数据加起来后有时候会大于100% ，有时候会小于100%，而这又是合理的。小于100% 时，图表正常（异常的不太明显），但是若大于100%时，纵坐标会多出一个刻度，对应的grid也会多出一条。...
2020-06-18 09:49:59
1345
原创 bizcharts图表封装之百分比堆叠柱状图（可设置Slider）
一、百分比堆积柱状图（可设置Slider）需求： 统计出x年下，人民年收入（收入：1万以下、1万-10万、10万-20万、20万以上）所占比例要求： 使用堆积柱状图；保留小数点后两位小数遇到问题： 后端接口返回x年各收入所占比例，四舍五入导致这些数据加起来后有时候会大于100% ，有时候会小于100%，而这又是合理的。小于100% 时，图表正常（异常的不太明显），但是若大于100%时，纵坐标会多出一个刻度，对应的grid也会多出一条。 ...
2020-06-17 18:00:41
1199
4
原创 Form组件之placeholder遇到initialValue
一、前言 最近项目中，发现了一个奇怪的现象： <Input/>组件（ant中的）的placeholder 有时候会显示，有的时候却不显示。正常情况下，只要 <Input/>组件没有value就会显示placeholder的内容，可这次input明明没有值的呀，这是怎么回事？二、placeholder遇到initialValue 2.1问题描述 项目环境：pro4 (ant组件（3.25.3）+ts+……)；...
2020-06-17 16:30:26
653
原创 bizcharts图表封装之多面积图（带Slider）
一、可设置滚动条Slider的多面积图图表组件功能设置说明：1、对于连续性图表（折线图、面积图等）建议为图表横坐标设置range属性（详见代码）；2、连续性图表建议设置 shape=“smooth”（实际情况看需求）；3、面积图中建议设置<Geom type="point" .../>，不设置会出现：图表中没有数据，只有坐标轴（看起来），但是鼠标悬浮到坐标轴内，会出现点产生原因：面和点...
2020-06-17 10:08:00
681
原创 bizcharts图表封装之基础(单)面积图（带Slider）
一、可设置滚动条的基础面积图（单）组件封装组件功能设置说明： 1、对于连续性图表（折线图、面积图等）建议为图表横坐标设置range属性（详见代码）； 2、连续性图表建议设置 shape=“smooth”（实际情况看需求）； 3、面积图中建议设置 <Geom type="point" .../>，不设置会出现： 图表中没有数据，只有坐标轴（看起来），但是鼠标悬浮到坐标轴内，会出现点 产生原因： 面和点...
2020-06-17 09:59:07
731
原创 null和undefined
一、前言 在项目中发现了一个现象：在对变量初始化时，我习惯用空字符串（‘’）、空对象（{}），空数组（[]）、0等来初始化，却发现其他同事惯用undefined，而在bizcharts图表中，null又可以使得某个数据不显示……好吧，直到现在还是没弄懂到底有啥区别，哪种更好，只能是根据不同的需求特殊处理了，比如：折线图某个横坐标没有数据，如果需求是不显示对应的点，则处理为null,否则可以处理为0，其他情况就看各人习惯了。 当前，说了一大堆废话，但此次只比较null和undefine...
2020-06-12 10:46:07
419
原创 bizcharts图表封装之堆叠柱状图（带Slider）
一、带滚动条Slider的堆叠柱状图封装 堆积柱状图和分组柱状图从代码上看，只是堆积柱状图<Goem/>不需要设置justimport React from "react";import {Axis, Chart, Geom, Legend, Tooltip} from "bizcharts";// @ts-ignoreimport Slider from 'bizcharts-plugin-slider';// @ts-ignoreimport DataSet fr...
2020-06-10 16:29:14
1328
原创 bizcharts图表封装之分组柱状图（带Slider）
一、带滚动条Slider的分组柱状图封装import React from "react";import {Axis, Chart, Geom, Legend, Tooltip} from "bizcharts";// @ts-ignoreimport Slider from 'bizcharts-plugin-slider';// @ts-ignoreimport DataSet from '@antv/data-set';import {dealSliderChange, filter
2020-06-08 17:39:31
1307
原创 bizcharts图表封装之单柱状图（带Slider）
一、带滚动条Slider的单柱状图1.1单柱状图分类： 基础柱状图 、区间柱状图1.2区别： 区间柱状图，二者的区别只是数据源的不同 基础柱状图：yAxis 对应的值是number类型 区间柱状图：yAxis 对应的值是[number,number](数组)类型 1.3封装组件import React from "react";import { Chart, Ge...
2020-06-08 17:33:52
742
原创 bizcharts图表封装之多折线图（带Slider）
一、带滚动条Slider的多折线图封装import React from "react";import { Chart, Geom, Axis, Tooltip, Legend} from "bizcharts";// @ts-ignoreimport Slider from 'bizcharts-plugin-slider';// @ts-ignoreimport DataSet from '@antv/data-set';import {dealSliderCha
2020-06-08 16:23:46
1865
8
原创 基于3.x版本的Bizcharts图表封装
一、前言 很早以前就想着将常用的Bizcharts封装起来，以后用着方便。但是不同项目有着完全不一样的需求，尤其是细节上，于是，在开发时增加了很多个变量，随着需求的不断变更，想用之前封装好的组件，真的太难了，看着组件越来越臃肿，真有点力不从心，后面索性就懒得封装通用性的组件了，一个模块直接复制之前封装好的组件，改改就能用了。最近，接连有同事来问我之前封装好的组件在哪里，他们想直接用。看着臃肿的代码，自己都开始嫌弃了。终于理解，要想封装成百分百适用的组件，几乎为0。 不再执...
2020-06-04 16:24:09
1549
原创 bizcharts图表封装之基础折线图（带Slider）
一、基础折线图封装import React from "react";import { Chart, Geom, Axis, Tooltip,} from "bizcharts";// @ts-ignoreimport Slider from 'bizcharts-plugin-slider';// @ts-ignoreimport DataSet from '@antv/data-set';import {dealSliderChange, filterSliderDa
2020-06-04 16:23:32
1287
原创 script标签动态引入js—cdn服务器挂了，整个项目起不来
1、前言2、两种解决方式2.1、getscript-promise+watcher解决方法： 1、项目中引入 getscript-promise ，（cnpm intall getscript-promise --save）; 2、从document.ejs 中删除原先加入的script标签； 3、在需要使用的地方引入getscript-promise，并动态加载 useEffect(() => { load() ...
2020-06-02 10:25:23
1260
原创 bizcharts图表中每个item的额外处理
一、前言及简介 产品就是一次又一次的迭代，不仅仅是功能性的，还有很多样式上的细枝末节。 ——by 做产品无奈吐槽 有时候真的对这个行业有些失望了，很多很多问题导致的很多很多工作其实都是由于产品最开始的考虑不周造成的，说白了，就是无用...
2020-05-29 17:04:01
803
4
原创 bizchart地图交互bug修改
首先，不得不吐槽下，这个地图的bug真的是太多了，去年初次使用时，被测试提出了一些这里多个圈、那里多条线，到今年，项目版本第n次迭代，测试又发现了新的问题： 中国地图“九段线”那块，鼠标悬浮时，因为没有实际的名称，悬浮后显示的是没有名称的悬浮框我自己尝试着复现，发现好难复现，但确实存在，而且确实是个bug。 试着在自定义Geom中通过自定义tooltip来做个判断，若是没有名称，则返回 null或者undefined或者直接return，然而，又有...
2020-05-14 15:07:49
443
原创 项目开发中探究dva model的effect及其类型
一、项目运行环境 ant中的pro4二、学习前的一些困惑 以下想法是在学习前的疑问，答案也是在囫囵吞枣看一下博客后的想法，当然大部分是错的。1、take、takeEvery、takeLatest有什么不同？ take、takeEvery、takeLatest是take的三种方式，具体有什么不同，未知2、cancel怎么使用？ ...
2020-05-08 14:50:57
1586
1
原创 ant中的Table之前端自动生成当前数据的index
需求描述： 在Table中的数据中，增加展示数据排名顺序的一列数据indx:表示当前数据在所在数据中的排名。不知道为啥，后端没有处理这个字段，于是前端处理了，本来以为这是个小的问题，但后来接了同事的代码，这块有问题，才发现这也算是个小的麻烦点，记录下来，以后直接用，不想动脑子了const column: ColumnProps<any>[] = [ ...
2020-04-26 15:44:47
1670
原创 ant组件之RangePicker禁用
一、前言 前端增加个时间范围的查询条件，突然的需求，时间还特别紧迫，还要前后端联调，二、代码 无力吐槽什么了，现在是2020年了，不是2019年，好吧！自己坑了自己，幸好同事帮忙在git上找到了思路，也幸好同事发现了我的粗心，代码如下： function disabledDate(current: any) { const allowDateRange = [...
2020-04-24 17:27:55
878
原创 项目开发工作总结（工具类、图表组件等）
一、前言 转眼间，来目前这家公司工作已经近一年了，虽然在这一年中有过很多抱怨（主要是关于产品、设计），但也收获良多。疫情期间，天灾人祸，人要生存，同样的公司也要，于是理所应当的一系列猛如虎的操作……以前也在想，一个工作到底能给我们本身带来什么？当你离职了，你又能得到什么？最近又不断的想着这个问题。 来JZ快一年了，还记得去这个时候正辛辛苦苦的准备着找工作，那个时候的自...
2020-04-16 16:31:15
643
原创 前端实现按照学期进行排序（JS之sort）
最近开发中遇到一个排序的问题，比如前端需要对下列数据进行排序： "第1学期"、"第2学期"、"第3学期"、"第4学期"、"第5学期"、"第6学期"、"第7学期"、"第8学期"说实话，一直觉得像排序这种数据处理，应该后端实现，可是由于这块逻辑太复杂了，后端代码已经很复杂了，在这种前后端都可以做的情况下，想想，还是前端来实现吧。 最初的思路是使用switc...
2020-04-13 15:27:50
871
原创 bizcharts之完全自定义tooltip（插件bx-tooltip）
一、需求描述1、横坐标固定写死 横坐标固定8个，哪怕数据只有一个，但是鼠标悬浮时，没有数据的横坐标应该也没有tootip 实现思路： 没有数据的横坐标对应的值置为0=====》产品不同意=====》 没有数据的横坐标对应的值置为null====》解决问题 方法： 没有数据的横坐标对应值设置为nul...
2020-04-10 19:59:44
2790
原创 Bizcharts之纵坐标label不能是小数&&双轴坐标轴
一、需求 使用某图统计某学校最近几年人数变化情况，横坐标年份，纵坐标表示人数（所以，纵坐标人数不能出现小数）二、实现思路 ①、此需求无论从哪里来说确实有必要； ②、想要纵坐标不出现小数，那么必须得人为的控制纵坐标 设置坐标轴的几个参数：tickCount、ticks、tickInterval 、max、 maxLimit……等（参考：htt...
2020-03-31 14:12:46
2131
原创 纯前端实现PDF导出工具类
没有复杂的样式，不处理各种问题，采用html2canvas和极速PDF，封装成可以直接使用的工具类，代码如下：import html2canvas from 'html2canvas';export function exportPDF(id: string, fileName?: string) { if (id) { const realTarget = document...
2020-03-30 14:39:38
671
原创 Bizcharts 之不常用API学习记录
1前言 日常开发过程中，使用bizcharts组件时，习惯了从官网复制代码，改改直接放入项目中或者将组件需要的数据以参数的形式传入到组件，一旦遇到官网没有的组件类型（一般是组合形式）或者是官网没有的组件样式（目前遇到的是坐标轴标题），立马就慌了，问问周围同事，大家说说没用，然后费尽口舌告诉产品或者设计实现不了！渐渐的一切变得理所应当了，而自己也变得自以为是，原来Bizc...
2020-03-25 17:15:00
1295
原创 bizcharts之分组箱形图
一、所谓前言 公司某个项目后期优化，分组区间柱状图改成分组箱形图，因为这两天刚好用到箱形图，就想着分组箱形图与箱型图之间应该和柱状图与分组柱状图一样，想着，就去查找官网，结果，就4个横坐标、3个图例，源数据居然有150条，3（图例）、4（横坐标）、5（单个箱形图数据）怎么也凑不到150，好吧...
2020-03-19 14:05:14
926
原创 纯前端导出PDF之采坑记录
1、导出pdf思路 step1：将要导出的页面“截图”为图片（html2canvas）； step2：将图片专为pdf，实现下载pdf功能（jsPDF）；2、具体代码 function exportPdf() { const target = document.getElementById('test'); if (target) { html...
2020-01-03 18:00:42
1122
4
原创 bizchart图表封装之多条折线图
多条折线图： 顾名思义，有多条折线封装： 数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色注意： 1、代码使用TypeScript实现 2、本次代码实现的均是曲线折线图，若只想是折线图，将去掉<Geomtype="line" shape="smooth"/>中的shape="smooth"即可，即...
2019-11-21 16:23:32
2569
2
原创 bizcharts图表封装之基础折线图
基础折线图： 由点（point）和线(line)组成封装： 数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色注意： bizcharts中单（柱状/折线）图默认不显示图例===》如果需要显示图例，需要自定义图例;代码使用TypeScript实现代码：import React from 'react';import { ...
2019-11-21 11:09:35
2421
原创 bizchart之使用总结
最近做前端开发，几乎全部都是统计图表，从基本的折线图、柱状图、饼图再到分别加滚动条，再到不怎么常用的桑基图、热力图以至于后面的双轴图，反正呢，你能想到的你想不到的我们公司的产品都可以帮你想出来，虽说是一把辛酸泪，但也是学到了好多（关于biachart），或者说是踩了好多坑，这篇先简洁的记录下坑吧，之后有时间再分享封装的各类图表。 1、限制纵坐标的范围（最大值） ？ ...
2019-11-18 15:20:42
3866
原创 你可能不知道的children（React）
一、我以为的children children嘛，child的复数形式，所以顾名思义，某个组件的children（this.props.children/props.children）其实就是这个组件的子组件，表现在代码中，无非就是(如下简易演示demo) <Parent> <Child1></Child1> <Chil...
2019-09-26 13:43:24
1673
原创 工具方法之数组操作相关
最近工作中，遇到很多情况下需要操作两个数组，比如：从一个数组中删除另外一个数组、求两个数组的公共元素……工作优先，于是磕磕碰碰的封装了一个方法，用于从一个数组中移除另外一个数组，代码如下：export function removeEleFromArr(arr: Array<any>, ele: any): Array<any> { const index...
2019-08-20 15:56:47
298
原创 bizchart中遇到的问题
1、如何实现自定义图例？ 给<Legend/>设置items，如下：<Legend custom={true} allowAllCanceled={true} items={[ { value: "waiting", ...
2019-08-15 11:16:50
3722
4
原创 那些年，那些被收藏的URL
换工作、换电脑，每一次的离职（虽然目前也才离职一次）需要做好多事情，也有好多不舍，包括人当然也包括那些被分门别类整理收藏好久的实用网址。那些让人醍醐灌顶的博客、那些因为各种原因还没来得及看的博客，还有那些常用的“工具地址”，以及无意间看到同事在使用的某个工具网站或是看些博客、视频时提及到的地址，现整理如下：工具相关：1、谷歌翻译：https://translate.g...
2019-06-13 09:48:29
383
原创 2019面试
距2017年7月的毕业已经将近两年了，2019年初，开启了跳槽辞职找工作之路，据说2019年是互联网寒冬，这一点在找工作的过程中国确实也是深有体会，当然，事在人为，也不是说寒冬都会被冻死，只要你装备足够，穿得足够厚，也是可以度过寒冬迎来春天的——前后经历大约两个月的时间，终于找到满意的工作入职，当然所谓的满意的工作仅仅存在于拿到offer入职的那一刻，此为题外话了，现在不说也罢。...
2019-05-28 20:25:36
414
原创 Pro框架中Redux使用的一点总结
随着dva框架和pro框架的使用，Redux在React项目开发过程中，变得越来越重要了，也由于各大脚手架的集成，使用redux正变得越来越简单，此文主要是总结了在pro框架下，Redux的使用方法。1、关于models文件的一点说明 pro脚手架的目录结构，十分清晰，其中models文件夹下的文件一般而言主要是调用services层，并对数据进行数据，现对其内...
2019-05-17 12:18:09
763
原创 VScode格式化代码的心酸路途
之前在公司一直用的是ideal做前端开发，而其他人用的是VScode，他们有用ESlint，而我每次只好在ideal中设置‘unable’即不让进行格式化校验……有关代码格式，被无数次吐槽，也尝试过在ideal中配置ESlint进行代码的格式化校验，无奈，每次都是斗志满满的开始，垂头丧气的放弃，也曾想过换开发工具，和大家保持一样用VScode，怎想，ideal中毒太深，完全无法适应V...
2019-05-10 14:15:02
2163
1
原创 CSS之左右固定，中间自适应
左右固定，中间自适应应该是CSS中常见的布局，或者说是CSS中经典的布局，百度查找具体的实现方式，自己敲代码时，发现了一个特别神奇的现象：右边的那个div老被挤下来，如图：一句一句对比百度到的代码，完全一样呀，为什么会这样？一遍又一遍的查找自己代码的不同之处，奔溃蒙圈……索性把人家的代码复制粘贴，我就不信，还没效果！奇迹出现了，竟然OK了，达到预期效果了！凭什么呀！ ...
2019-03-28 13:52:33
3927
原创 一个由addEventListener引发思考
经同事推荐，最近在看犀牛（JavaScript权威指南），刚刚看到前几页，有个提到客户端JavaScript的例子，模仿着，写着类似的代码，突然想到，如果是带参数的函数，改怎么调用，于是……一、功能简述 用JavaScript 给一个div添加点击事件，当点击之后，div中的文字边红色二、思路过程 最终实现的代码：<!DOCTYPE HTM...
2019-03-20 14:53:46
599
2
原创 CSS选择器之first-of-type 和 first-child 比较
一、概念 A>B :first-child ：父元素下的第一个子元素 为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效 A > B:first-of-type：父元素下的某个类型的第一个子元素 为A标签的孩子们中，第一个为B标签（...
2019-03-13 15:52:02
1649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人