Extension system for creating custom charts, components, coordinate systems, and advanced configuration options.
Install and manage ECharts extensions.
/**
* Install extensions (charts, components, features)
* @param extension - Extension or array of extensions
*/
function use(extension: EChartsExtension | EChartsExtension[]): void;
interface EChartsExtension {
install(registers: EChartsExtensionInstallRegisters): void;
}
interface EChartsExtensionInstallRegisters {
registerComponentModel(componentModel: any): void;
registerComponentView(componentView: any): void;
registerSeriesModel(seriesModel: any): void;
registerChartView(chartView: any): void;
registerCoordinateSystem(type: string, coordSysCreator: any): void;
registerLayout(layoutTask: any): void;
registerVisual(visualTask: any): void;
registerTransform(transform: any): void;
registerAction(actionInfo: any, action: any): void;
registerUpdateLifecycle(name: string, cb: Function): void;
}Register geographic map data for map visualizations.
/**
* Register map data
* @param mapName - Map identifier
* @param geoJson - GeoJSON data or map data
* @param specialAreas - Special area configurations (optional)
*/
function registerMap(mapName: string, geoJson: any, specialAreas?: any): void;
/**
* Get registered map data
* @param mapName - Map identifier
* @returns Map data or undefined
*/
function getMap(mapName: string): any;Usage Example:
// Register world map
echarts.registerMap('world', worldGeoJsonData);
// Register map with special areas
echarts.registerMap('china', chinaGeoJsonData, {
'南海诸岛': {
left: 32,
top: 80,
width: 15
}
});Create custom chart types with complete control over rendering.
/**
* Register custom series type
* @param name - Series type name
* @param renderItem - Custom render function
*/
function registerCustomSeries(name: string, renderItem: CustomSeriesRenderItem): void;
interface CustomSeriesRenderItem {
(params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn;
}
interface CustomSeriesRenderItemParams {
context: any;
seriesId: string;
seriesName: string;
seriesIndex: number;
dataIndex: number;
dataIndexInside: number;
coordSys: any;
}
interface CustomSeriesRenderItemAPI {
value(dim?: number): number;
coord(data: number[]): number[];
size(dataSize: number[], dataItem?: number[]): number[];
style(userProps?: any): any;
styleEmphasis(userProps?: any): any;
visual(visualType: string): any;
barLayout(opt: any): any[];
currentSeriesIndices(): number[];
font(opt: any): string;
}Register custom data processors, layouts, and visual encodings.
/**
* Register option preprocessor
* @param preprocessorFunc - Preprocessor function
*/
function registerPreprocessor(preprocessorFunc: OptionPreprocessor): void;
/**
* Register data processor
* @param priority - Processing priority
* @param processor - Processor function
*/
function registerProcessor(priority: number | StageHandlerInternal, processor?: StageHandler): void;
/**
* Register layout algorithm
* @param priority - Layout priority
* @param layoutTask - Layout function
*/
function registerLayout(priority: number | StageHandlerInternal, layoutTask?: StageHandler): void;
/**
* Register visual encoding
* @param priority - Visual priority
* @param visualTask - Visual encoding function
*/
function registerVisual(priority: number | StageHandlerInternal, visualTask?: StageHandler): void;