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

Components

Name: tessl/npm-echarts
Author: tessl

ECharts components provide interactive functionality, data processing, and display elements that enhance chart capabilities. Components are modular and can be imported individually for optimal bundle sizes.

Component Installation

Import only the components you need for optimal bundle size:

import * as echarts from 'echarts/core';
import { 
  GridComponent, 
  TooltipComponent, 
  LegendComponent,
  TitleComponent 
} from 'echarts/components';

echarts.use([GridComponent, TooltipComponent, LegendComponent, TitleComponent]);

Capabilities

Coordinate System Components

Components that define chart layouts and coordinate systems for data visualization.

import { 
  GridComponent, 
  PolarComponent, 
  RadarComponent,
  GeoComponent,
  SingleAxisComponent,
  ParallelComponent,
  CalendarComponent
} from 'echarts/components';

Grid Component

Cartesian coordinate system with X and Y axes, the foundation for line, bar, and scatter charts.

interface GridComponentOption {
  id?: string;
  show?: boolean;
  zlevel?: number;
  z?: number;
  left?: number | string;
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  width?: number | string;
  height?: number | string;
  containLabel?: boolean;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  tooltip?: TooltipComponentOption;
}

Usage Example:

const gridOption = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
    backgroundColor: '#f5f5f5',
    borderColor: '#ccc',
    borderWidth: 1
  },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [1, 2, 3] }]
};

Polar Component

Polar coordinate system for radar charts and polar bar/line charts.

interface PolarComponentOption {
  id?: string;
  zlevel?: number;
  z?: number;
  center?: [number | string, number | string];
  radius?: number | string | [number | string, number | string];
  tooltip?: TooltipComponentOption;
}

Display Components

Components that enhance chart presentation with titles, legends, and labels.

import { 
  TitleComponent,
  LegendComponent,
  GraphicComponent
} from 'echarts/components';

Title Component

Displays chart title and subtitle with customizable positioning and styling.

interface TitleComponentOption {
  id?: string;
  show?: boolean;
  text?: string;
  link?: string;
  target?: 'self' | 'blank';
  textStyle?: TextStyleOption;
  subtext?: string;
  sublink?: string;
  subtarget?: 'self' | 'blank';
  subtextStyle?: TextStyleOption;
  textAlign?: 'auto' | 'left' | 'right' | 'center';
  textVerticalAlign?: 'auto' | 'top' | 'bottom' | 'middle';
  triggerEvent?: boolean;
  padding?: number | number[];
  itemGap?: number;
  zlevel?: number;
  z?: number;
  left?: number | string;
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number | number[];
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
}

Usage Example:

const titleOption = {
  title: {
    text: 'Sales Report 2024',
    subtext: 'Monthly Performance Analysis',
    left: 'center',
    textStyle: {
      fontSize: 18,
      fontWeight: 'bold',
      color: '#333'
    },
    subtextStyle: {
      fontSize: 14,
      color: '#666'
    }
  }
};

Legend Component

Shows chart series names with interactive show/hide functionality.

interface LegendComponentOption {
  id?: string;
  show?: boolean;
  zlevel?: number;
  z?: number;
  left?: number | string;
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  width?: number | string;
  height?: number | string;
  orient?: 'horizontal' | 'vertical';
  align?: 'auto' | 'left' | 'right';
  padding?: number | number[];
  itemGap?: number;
  itemWidth?: number;
  itemHeight?: number;
  itemStyle?: ItemStyleOption;
  lineStyle?: LineStyleOption;
  symbolRotate?: number | 'inherit';
  formatter?: string | Function;
  selectedMode?: boolean | 'single' | 'multiple';
  inactiveColor?: string;
  inactiveBorderColor?: string;
  inactiveBorderWidth?: number | 'auto';
  selected?: { [key: string]: boolean };
  textStyle?: TextStyleOption;
  tooltip?: TooltipComponentOption;
  icon?: string;
  data?: (string | LegendDataItem)[];
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number | number[];
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  scrollDataIndex?: number;
  pageButtonItemGap?: number;
  pageButtonGap?: number | null;
  pageButtonPosition?: 'start' | 'end';
  pageFormatter?: string | Function;
  pageIcons?: { horizontal?: string[]; vertical?: string[] };
  pageIconColor?: string;
  pageIconInactiveColor?: string;
  pageIconSize?: number | number[];
  pageTextStyle?: TextStyleOption;
  animation?: boolean;
  animationDurationUpdate?: number;
}

interface LegendDataItem {
  name: string;
  icon?: string;
  textStyle?: TextStyleOption;
  tooltip?: TooltipComponentOption;
}

Interaction Components

Components that handle user interactions and provide data exploration capabilities.

import { 
  TooltipComponent,
  AxisPointerComponent,
  BrushComponent,
  DataZoomComponent
} from 'echarts/components';

Tooltip Component

Interactive data tooltips that appear on hover, showing detailed information about data points.

interface TooltipComponentOption {
  show?: boolean;
  showContent?: boolean;
  trigger?: 'item' | 'axis' | 'none';
  triggerOn?: 'mousemove' | 'click' | 'mousemove|click' | 'none';
  alwaysShowContent?: boolean;
  displayMode?: 'single' | 'multipleByCoordSys';
  renderMode?: 'html' | 'richText';
  showDelay?: number;
  hideDelay?: number;
  enterable?: boolean;
  confine?: boolean;
  appendToBody?: boolean;
  className?: string;
  transitionDuration?: number;
  position?: string | number[] | Function;
  formatter?: string | Function;
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  padding?: number | number[];
  textStyle?: TextStyleOption;
  extraCssText?: string;
  order?: 'seriesAsc' | 'seriesDesc' | 'valueAsc' | 'valueDesc';
  axisPointer?: AxisPointerComponentOption;
}

Usage Example:

const tooltipOption = {
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50,50,50,0.8)',
    borderColor: '#333',
    borderWidth: 1,
    textStyle: { color: '#fff' },
    formatter: function(params) {
      let result = params[0].name + '<br/>';
      params.forEach(param => {
        result += param.marker + param.seriesName + ': ' + param.value + '<br/>';
      });
      return result;
    },
    axisPointer: {
      type: 'cross',
      crossStyle: { color: '#999' }
    }
  }
};

Data Zoom Component

Provides data zooming and panning functionality for exploring large datasets.

interface DataZoomComponentOption {
  id?: string;
  type: 'slider' | 'inside';
  disabled?: boolean;
  xAxisIndex?: number | number[];
  yAxisIndex?: number | number[];
  radiusAxisIndex?: number | number[];
  angleAxisIndex?: number | number[];
  filterMode?: 'filter' | 'weakFilter' | 'empty' | 'none';
  start?: number;
  end?: number;
  startValue?: number | string | Date;
  endValue?: number | string | Date;
  minSpan?: number;
  maxSpan?: number;
  minValueSpan?: number | string | Date;
  maxValueSpan?: number | string | Date;
  orient?: 'horizontal' | 'vertical';
  zoomLock?: boolean;
  throttle?: number;
  rangeMode?: [('value' | 'percent'), ('value' | 'percent')];
  zoomOnMouseWheel?: boolean | 'shift' | 'ctrl' | 'alt';
  moveOnMouseMove?: boolean | 'shift' | 'ctrl' | 'alt';
  moveOnMouseWheel?: boolean | 'shift' | 'ctrl' | 'alt';
  preventDefaultMouseMove?: boolean;
}

Toolbox Component

Interactive toolbar with built-in tools for chart interaction and export.

interface ToolboxComponentOption {
  id?: string;
  show?: boolean;
  orient?: 'horizontal' | 'vertical';
  itemSize?: number;
  itemGap?: number;
  showTitle?: boolean;
  feature?: {
    saveAsImage?: ToolboxSaveAsImageFeature;
    restore?: ToolboxRestoreFeature;
    dataView?: ToolboxDataViewFeature;
    dataZoom?: ToolboxDataZoomFeature;
    magicType?: ToolboxMagicTypeFeature;
    brush?: ToolboxBrushFeature;
    [key: string]: any;
  };
  iconStyle?: ItemStyleOption;
  emphasis?: { iconStyle?: ItemStyleOption };
  zlevel?: number;
  z?: number;
  left?: number | string;
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  width?: number | string;
  height?: number | string;
  tooltip?: TooltipComponentOption;
}

interface ToolboxSaveAsImageFeature {
  show?: boolean;
  type?: 'png' | 'jpeg';
  name?: string;
  backgroundColor?: string;
  connectedBackgroundColor?: string;
  excludeComponents?: string[];
  pixelRatio?: number;
  lang?: string[];
}

Visual Mapping Components

Components for mapping data values to visual properties like colors and sizes.

import { 
  VisualMapComponent,
  VisualMapContinuousComponent,
  VisualMapPiecewiseComponent
} from 'echarts/components';

interface VisualMapComponentOption {
  id?: string;
  type?: 'continuous' | 'piecewise';
  show?: boolean;
  dimension?: number | string;
  seriesIndex?: number | number[] | 'all';
  hoverLink?: boolean;
  inRange?: VisualMapInRangeOption;
  outOfRange?: VisualMapInRangeOption;
  controller?: {
    inRange?: VisualMapInRangeOption;
    outOfRange?: VisualMapInRangeOption;
  };
  target?: {
    inRange?: VisualMapInRangeOption;
    outOfRange?: VisualMapInRangeOption;
  };
  itemWidth?: number;
  itemHeight?: number;
  align?: 'auto' | 'left' | 'right';
  text?: [string, string];
  textGap?: number | number[];
  precision?: number;
  color?: string[];
  formatter?: string | Function;
  range?: [number, number];
  calculable?: boolean;
  realtime?: boolean;
  inverse?: boolean;
  splitNumber?: number;
  minOpen?: boolean;
  maxOpen?: boolean;
  showLabel?: boolean;
  margin?: number;
  left?: number | string;
  top?: number | string;
  right?: number | string;
  bottom?: number | string;
  orient?: 'horizontal' | 'vertical';
  padding?: number | number[];
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number | number[];
  textStyle?: TextStyleOption;
  zlevel?: number;
  z?: number;
}

interface VisualMapInRangeOption {
  symbol?: string | string[];
  symbolSize?: number | number[];
  color?: string | string[];
  colorAlpha?: number | number[];
  opacity?: number | number[];
  colorLightness?: number | number[];
  colorSaturation?: number | number[];
  colorHue?: number | number[];
}

Types

interface TextStyleOption {
  color?: string;
  fontStyle?: 'normal' | 'italic' | 'oblique';
  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  width?: number | string;
  height?: number | string;
  textBorderColor?: string;
  textBorderWidth?: number;
  textBorderType?: 'solid' | 'dashed' | 'dotted';
  textBorderDashOffset?: number;
  textShadowColor?: string;
  textShadowBlur?: number;
  textShadowOffsetX?: number;
  textShadowOffsetY?: number;
  overflow?: 'break' | 'breakAll' | 'truncate' | 'none';
  ellipsis?: string;
  padding?: number | number[];
  backgroundColor?: string;
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number | number[];
  shadowBlur?: number;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
}

interface LabelOption {
  show?: boolean;
  position?: string | number[];
  distance?: number;
  rotate?: number;
  offset?: number[];
  minMargin?: number;
  overflow?: 'break' | 'breakAll' | 'truncate' | 'none';
  silent?: boolean;
  precision?: number | 'auto';
  valueAnimation?: boolean;
  rich?: { [key: string]: TextStyleOption };
  formatter?: string | Function;
  color?: string;
  fontStyle?: 'normal' | 'italic' | 'oblique';
  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
  fontFamily?: string;
  fontSize?: number;
  align?: 'left' | 'center' | 'right';
  verticalAlign?: 'top' | 'middle' | 'bottom';
  lineHeight?: number;
  backgroundColor?: string | { image: string };
  borderColor?: string;
  borderWidth?: number;
  borderRadius?: number | number[];
  padding?: number | number[];
  shadowColor?: string;
  shadowBlur?: number;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  width?: number | string;
  height?: number | string;
  textBorderColor?: string;
  textBorderWidth?: number;
  textShadowColor?: string;
  textShadowBlur?: number;
  textShadowOffsetX?: number;
  textShadowOffsetY?: number;
}

Install with Tessl CLI