Top 10 Examples of "bizcharts in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'bizcharts' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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';
} // 格式化坐标轴的显示
}} />