Advanced utility functions for chart development, including math operations, graphics utilities, formatting functions, and direct access to the ZRender graphics engine.
Direct access to the underlying ZRender graphics library for low-level rendering operations.
// Access ZRender through echarts
import * as echarts from 'echarts/core';
const zrender = echarts.zrender;
// ZRender provides low-level graphics functionality
interface ZRenderType {
init(dom: HTMLElement, opts?: any): ZRenderInstance;
dispose(zr: ZRenderInstance): void;
version: string;
}
interface ZRenderInstance {
add(element: any): void;
remove(element: any): void;
refresh(): void;
resize(opts?: { width?: number; height?: number }): void;
clear(): void;
dispose(): void;
}Matrix transformation utilities for advanced graphics operations.
import * as echarts from 'echarts/core';
const matrix = echarts.matrix;
// Matrix operations
interface MatrixUtils {
/** Create identity matrix */
identity(): number[];
/** Copy matrix */
copy(out: number[], m: number[]): number[];
/** Multiply matrices */
mul(out: number[], m1: number[], m2: number[]): number[];
/** Translate matrix */
translate(out: number[], a: number[], v: number[]): number[];
/** Rotate matrix */
rotate(out: number[], a: number[], rad: number): number[];
/** Scale matrix */
scale(out: number[], a: number[], v: number[]): number[];
/** Invert matrix */
invert(out: number[], a: number[]): number[];
}Vector mathematics for coordinate calculations and transformations.
import * as echarts from 'echarts/core';
const vector = echarts.vector;
// Vector operations
interface VectorUtils {
/** Create vector */
create(x?: number, y?: number): number[];
/** Copy vector */
copy(out: number[], v: number[]): number[];
/** Add vectors */
add(out: number[], v1: number[], v2: number[]): number[];
/** Subtract vectors */
sub(out: number[], v1: number[], v2: number[]): number[];
/** Scale vector */
scale(out: number[], v: number[], s: number): number[];
/** Normalize vector */
normalize(out: number[], v: number[]): number[];
/** Calculate distance between vectors */
distance(v1: number[], v2: number[]): number;
/** Calculate vector length */
length(v: number[]): number;
/** Calculate dot product */
dot(v1: number[], v2: number[]): number;
}Usage Example:
// Vector calculations for custom positioning
const vector = echarts.vector;
const start = vector.create(0, 0);
const end = vector.create(100, 100);
const distance = vector.distance(start, end);
const midpoint = vector.create();
vector.add(midpoint, start, end);
vector.scale(midpoint, midpoint, 0.5);Color utilities for parsing, converting, and manipulating colors.
import * as echarts from 'echarts/core';
const color = echarts.color;
// Color utilities
interface ColorUtils {
/** Parse color string to RGBA array */
parse(colorStr: string): number[];
/** Convert RGBA array to hex string */
toHex(rgba: number[]): string;
/** Lift color brightness */
lift(color: string, level: number): string;
/** Darken color */
darken(color: string, level: number): string;
/** Lighten color */
lighten(color: string, level: number): string;
/** Convert HSL to RGB */
hsv2rgb(h: number, s: number, v: number): number[];
/** Convert RGB to HSL */
rgb2hsv(r: number, g: number, b: number): number[];
}Usage Example:
// Color manipulation for custom themes
const color = echarts.color;
const baseColor = '#5470c6';
const lightColor = color.lighten(baseColor, 0.3);
const darkColor = color.darken(baseColor, 0.3);
const rgbaArray = color.parse(baseColor);Advanced graphics functions for creating and manipulating visual elements.
import * as echarts from 'echarts/core';
const graphic = echarts.graphic;
// Graphics utilities
interface GraphicUtils {
/** Create graphic element */
createElement(type: string, opts: any): any;
/** Create path from SVG path string */
createFromString(str: string): any;
/** Merge path */
mergePath(pathEls: any[], opts: any): any;
/** Create icon */
createIcon(iconStr: string, opts?: any, rect?: any): any;
/** Get bounding rect */
getBoundingRect(elements: any[]): BoundingRect;
/** Linear gradient helper */
LinearGradient: LinearGradientConstructor;
/** Radial gradient helper */
RadialGradient: RadialGradientConstructor;
}
interface LinearGradientConstructor {
new(x: number, y: number, x2: number, y2: number, colorStops: ColorStop[]): LinearGradientObject;
}
interface RadialGradientConstructor {
new(x: number, y: number, r: number, colorStops: ColorStop[]): RadialGradientObject;
}
interface ColorStop {
offset: number;
color: string;
}Utilities for formatting numbers, dates, and other data values.
import * as echarts from 'echarts/core';
const format = echarts.format;
// Formatting utilities
interface FormatUtils {
/** Format number with precision */
addCommas(num: number | string): string;
/** Format number to string */
toCamelCase(str: string): string;
/** Normalize CSS value */
normalizeCssArray(val: number | number[]): number[];
/** Format time */
formatTime(template: string, value: Date | number, isUTC?: boolean): string;
/** Format number */
formatNumber(template: string, value: number): string;
}Core utility functions for common operations and data manipulation.
import * as echarts from 'echarts/core';
const util = echarts.util;
// General utilities (subset of zrUtil)
interface UtilUtils {
/** Check if value is array */
isArray(value: any): boolean;
/** Check if value is object */
isObject(value: any): boolean;
/** Check if value is function */
isFunction(value: any): boolean;
/** Check if value is string */
isString(value: any): boolean;
/** Deep clone object */
clone(obj: any): any;
/** Merge objects */
merge(target: any, source: any, overwrite?: boolean): any;
/** Extend object */
extend(target: any, source: any): any;
/** Iterate over array or object */
each(obj: any, cb: Function, context?: any): void;
/** Map array */
map(arr: any[], cb: Function, context?: any): any[];
/** Filter array */
filter(arr: any[], cb: Function, context?: any): any[];
/** Find item in array */
find(arr: any[], cb: Function, context?: any): any;
/** Create hash map */
createHashMap(obj?: any): HashMap;
/** Bind function context */
bind(func: Function, context: any): Function;
/** Throttle function calls */
throttle(func: Function, delay: number): Function;
}Chart-specific helper functions for common operations.
import * as echarts from 'echarts/core';
const helper = echarts.helper;
// Helper functions for chart development
interface HelperUtils {
/** Create series data list */
createList(seriesModel: any): any;
/** Create scale for axis */
createScale(axisModel: any, extent: number[]): any;
/** Get layout rectangle */
getLayoutRect(containerRect: any, margin: any, aspect?: number): any;
/** Create symbol */
createSymbol(symbolType: string, x: number, y: number, w: number, h: number, color?: string): any;
/** Enable hover emphasis */
enableHoverEmphasis(el: any, focus?: string, blurScope?: string): void;
/** Create text style */
createTextStyle(textStyleModel: any, opts?: any): any;
/** Parse percent value */
parsePercent(percent: string | number, all: number): number;
}Environment and platform detection utilities.
import * as echarts from 'echarts/core';
const env = echarts.env;
// Environment detection
interface EnvUtils {
/** Browser name */
browser: {
firefox: boolean;
ie: boolean;
edge: boolean;
newEdge: boolean;
weChat: boolean;
};
/** Device information */
os: {
windows: boolean;
mac: boolean;
android: boolean;
ios: boolean;
};
/** Canvas support */
canvasSupported: boolean;
/** SVG support */
svgSupported: boolean;
/** Touch support */
touchEventsSupported: boolean;
/** Pointer events support */
pointerEventsSupported: boolean;
/** Device pixel ratio */
devicePixelRatio: number;
}// Create custom graphics using utilities
const graphic = echarts.graphic;
// Create linear gradient
const gradient = new graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ff6b6b' },
{ offset: 1, color: '#4ecdc4' }
]);
// Use in chart option
const option = {
series: [{
type: 'bar',
data: [10, 20, 30],
itemStyle: {
color: gradient
}
}]
};// Dynamic color generation
const color = echarts.color;
const baseColors = ['#5470c6', '#91cc75', '#fac858'];
const colorPalette = baseColors.map(baseColor => ({
normal: baseColor,
light: color.lighten(baseColor, 0.3),
dark: color.darken(baseColor, 0.3)
}));// Custom positioning with vector math
const vector = echarts.vector;
const matrix = echarts.matrix;
function calculateCustomPosition(center, radius, angle) {
const position = vector.create(
center[0] + radius * Math.cos(angle),
center[1] + radius * Math.sin(angle)
);
// Apply transformation matrix if needed
const transform = matrix.identity();
matrix.rotate(transform, transform, Math.PI / 4);
return position;
}interface HashMap {
get(key: string): any;
set(key: string, value: any): void;
has(key: string): boolean;
remove(key: string): void;
each(cb: (value: any, key: string) => void): void;
}
interface BoundingRect {
x: number;
y: number;
width: number;
height: number;
}
interface LinearGradientObject {
type: 'linear';
x: number;
y: number;
x2: number;
y2: number;
colorStops: ColorStop[];
}
interface RadialGradientObject {
type: 'radial';
x: number;
y: number;
r: number;
colorStops: ColorStop[];
}