wuChiSha的博客

一、可有可无的前言 从小，父母老师教导说做人要低调，事情要做了再说或者做了也不要说，于是慢慢的，就养成了沉默的性格，“不争，则万物不可与之争”，是我一直以来的座右铭。然而，等工作后才发现，一切并不是那么回事。 初入公司时，公司前端技术交流会上，我提出xx脚手架中的xxx层逻辑都一样，可以封装成一个方法，事实上我在上一家公司就是这么做的，感觉很方便。结果，很多前辈同事要么反对，要么说看个人。好吧！那我就自己默默的使用了。戏剧性的事情在后面，后来大佬按照我的思路又封装了一个...

一、需求描述 图例是动态的，即筛选条件不同，最终显示的图例个数和顺序也不同，但图例的颜色固定。如下图： 二、实现思路

一、基础折线箱形图的封装1、概念 基础折线箱型图=箱型图+折线图，在箱型图的基础上增加折线图，折线图一般用来表示平均数。2、封装说明 同之前的基础箱型图，本次封装包括：自定义图例、滚动条Sliderimport React from "react";import { Chart, Geom, Axis, Tooltip,} from "bizcharts";// @ts-ignoreimport Slider from 'bizc...

一、分组箱型图的封装 先吐槽下官网分组箱形图的demo。 让人凌乱的数据结构 。第一次使用分组箱形图，差一点就被官网demo的数据结构吓退，在群里面问了好久，慢慢的才反应过来，官网的数据居然是最原始的数据——后端没有处理前的数据，也就是说没有计算什么中位数、四分位数之前的数据。好吧，我承认我的想象力不够。好在写过基础箱型图，在基础箱型图的基础上得出分组箱型图的数据机构应该是比基础的多一个字段而已。 哑口无言的tootip。看看官网的tooltip，你能看出...

一、基础箱形图的封装 根据数据的类型，也可以将基础箱型图分为两种：①、"数组型"：即其每天item对应的数值为数组（[number,number,number,number,number]）, eg: const boxData=[ { x:'一月', boxValue:[0,1,4,7,9] },...]②“数字型”：即其每个item对应的数据是数字， eg: const data = [ ...

一、热力图-色块图组件封装 第一次热力图中的色块图时，差点被官网demo的数据格式吓退了。但是既然产品选择了，作为开发，只能尽最大努力来实现了。于是和同事讨论这个数据格式，照着官网处理后的数据格式，感觉每个数据都要给定具体的做标点才行，这！又一次觉得实现不了。好在没有放弃，继续做各种测试，最后恍然大悟，其实热力图的数据结构和普通的做柱状/折线图没啥区别。 时隔快一年了，当初做的项目现在已经进入了迭代的死循环。而再回头看看当初困扰自己的热力图，似乎还是有些陌生，再看看官网...

一、基础雷达图的封装 从官网的demo发现，基础的雷达图有两种，一种是线，一种是面，两者区别仅仅是线的图中没有<Goem type="area"/>，不过此次封装还做了两种的。 基础雷达图-面import React from "react";import { Chart, Coord, Geom, Axis, Tooltip, Legend} from "bizcharts";interface IBasicRadarProps { ...

一、基础饼图组件封装 说明： 建议接口（后端）直接返回每个item对应的value（不需要计算出百分比），此次封装也只是基于后端不处理百分比处理的import React from "react";import {Axis, Chart, Geom, Legend, Tooltip,Coord,Label} from "bizcharts";// @ts-ignoreimport DataSet from '@antv/data-set';interface...

一、基础饼图“分类”及不同分类后的封装1.1分类 基础饼图表现形式一样，但是按照使用上的不同，基础饼图封装分为两类：组件（前端）计算所占百分比和接口（后端计算百分比）。区别如下： 组件计算百分比（百分比饼图）：①、需要前端手动处理接口数据；②、需要处理保留到小数点后x位；③、各个item所占比例和最大限度接近100%； 接口返回百分比：①、直接使用接口数据（后端处理数据以及小数点问题）；②、一般情况下，后端返回的百分比不带“%”,前端需要手动增加；③、各item所占比例...

一、百分比堆叠面积图（可设置Slider）需求：统计出x年下，人民年收入（收入：1万以下、1万-10万、10万-20万、20万以上）所占比例要求：使用堆叠面积图；保留小数点后两位小数遇到问题：后端接口返回x年各收入所占比例，四舍五入导致这些数据加起来后有时候会大于100% ，有时候会小于100%，而这又是合理的。小于100% 时，图表正常（异常的不太明显），但是若大于100%时，纵坐标会多出一个刻度，对应的grid也会多出一条。...

一、百分比堆积柱状图（可设置Slider）需求： 统计出x年下，人民年收入（收入：1万以下、1万-10万、10万-20万、20万以上）所占比例要求： 使用堆积柱状图；保留小数点后两位小数遇到问题： 后端接口返回x年各收入所占比例，四舍五入导致这些数据加起来后有时候会大于100% ，有时候会小于100%，而这又是合理的。小于100% 时，图表正常（异常的不太明显），但是若大于100%时，纵坐标会多出一个刻度，对应的grid也会多出一条。 ...

一、可设置滚动条Slider的多面积图图表组件功能设置说明：1、对于连续性图表（折线图、面积图等）建议为图表横坐标设置range属性（详见代码）；2、连续性图表建议设置 shape=“smooth”（实际情况看需求）；3、面积图中建议设置<Geom type="point" .../>，不设置会出现：图表中没有数据，只有坐标轴（看起来），但是鼠标悬浮到坐标轴内，会出现点产生原因：面和点...

一、可设置滚动条的基础面积图（单）组件封装组件功能设置说明： 1、对于连续性图表（折线图、面积图等）建议为图表横坐标设置range属性（详见代码）； 2、连续性图表建议设置 shape=“smooth”（实际情况看需求）； 3、面积图中建议设置 <Geom type="point" .../>，不设置会出现： 图表中没有数据，只有坐标轴（看起来），但是鼠标悬浮到坐标轴内，会出现点 产生原因： 面和点...

一、带滚动条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...

一、带滚动条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

一、带滚动条Slider的单柱状图1.1单柱状图分类： 基础柱状图 、区间柱状图1.2区别： 区间柱状图，二者的区别只是数据源的不同 基础柱状图：yAxis 对应的值是number类型 区间柱状图：yAxis 对应的值是[number,number](数组)类型 1.3封装组件import React from "react";import { Chart, Ge...

一、带滚动条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

一、前言 很早以前就想着将常用的Bizcharts封装起来，以后用着方便。但是不同项目有着完全不一样的需求，尤其是细节上，于是，在开发时增加了很多个变量，随着需求的不断变更，想用之前封装好的组件，真的太难了，看着组件越来越臃肿，真有点力不从心，后面索性就懒得封装通用性的组件了，一个模块直接复制之前封装好的组件，改改就能用了。最近，接连有同事来问我之前封装好的组件在哪里，他们想直接用。看着臃肿的代码，自己都开始嫌弃了。终于理解，要想封装成百分百适用的组件，几乎为0。 不再执...

一、基础折线图封装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

一、项目运行环境 ant中的pro4二、学习前的一些困惑 以下想法是在学习前的疑问，答案也是在囫囵吞枣看一下博客后的想法，当然大部分是错的。1、take、takeEvery、takeLatest有什么不同？ take、takeEvery、takeLatest是take的三种方式，具体有什么不同，未知2、cancel怎么使用？ ...

一、前言 前端增加个时间范围的查询条件，突然的需求，时间还特别紧迫，还要前后端联调，二、代码 无力吐槽什么了，现在是2020年了，不是2019年，好吧！自己坑了自己，幸好同事帮忙在git上找到了思路，也幸好同事发现了我的粗心，代码如下： function disabledDate(current: any) { const allowDateRange = [...

一、前言 转眼间，来目前这家公司工作已经近一年了，虽然在这一年中有过很多抱怨（主要是关于产品、设计），但也收获良多。疫情期间，天灾人祸，人要生存，同样的公司也要，于是理所应当的一系列猛如虎的操作……以前也在想，一个工作到底能给我们本身带来什么？当你离职了，你又能得到什么？最近又不断的想着这个问题。 来JZ快一年了，还记得去这个时候正辛辛苦苦的准备着找工作，那个时候的自...

一、需求 使用某图统计某学校最近几年人数变化情况，横坐标年份，纵坐标表示人数（所以，纵坐标人数不能出现小数）二、实现思路 ①、此需求无论从哪里来说确实有必要； ②、想要纵坐标不出现小数，那么必须得人为的控制纵坐标 设置坐标轴的几个参数：tickCount、ticks、tickInterval 、max、 maxLimit……等（参考：htt...

没有复杂的样式，不处理各种问题，采用html2canvas和极速PDF，封装成可以直接使用的工具类，代码如下：import html2canvas from 'html2canvas';export function exportPDF(id: string, fileName?: string) { if (id) { const realTarget = document...

1、导出pdf思路 step1：将要导出的页面“截图”为图片（html2canvas）； step2：将图片专为pdf，实现下载pdf功能（jsPDF）；2、具体代码 function exportPdf() { const target = document.getElementById('test'); if (target) { html...

换工作、换电脑，每一次的离职（虽然目前也才离职一次）需要做好多事情，也有好多不舍，包括人当然也包括那些被分门别类整理收藏好久的实用网址。那些让人醍醐灌顶的博客、那些因为各种原因还没来得及看的博客，还有那些常用的“工具地址”，以及无意间看到同事在使用的某个工具网站或是看些博客、视频时提及到的地址，现整理如下：工具相关：1、谷歌翻译：https://translate.g...

之前在公司一直用的是ideal做前端开发，而其他人用的是VScode，他们有用ESlint，而我每次只好在ideal中设置‘unable’即不让进行格式化校验……有关代码格式，被无数次吐槽，也尝试过在ideal中配置ESlint进行代码的格式化校验，无奈，每次都是斗志满满的开始，垂头丧气的放弃，也曾想过换开发工具，和大家保持一样用VScode，怎想，ideal中毒太深，完全无法适应V...