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

Theming & Styling

Name: tessl/npm-echarts
Author: tessl

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

Capabilities

Theme Registration

/**
 * Register a custom theme
 * @param name - Theme name
 * @param theme - Theme configuration object
 */
function registerTheme(name: string, theme: ThemeOption): void;

interface ThemeOption {
  /** Color palette for series */
  color?: string[];
  /** Chart background color */
  backgroundColor?: string;
  /** Default text style */
  textStyle?: TextStyleOption;
  /** Title styling */
  title?: Partial<TitleComponentOption>;
  /** Legend styling */
  legend?: Partial<LegendComponentOption>;
  /** Line chart styling */
  line?: Partial<LineSeriesOption>;
  /** Bar chart styling */
  bar?: Partial<BarSeriesOption>;
  /** Additional component styling */
  [key: string]: any;
}

Usage Example:

// Register custom theme
echarts.registerTheme('custom-dark', {
  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9'],
  backgroundColor: '#404a59',
  textStyle: {
    color: '#fff'
  },
  title: {
    textStyle: {
      color: '#fff'
    }
  }
});

// Apply theme during initialization
const chart = echarts.init(dom, 'custom-dark');

Built-in Themes

ECharts includes several built-in themes.

// Available built-in themes
type BuiltinTheme = 'light' | 'dark';

// Apply built-in theme
const chart = echarts.init(dom, 'dark');

Style Configuration

Granular control over visual styling for all chart elements.

interface ItemStyleOption {
  color?: string | Function;
  borderColor?: string;
  borderWidth?: number;
  borderType?: 'solid' | 'dashed' | 'dotted';
  borderRadius?: number | number[];
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  opacity?: number;
  decal?: DecalObject;
}

interface LineStyleOption {
  color?: string;
  width?: number;
  type?: 'solid' | 'dashed' | 'dotted';
  dashOffset?: number;
  cap?: 'butt' | 'round' | 'square';
  join?: 'bevel' | 'round' | 'miter';
  miterLimit?: number;
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  opacity?: number;
}

Install with Tessl CLI