![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bizchart
懒得懒
竹杖芒鞋轻胜马,谁怕?
展开
-
bizcharts图表下载
一、前端直接以图片方式下载到本地https://www.jianshu.com/p/df18dce77299二、前端将图片传递给后端,后端做一定处理后下载https://www.jianshu.com/p/52555efe0ed1原创 2021-02-22 16:39:26 · 297 阅读 · 2 评论 -
Bizcharts之如何实现图例和颜色绑定
一、需求描述 图例是动态的,即筛选条件不同,最终显示的图例个数和顺序也不同,但图例的颜色固定。如下图: 二、实现思路原创 2020-07-21 15:01:55 · 2595 阅读 · 0 评论 -
Bizchart图表封装之基础折线箱型图(自定义图例、设置Slider)
一、基础折线箱形图的封装1、概念 基础折线箱型图=箱型图+折线图,在箱型图的基础上增加折线图,折线图一般用来表示平均数。2、封装说明 同之前的基础箱型图,本次封装包括:自定义图例、滚动条Sliderimport React from "react";import { Chart, Geom, Axis, Tooltip,} from "bizcharts";// @ts-ignoreimport Slider from 'bizc...原创 2020-07-13 15:07:09 · 601 阅读 · 0 评论 -
Bizchart图表封装之分组箱型图(自定义图例、设置Slider)
一、分组箱型图的封装 先吐槽下官网分组箱形图的demo。 让人凌乱的数据结构 。第一次使用分组箱形图,差一点就被官网demo的数据结构吓退,在群里面问了好久,慢慢的才反应过来,官网的数据居然是最原始的数据——后端没有处理前的数据,也就是说没有计算什么中位数、四分位数之前的数据。好吧,我承认我的想象力不够。好在写过基础箱型图,在基础箱型图的基础上得出分组箱型图的数据机构应该是比基础的多一个字段而已。 哑口无言的tootip。看看官网的tooltip,你能看出...原创 2020-06-24 14:49:11 · 1065 阅读 · 2 评论 -
Bizchart图表封装之基础箱型图(自定义图例、设置Slider)
一、基础箱形图的封装 根据数据的类型,也可以将基础箱型图分为两种:①、"数组型":即其每天item对应的数值为数组([number,number,number,number,number]), eg: const boxData=[ { x:'一月', boxValue:[0,1,4,7,9] },...]②“数字型”:即其每个item对应的数据是数字, eg: const data = [ ...原创 2020-06-22 11:37:02 · 733 阅读 · 0 评论 -
bizcharts图表封装之热力图(可设置Slider)
一、热力图-色块图组件封装 第一次热力图中的色块图时,差点被官网demo的数据格式吓退了。但是既然产品选择了,作为开发,只能尽最大努力来实现了。于是和同事讨论这个数据格式,照着官网处理后的数据格式,感觉每个数据都要给定具体的做标点才行,这!又一次觉得实现不了。好在没有放弃,继续做各种测试,最后恍然大悟,其实热力图的数据结构和普通的做柱状/折线图没啥区别。 时隔快一年了,当初做的项目现在已经进入了迭代的死循环。而再回头看看当初困扰自己的热力图,似乎还是有些陌生,再看看官网...原创 2020-06-19 16:40:54 · 680 阅读 · 0 评论 -
bizcharts图表封装之基础雷达图
一、基础雷达图的封装 从官网的demo发现,基础的雷达图有两种,一种是线,一种是面,两者区别仅仅是线的图中没有<Goem type="area"/>,不过此次封装还做了两种的。 基础雷达图-面import React from "react";import { Chart, Coord, Geom, Axis, Tooltip, Legend} from "bizcharts";interface IBasicRadarProps { ...原创 2020-06-19 14:04:21 · 551 阅读 · 0 评论 -
bizcharts图表封装之基础环图
一、基础饼图组件封装 说明: 建议接口(后端)直接返回每个item对应的value(不需要计算出百分比),此次封装也只是基于后端不处理百分比处理的import React from "react";import {Axis, Chart, Geom, Legend, Tooltip,Coord,Label} from "bizcharts";// @ts-ignoreimport DataSet from '@antv/data-set';interface...原创 2020-06-18 14:58:12 · 1009 阅读 · 0 评论 -
bizcharts图表封装之基础饼图
一、基础饼图“分类”及不同分类后的封装1.1分类 基础饼图表现形式一样,但是按照使用上的不同,基础饼图封装分为两类:组件(前端)计算所占百分比和接口(后端计算百分比)。区别如下: 组件计算百分比(百分比饼图):①、需要前端手动处理接口数据;②、需要处理保留到小数点后x位;③、各个item所占比例和最大限度接近100%; 接口返回百分比:①、直接使用接口数据(后端处理数据以及小数点问题);②、一般情况下,后端返回的百分比不带“%”,前端需要手动增加;③、各item所占比例...原创 2020-06-18 11:36:28 · 1898 阅读 · 0 评论 -
bizcharts图表封装之百分比堆叠面积图(可设置Slider)
一、百分比堆叠面积图(可设置Slider)需求:统计出x年下,人民年收入(收入:1万以下、1万-10万、10万-20万、20万以上)所占比例要求:使用堆叠面积图;保留小数点后两位小数遇到问题:后端接口返回x年各收入所占比例,四舍五入导致这些数据加起来后有时候会大于100% ,有时候会小于100%,而这又是合理的。小于100% 时,图表正常(异常的不太明显),但是若大于100%时,纵坐标会多出一个刻度,对应的grid也会多出一条。...原创 2020-06-18 09:49:59 · 1099 阅读 · 0 评论 -
bizcharts图表封装之百分比堆叠柱状图(可设置Slider)
一、百分比堆积柱状图(可设置Slider)需求: 统计出x年下,人民年收入(收入:1万以下、1万-10万、10万-20万、20万以上)所占比例要求: 使用堆积柱状图;保留小数点后两位小数遇到问题: 后端接口返回x年各收入所占比例,四舍五入导致这些数据加起来后有时候会大于100% ,有时候会小于100%,而这又是合理的。小于100% 时,图表正常(异常的不太明显),但是若大于100%时,纵坐标会多出一个刻度,对应的grid也会多出一条。 ...原创 2020-06-17 18:00:41 · 976 阅读 · 4 评论 -
bizcharts图表封装之多面积图(带Slider)
一、可设置滚动条Slider的多面积图图表组件功能设置说明:1、对于连续性图表(折线图、面积图等)建议为图表横坐标设置range属性(详见代码);2、连续性图表建议设置 shape=“smooth”(实际情况看需求);3、面积图中建议设置<Geom type="point" .../>,不设置会出现:图表中没有数据,只有坐标轴(看起来),但是鼠标悬浮到坐标轴内,会出现点产生原因:面和点...原创 2020-06-17 10:08:00 · 494 阅读 · 0 评论 -
bizcharts图表封装之基础(单)面积图(带Slider)
一、可设置滚动条的基础面积图(单)组件封装组件功能设置说明: 1、对于连续性图表(折线图、面积图等)建议为图表横坐标设置range属性(详见代码); 2、连续性图表建议设置 shape=“smooth”(实际情况看需求); 3、面积图中建议设置 <Geom type="point" .../>,不设置会出现: 图表中没有数据,只有坐标轴(看起来),但是鼠标悬浮到坐标轴内,会出现点 产生原因: 面和点...原创 2020-06-17 09:59:07 · 519 阅读 · 0 评论 -
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 · 1053 阅读 · 0 评论 -
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 · 1101 阅读 · 0 评论 -
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 · 571 阅读 · 0 评论 -
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 · 1633 阅读 · 8 评论 -
基于3.x版本的Bizcharts图表封装
一、前言 很早以前就想着将常用的Bizcharts封装起来,以后用着方便。但是不同项目有着完全不一样的需求,尤其是细节上,于是,在开发时增加了很多个变量,随着需求的不断变更,想用之前封装好的组件,真的太难了,看着组件越来越臃肿,真有点力不从心,后面索性就懒得封装通用性的组件了,一个模块直接复制之前封装好的组件,改改就能用了。最近,接连有同事来问我之前封装好的组件在哪里,他们想直接用。看着臃肿的代码,自己都开始嫌弃了。终于理解,要想封装成百分百适用的组件,几乎为0。 不再执...原创 2020-06-04 16:24:09 · 1400 阅读 · 0 评论 -
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 · 1107 阅读 · 0 评论 -
bizcharts图表中每个item的额外处理
一、前言及简介 产品就是一次又一次的迭代,不仅仅是功能性的,还有很多样式上的细枝末节。 ——by 做产品无奈吐槽 有时候真的对这个行业有些失望了,很多很多问题导致的很多很多工作其实都是由于产品最开始的考虑不周造成的,说白了,就是无用...原创 2020-05-29 17:04:01 · 695 阅读 · 4 评论 -
bizchart地图交互bug修改
首先,不得不吐槽下,这个地图的bug真的是太多了,去年初次使用时,被测试提出了一些这里多个圈、那里多条线,到今年,项目版本第n次迭代,测试又发现了新的问题: 中国地图“九段线”那块,鼠标悬浮时,因为没有实际的名称,悬浮后显示的是没有名称的悬浮框我自己尝试着复现,发现好难复现,但确实存在,而且确实是个bug。 试着在自定义Geom中通过自定义tooltip来做个判断,若是没有名称,则返回 null或者undefined或者直接return,然而,又有...原创 2020-05-14 15:07:49 · 335 阅读 · 0 评论 -
项目开发工作总结(工具类、图表组件等)
一、前言 转眼间,来目前这家公司工作已经近一年了,虽然在这一年中有过很多抱怨(主要是关于产品、设计),但也收获良多。疫情期间,天灾人祸,人要生存,同样的公司也要,于是理所应当的一系列猛如虎的操作……以前也在想,一个工作到底能给我们本身带来什么?当你离职了,你又能得到什么?最近又不断的想着这个问题。 来JZ快一年了,还记得去这个时候正辛辛苦苦的准备着找工作,那个时候的自...原创 2020-04-16 16:31:15 · 518 阅读 · 0 评论 -
bizcharts之完全自定义tooltip(插件bx-tooltip)
一、需求描述1、横坐标固定写死 横坐标固定8个,哪怕数据只有一个,但是鼠标悬浮时,没有数据的横坐标应该也没有tootip 实现思路: 没有数据的横坐标对应的值置为0=====》产品不同意=====》 没有数据的横坐标对应的值置为null====》解决问题 方法: 没有数据的横坐标对应值设置为nul...原创 2020-04-10 19:59:44 · 2463 阅读 · 0 评论 -
Bizcharts之纵坐标label不能是小数&&双轴坐标轴
一、需求 使用某图统计某学校最近几年人数变化情况,横坐标年份,纵坐标表示人数(所以,纵坐标人数不能出现小数)二、实现思路 ①、此需求无论从哪里来说确实有必要; ②、想要纵坐标不出现小数,那么必须得人为的控制纵坐标 设置坐标轴的几个参数:tickCount、ticks、tickInterval 、max、 maxLimit……等(参考:htt...原创 2020-03-31 14:12:46 · 1874 阅读 · 0 评论 -
Bizcharts 之不常用API学习记录
1前言 日常开发过程中,使用bizcharts组件时,习惯了从官网复制代码,改改直接放入项目中或者将组件需要的数据以参数的形式传入到组件,一旦遇到官网没有的组件类型(一般是组合形式)或者是官网没有的组件样式(目前遇到的是坐标轴标题),立马就慌了,问问周围同事,大家说说没用,然后费尽口舌告诉产品或者设计实现不了!渐渐的一切变得理所应当了,而自己也变得自以为是,原来Bizc...原创 2020-03-25 17:15:00 · 1141 阅读 · 0 评论 -
bizcharts之分组箱形图
一、所谓前言 公司某个项目后期优化,分组区间柱状图改成分组箱形图,因为这两天刚好用到箱形图,就想着分组箱形图与箱型图之间应该和柱状图与分组柱状图一样,想着,就去查找官网,结果,就4个横坐标、3个图例,源数据居然有150条,3(图例)、4(横坐标)、5(单个箱形图数据)怎么也凑不到150,好吧...原创 2020-03-19 14:05:14 · 793 阅读 · 0 评论 -
bizchart图表封装之多条折线图
多条折线图: 顾名思义,有多条折线封装: 数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色注意: 1、代码使用TypeScript实现 2、本次代码实现的均是曲线折线图,若只想是折线图,将去掉<Geomtype="line" shape="smooth"/>中的shape="smooth"即可,即...原创 2019-11-21 16:23:32 · 2338 阅读 · 2 评论 -
bizcharts图表封装之基础折线图
基础折线图: 由点(point)和线(line)组成封装: 数据源、坐标轴、是否显示坐标轴标题、横纵坐标范围限定、自定义图例及颜色注意: bizcharts中单(柱状/折线)图默认不显示图例===》如果需要显示图例,需要自定义图例;代码使用TypeScript实现代码:import React from 'react';import { ...原创 2019-11-21 11:09:35 · 2187 阅读 · 0 评论 -
bizchart之使用总结
最近做前端开发,几乎全部都是统计图表,从基本的折线图、柱状图、饼图再到分别加滚动条,再到不怎么常用的桑基图、热力图以至于后面的双轴图,反正呢,你能想到的你想不到的我们公司的产品都可以帮你想出来,虽说是一把辛酸泪,但也是学到了好多(关于biachart),或者说是踩了好多坑,这篇先简洁的记录下坑吧,之后有时间再分享封装的各类图表。 1、限制纵坐标的范围(最大值) ? ...原创 2019-11-18 15:20:42 · 3594 阅读 · 0 评论 -
bizchart中遇到的问题
1、如何实现自定义图例? 给<Legend/>设置items,如下:<Legend custom={true} allowAllCanceled={true} items={[ { value: "waiting", ...原创 2019-08-15 11:16:50 · 3450 阅读 · 4 评论