How to use bizcharts - 10 common examples
To help you get started, we’ve selected a few bizcharts examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
alibaba / BizCharts / typings / bizcharts-tests.tsx View on Github 
import * as React from 'react';
import * as BizCharts from 'bizcharts';
import { Chart, View, Shape, Tooltip, Coord, Axis, Legend, Guide, Facet } from 'bizcharts';
const g2: any = BizCharts.G2;
const global: G2.Global = g2.Global;
global.setTheme('dark');
// lodash function
const util: G2.Util = {
each: ()=>{},
map: ()=>{},
isObject: ()=>{},
isNumber: ()=>{},
isString: ()=>{},
isFunction: ()=>{},
other: ''
};
// same as use BizCharts.Util
const util2: BizCharts.Util = util;{
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic',
},
cfg.style
);
}
// 给point注册一个词云的shape
Shape.registerShape('point', 'cloud', {
drawShape(cfg, container) {
const attrs = getTextAttrs(cfg);
return container.addShape('text', {
attrs: Object.assign(attrs, {
x: cfg.x,
y: cfg.y,
}),
});
},
});
};import DataSet from '@antv/data-set';
import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts';
import React, { Component } from 'react';
const { DataView } = DataSet;
const { Text, Html, Arc } = Guide;
// 自定义Shape 部分
Shape.registerShape('point', 'pointer', {
drawShape(cfg, group) {
let point = cfg.points[0]; // 获取第一个标记点
point = this.parsePoint(point);
const center = this.parsePoint({ // 获取极坐标系下画布中心点
x: 0,
y: 0
});
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: point.x,
y2: point.y - 20,
stroke: cfg.color,
lineWidth: 5,{
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic',
},
cfg.style
);
}
// 给point注册一个词云的shape
Shape.registerShape('point', 'cloud', {
drawShape(cfg, container) {
const attrs = getTextAttrs(cfg);
return container.addShape('text', {
attrs: Object.assign(attrs, {
x: cfg.x,
y: cfg.y,
}),
});
},
});
};render() {
const data = [
{
sex: '男',
sold: 0.45,
},
{
sex: '女',
sold: 0.55,
},
];
Shape.registerShape('interval', 'radiusPie', {
draw(cfg, container) {
// 将归一化后的数据转换为画布上的坐标
const points = cfg.origin.points;
let path = [];
for (let i = 0; i < cfg.origin.points.length; i += 4) {
path.push(['M', points[i].x, points[i].y]);
path.push(['L', points[i + 1].x, points[i + 1].y]);
path.push(['L', points[i + 2].x, points[i + 2].y]);
path.push(['L', points[i + 3].x, points[i + 3].y]);
path.push(['L', points[i].x, points[i].y]);
path.push(['z']);
}
path = this.parsePath(path, true);
const rect = container.addShape('path', {name: 'PRERELEASE',
value: 109,
washaway: 0.5596330275229358,
},
{
name: 'RELEASING',
value: 48,
washaway: 0,
},
];
const colorSet = {
MODIFY: '#4FAAEB',
PRERELEASE: '#9AD681',
RELEASING: '#FED46B',
};
Shape.registerShape('interval', 'textInterval', {
drawShape(cfg, group) {
const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
const value = cfg.origin._origin.value;
group.addShape('text', {
attrs: {
text: value,
textAlign: 'center',
x: points[1].x + cfg.size / 2,
y: points[1].y,
fontFamily: 'PingFang SC',
fontSize: 12,
fill: '#BBB',
},
});
const polygon = group.addShape('polygon', {// 下面的代码会被作为 cdn script 注入 注释勿删
// CDN START
function creatData() {
const data = [];
let val = Math.random() * 100;
val = val.toFixed(1);
data.push({ value: val * 1 });
return data;
}
let data = creatData();
// 自定义Shape 部分
Shape.registerShape('point', 'pointer', {
drawShape(cfg, group) {
let point = cfg.points[0]; // 获取第一个标记点
point = this.parsePoint(point);
const center = this.parsePoint({ // 获取极坐标系下画布中心点
x: 0,
y: 0,
});
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: point.x,
y2: point.y,
stroke: cfg.color,
lineWidth: 5,import React, { Component } from 'react';
import { Chart, Coord, Geom, Shape } from 'bizcharts';
import Utils from '../../../utils';
const { formatterNumber } = Utils;
const greenColors = ['#d8e962', '#b6ef7f', '#9ef394', '#90f4a0', '#9bf396'];
const yellowColors = ['#e24e4c', '#e35c51', '#e46c55', '#e77a5b', '#e8875f'];
for (const item of ['compareBar', 'compareOrderBar']) {
Shape.registerShape('interval', item, {
drawShape(cfg, container) {
const points = cfg.points;
const maxPts = this.parsePoints([{ x: 1.0, y: 1.0 }]);
let path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path = this.parsePath(path);
// 今年数据，背景层
if (cfg.origin._origin.type === 'value') {
container.addShape('rect', {
attrs: {
x: 0,
y: cfg.y, // 矩形起始点为左上角
width: maxPts[0].x,
height: cfg.size,},
Population: {
type: 'pow',
alias: '人口总数'
},
GDP: {
alias: '人均国内生产总值($)'
},
Country: {
alias: '国家/地区'
}
};
const colorMap = {
'Asia': G2.Global.colors[0],
'Americas': G2.Global.colors[1],
'Europe': G2.Global.colors[2],
'Oceania': G2.Global.colors[3]
};
export default class PointC extends Component {
render() {
return (
{
return (value / 1000).toFixed(0) + 'k';
} // 格式化坐标轴的显示
}} />alias: '人均寿命（年）'
},
Population: {
type: 'pow',
alias: '人口总数'
},
GDP: {
alias: '人均国内生产总值($)'
},
Country: {
alias: '国家/地区'
}
};
const colorMap = {
'Asia': G2.Global.colors[0],
'Americas': G2.Global.colors[1],
'Europe': G2.Global.colors[2],
'Oceania': G2.Global.colors[3]
};
export default class PointC extends Component {
render() {
return (
{
return (value / 1000).toFixed(0) + 'k';
} // 格式化坐标轴的显示
}} />
