tessl/npm-echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Apache ECharts

Name: tessl/npm-echarts
Author: tessl

Apache ECharts is a powerful, interactive charting and data visualization library for browser applications. Built in TypeScript and based on the ZRender rendering engine, it provides a comprehensive set of chart types, interactive features, and customization options for creating rich data visualizations in web applications.

Package Information

Package Name: echarts
Package Type: npm
Language: TypeScript
Installation: npm install echarts

Core Imports

Full import (includes all charts and components):

import * as echarts from 'echarts';

For optimal bundle size, use modular imports:

import * as echarts from 'echarts/core';
import { LineChart, BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

For CommonJS:

const echarts = require('echarts');

Basic Usage

import * as echarts from 'echarts';

// Initialize chart on DOM element
const myChart = echarts.init(document.getElementById('main'));

// Configure chart with data and styling
const option = {
  title: {
    text: 'ECharts Getting Started'
  },
  tooltip: {},
  xAxis: {
    data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
  },
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

// Display the chart
myChart.setOption(option);

// Responsive resize
window.addEventListener('resize', () => {
  myChart.resize();
});

Architecture

ECharts is built around several key architectural components:

Chart Instance: The EChartsType object that manages the chart lifecycle and provides the main API
Options System: Declarative configuration objects that define chart appearance, data, and behavior
Modular Design: Charts, components, and renderers can be imported individually to optimize bundle size
ZRender Engine: Low-level rendering engine supporting both Canvas and SVG output
Extension System: Plugin architecture for custom charts, components, and functionality
Coordinate Systems: Multiple coordinate systems (Cartesian, polar, geo, etc.) for different chart types

Capabilities

Chart Management

Core functionality for creating, configuring, and managing chart instances. Essential for all ECharts applications.

function init(dom?: HTMLElement | null, theme?: string | ThemeOption, opts?: EChartsInitOpts): EChartsType;

interface EChartsType {
  setOption(option: EChartsOption, opts?: SetOptionOpts): void;
  getOption(): EChartsOption;
  resize(opts?: ResizeOpts): void;
  dispose(): void;
}

Chart Management

Chart Types

Comprehensive collection of built-in chart types including line, bar, pie, scatter, and specialized visualizations like treemap, sankey, and custom charts.

// Chart installation (modular import)
import { LineChart, BarChart, PieChart } from 'echarts/charts';
echarts.use([LineChart, BarChart, PieChart]);

// Chart configuration via series option
interface SeriesOption {
  type: 'line' | 'bar' | 'pie' | 'scatter' | 'radar' | string;
  data: any[];
  name?: string;
}

Chart Types

Components

Interactive and display components including grids, axes, tooltips, legends, data zoom controls, and visualization mapping components.

// Component installation (modular import)
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
echarts.use([GridComponent, TooltipComponent, LegendComponent]);

// Component configuration via option properties
interface ComponentOption {
  grid?: GridComponentOption;
  tooltip?: TooltipComponentOption;
  legend?: LegendComponentOption;
}

Components

Interaction & Events

Event handling system for user interactions, programmatic actions, and custom behaviors including highlighting, selection, and data brushing.

interface EChartsType {
  on(eventName: string, handler: (params: any) => void, context?: any): void;
  off(eventName: string, handler?: Function): void;
  dispatchAction(payload: Payload): void;
}

interface Payload {
  type: string;
  [key: string]: any;
}

Interaction & Events

Data Operations

Data management capabilities including setting chart data, streaming data updates, coordinate conversions, and data transformations.

interface EChartsType {
  appendData(params: AppendDataParams): void;
  convertToPixel(finder: ConvertFinder, value: number[]): number[];
  convertFromPixel(finder: ConvertFinder, value: number[]): number[];
}

interface AppendDataParams {
  seriesIndex: number;
  data: any[][];
}

Data Operations

Theming & Styling

Comprehensive theming system with built-in themes, custom theme registration, and granular styling control for all visual elements.

function registerTheme(name: string, theme: ThemeOption): void;

interface ThemeOption {
  color?: string[];
  backgroundColor?: string;
  textStyle?: TextStyleOption;
  [key: string]: any;
}

Theming & Styling

Export & Rendering

Export functionality for generating images, PDFs, and SVG output, plus server-side rendering capabilities and canvas manipulation.

interface EChartsType {
  getDataURL(opts?: DataURLOptions): string;
  renderToCanvas(opts?: RenderOptions): HTMLCanvasElement;
  renderToSVGString(opts?: RenderOptions): string;
}

interface DataURLOptions {
  type?: string;
  pixelRatio?: number;
  backgroundColor?: string;
}

Export & Rendering

Extensions & Customization

Extension system for creating custom charts, components, coordinate systems, and data transformations, plus advanced configuration options.

function use(extension: EChartsExtension | EChartsExtension[]): void;
function registerMap(mapName: string, geoJson: any, specialAreas?: any): void;
function registerCustomSeries(name: string, renderItem: CustomSeriesRenderItem): void;

interface EChartsExtension {
  install(registers: EChartsExtensionInstallRegisters): void;
}

Extensions & Customization

Utility Namespaces

Comprehensive utility functions for advanced chart development, including math operations, graphics, formatting, and ZRender integration.

// Core utility namespaces
import * as echarts from 'echarts/core';

const zrender = echarts.zrender;    // ZRender graphics engine access
const matrix = echarts.matrix;     // Matrix math operations
const vector = echarts.vector;     // Vector math operations
const color = echarts.color;       // Color manipulation utilities
const graphic = echarts.graphic;   // Graphics utilities
const format = echarts.format;     // Data formatting utilities
const util = echarts.util;         // General utilities

Utility Namespaces

Types

Core TypeScript interfaces and types used throughout the ECharts API:

interface EChartsInitOpts {
  devicePixelRatio?: number;
  renderer?: 'canvas' | 'svg';
  width?: number;
  height?: number;
  locale?: string;
}

interface SetOptionOpts {
  notMerge?: boolean;
  replaceMerge?: string | string[];
  silent?: boolean;
}

interface ResizeOpts {
  width?: number;
  height?: number;
  silent?: boolean;
}

type EChartsOption = {
  title?: TitleComponentOption;
  tooltip?: TooltipComponentOption;
  legend?: LegendComponentOption;
  grid?: GridComponentOption;
  xAxis?: XAxisComponentOption | XAxisComponentOption[];
  yAxis?: YAxisComponentOption | YAxisComponentOption[];
  series?: SeriesOption | SeriesOption[];
  [key: string]: any;
};

Install with Tessl CLI

npx tessl i tessl/npm-echarts

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/echarts@6.0.x
Publish Source: CLI
Badge