Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { Chart, registerShape } from '@antv/g2';
function creatData() {
const data = [];
let val = Math.random() * 6;
val = val.toFixed(1);
data.push({ value: val * 1 });
return data;
}
// 自定义Shape 部分
registerShape('point', 'pointer', {
draw(cfg, container) {
const group = container.addGroup({});
// 获取极坐标系下画布中心点
const center = this.parsePoint({ x: 0, y: 0 });
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 5,
lineCap: 'round',
},
});
fontSize: 12,
fill: '#BBB',
},
});
group.addShape('polygon', {
attrs: {
points: points.map((point) => [point.x, point.y]),
fill: cfg.color,
},
});
return group;
},
});
registerShape('interval', 'fallFlag', {
getPoints({ x, y, y0, size }) {
return [
{ x: x + size, y: y0 + size },
{ x, y },
];
},
draw(cfg, container) {
const origin = cfg.data;
if (_.isEqual(origin, data[data.length - 1])) {
return;
}
const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
const p1 = points[0];
const width = 9;
const washaway = origin.washaway;
import { Chart, registerShape } from '@antv/g2';
const data = [
{ type: '分类一', value: 20 },
{ type: '分类二', value: 18 },
{ type: '分类三', value: 32 },
{ type: '分类四', value: 15 },
{ type: 'Other', value: 15 },
];
// 可以通过调整这个数值控制分割空白处的间距,0-1 之间的数值
const sliceNumber = 0.01;
// 自定义 other 的图形,增加两条线
registerShape('interval', 'sliceShape', {
draw(cfg, container) {
const points = cfg.points;
let path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y - sliceNumber]);
path.push(['L', points[2].x, points[2].y - sliceNumber]);
path.push(['L', points[3].x, points[3].y]);
path.push('Z');
path = this.parsePath(path);
return container.addShape('path', {
attrs: {
fill: cfg.color,
path,
},
});
},
import { Chart, registerShape } from '@antv/g2';
// 自定义Shape 部分
registerShape('point', 'pointer', {
draw(cfg, container) {
const group = container.addGroup();
const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 5,
lineCap: 'round',
},
});
group.addShape('circle', {
{ type: '分类二', value: 25 },
{ type: '分类三', value: 18 },
{ type: '分类四', value: 15 },
{ type: '分类五', value: 10 },
{ type: 'Other', value: 5 },
];
let max = 0;
data.forEach(function(obj) {
if (obj.value > max) {
max = obj.value;
}
});
// 自定义 other 的图形,增加两条线
registerShape('interval', 'sliceShape', {
draw(cfg, container) {
const points = cfg.points;
const origin = cfg.data;
const percent = origin.value / max;
const xWidth = points[2].x - points[1].x;
const width = xWidth * percent;
let path = [];
path.push(['M', points[0].x, points[0].y]);
path.push(['L', points[1].x, points[1].y]);
path.push(['L', points[0].x + width, points[2].y]);
path.push(['L', points[0].x + width, points[3].y]);
path.push('Z');
path = this.parsePath(path);
return container.addShape('path', {
attrs: {
fill: cfg.color,
/** 简化折线点 */
import * as G2 from '@antv/g2';
import * as _ from '@antv/util';
import { lineSimplification } from '../../util/math';
import { getSplinePath } from '../../util/path';
import AreaParser from './main';
const G2DefaultTheme = G2.Global.theme;
G2.registerShape('area', 'miniArea', {
draw(cfg, container) {
const path = getPath(cfg, this, false);
const shape = container.addShape('path', {
attrs: {
path,
fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
opacity: cfg.opacity || 0.4,
},
});
return shape;
},
});
G2.registerShape('area', 'miniAreaSmooth', {
draw(cfg, container) {
const path = getPath(cfg, this, true);
['L', centerX + w / 2, centerY + h / 2],
['Z'],
];
*/
const path = getRectPath(centerX, centerY, width, height, cfg.origin.size);
return container.addShape('path', {
attrs: {
path,
fill: cfg.color,
opacity: 1,
},
});
},
});
registerShape('point', 'curvePoint', {
draw(cfg, container) {
const path = getCirclePath(cfg.x, cfg.y, cfg.size);
return container.addShape('path', {
attrs: {
path,
fill: cfg.color,
opacity: 1,
},
});
},
});
export interface MatrixViewConfig extends ViewConfig {
forceSquare?: boolean;
sizeField?: string;
colorField?: string;
}
const shape = container.addShape('path', {
attrs: _.mix(
{
path,
stroke: cfg.color || G2DefaultTheme.defaultColor,
lineWidth: cfg.size || 2,
},
cfg.style
),
});
return shape;
},
});
G2.registerShape('line', 'miniLineSmooth', {
draw(cfg, container) {
const points = lineSimplification(cfg.points);
const constraint = [
[0, 0],
[1, 1],
];
const path = getSplinePath(points, false, constraint);
const shape = container.addShape('path', {
attrs: _.mix(
{
path,
stroke: cfg.color || G2DefaultTheme.defaultColor,
lineWidth: cfg.size || 2,
},
cfg.style
),
G2.registerShape('area', 'miniArea', {
draw(cfg, container) {
const path = getPath(cfg, this, false);
const shape = container.addShape('path', {
attrs: {
path,
fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
opacity: cfg.opacity || 0.4,
},
});
return shape;
},
});
G2.registerShape('area', 'miniAreaSmooth', {
draw(cfg, container) {
const path = getPath(cfg, this, true);
const shape = container.addShape('path', {
attrs: {
path,
fill: parseGradient(cfg.color || G2DefaultTheme.defaultColor),
opacity: cfg.opacity || 0.5,
},
});
return shape;
},
});
function getPath(cfg, shape, isSmooth) {
const constraint = [
[0, 0],
/** 简化折线点 */
import * as G2 from '@antv/g2';
import * as _ from '@antv/util';
import { lineSimplification } from '../../util/math';
import { getSplinePath } from '../../util/path';
import LineParser from './main';
const G2DefaultTheme = G2.Global.theme;
G2.registerShape('line', 'miniLine', {
draw(cfg, container) {
const points = lineSimplification(cfg.points);
const path = [];
for (let i = 0; i < points.length; i++) {
const p = points[i];
const flag = i === 0 ? 'M' : 'L';
path.push([flag, p.x, p.y]);
}
const shape = container.addShape('path', {
attrs: _.mix(
{
path,
stroke: cfg.color || G2DefaultTheme.defaultColor,
lineWidth: cfg.size || 2,
},
cfg.style