ECharts echarts.init & Option API Reference

`echarts.init`

5 methods

Instance methods on an ECharts chart obtained via echarts.init(dom).

echarts.init(dom, theme?, opts?) -> ECharts

Initializes an ECharts instance on a DOM element, optionally with a registered theme and renderer/size opts.

Parameters

Name	Type	Description
dom	HTMLElement	Container element.
theme	string \| object	Optional registered theme name or theme object.
opts	object	Optional { renderer: 'canvas' \| 'svg', width, height, locale }.

Returns

ECharts

Example

echarts

import * as echarts from 'echarts';
const chart = echarts.init(document.getElementById('main'), null, {
  renderer: 'canvas',
});

chart.setOption(option, opts?)

Sets (and merges) the chart configuration option. Use opts.notMerge=true to replace instead of merge.

Parameters

Name	Type	Description
option	EChartsOption	Configuration object: series, xAxis, yAxis, tooltip, legend, etc.
opts	object	Optional { notMerge, lazyUpdate, silent }.

Returns

void

Example

echarts

chart.setOption({
  xAxis: { type: 'category', data: ['Mon', 'Tue'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20] }],
});

chart.getOption() -> EChartsOption

Returns the current option object (a clone) of the chart, including merged and default values.

Returns

EChartsOption

Example

echarts

const current = chart.getOption();
console.log(current.series);

chart.resize(opts?)

Resizes the chart. With no args, fits the container; with opts, sets width/height/silent explicitly.

Parameters

Name	Type	Description
opts	object	Optional { width, height, silent }.

Returns

void

Example

echarts

window.addEventListener('resize', () => chart.resize());

chart.dispose()

Disposes the chart instance, releasing resources and removing the DOM it created.

Returns

void

Example

echarts

chart.dispose();

`Option`

4 methods

The setOption configuration object: series, xAxis, yAxis, and tooltip are the core of every chart.

series: [{ type, data, ... }]

Array of series definitions. Each series has a type (bar, line, pie, scatter, etc.) and a data array plus type-specific options.

Parameters

Name	Type	Description
type	string	Series type: 'bar', 'line', 'pie', 'scatter', 'radar', etc.
data	Array	Data values; numbers, [value] pairs, or objects.

Returns

option

Example

echarts

series: [
  { type: 'bar', data: [5, 20, 36, 10] },
  { type: 'line', data: [15, 12, 30, 20] },
]

xAxis: { type, data }

Configures the x axis. type 'category' uses data labels; 'value' is numeric; 'time' handles time axes.

Parameters

Name	Type	Description
type	string	'category' \| 'value' \| 'time' \| 'log'.
data	Array	Category labels (for type 'category').

Returns

option

Example

echarts

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu'],
}

yAxis: { type }

Configures the y axis. Most charts use one value axis; multiple axes can be declared as an array.

Parameters

Name	Type	Description
type	string	'value' \| 'category' \| 'time' \| 'log'.

Returns

option

Example

echarts

yAxis: { type: 'value', min: 0, max: 100 }

tooltip: { trigger, formatter }

Configures the hover tooltip. trigger 'item' (per data point, good for pie) or 'axis' (per axis, good for bar/line).

Parameters

Name	Type	Description
trigger	string	'item' \| 'axis' \| 'none'.
formatter	string \| Function	String template or callback (params) => string.

Returns

option

Example

echarts

tooltip: {
  trigger: 'axis',
  formatter: '{b}: {c}',
}

All references