Apache ECharts

https://echarts.apache.org/
Admin
Apache ECharts is an open-source JavaScript visualization library that provides flexible chart...
Tokens:502,608
Snippets:2,250
Trust Score:10
Update:4 days ago
Show doc for...
Tokens:
Raw
### Link with Language Variable

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the lang variable to link to the Get Started page.

```markdown
[Get Started](${lang}/get-started)
```

--------------------------------

### Link to Example View

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the exampleViewPath variable to link to the scatter-exponential-regression example view.

```markdown
[line-simple](${exampleViewPath}scatter-exponential-regression&edit=1&reset=1)
```

--------------------------------

### Link to Example Editor

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the exampleEditorPath variable to link to the line-simple example editor.

```markdown
[line-simple](${exampleEditorPath}line-simple&edit=1&reset=1)
```

--------------------------------

### Embedding Examples via Iframe

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Syntax for embedding interactive examples using the md-example component.

```html
<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>
```

--------------------------------

### Full implementation code

Source: https://echarts.apache.org/handbook/en/how-to/interaction/drag

Complete example integrating tooltip customization, drag interaction, and responsive resizing.

```javascript
import echarts from 'echarts';

var symbolSize = 20;
var data = [
  [15, 0],
  [-50, 10],
  [-56.5, 20],
  [-46.5, 30],
  [-22.1, 40]
];
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  tooltip: {
    triggerOn: 'none',
    formatter: function(params) {
      return (
        'X: ' +
        params.data[0].toFixed(2) +
        '<br />Y: ' +
        params.data[1].toFixed(2)
      );
    }
  },
  xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },
  yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },
  series: [
    { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }
  ]
});
myChart.setOption({
  graphic: echarts.util.map(data, function(item, dataIndex) {
    return {
      type: 'circle',
      position: myChart.convertToPixel('grid', item),
      shape: { r: symbolSize / 2 },
      invisible: true,
      draggable: true,
      ondrag: echarts.util.curry(onPointDragging, dataIndex),
      onmousemove: echarts.util.curry(showTooltip, dataIndex),
      onmouseout: echarts.util.curry(hideTooltip, dataIndex),
      z: 100
    };
  })
});
window.addEventListener('resize', function() {
  myChart.setOption({
    graphic: echarts.util.map(data, function(item, dataIndex) {
      return { position: myChart.convertToPixel('grid', item) };
    })
  });
});
function showTooltip(dataIndex) {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: dataIndex
  });
}
function hideTooltip(dataIndex) {
  myChart.dispatchAction({ type: 'hideTip' });
}
function onPointDragging(dataIndex, dx, dy) {
  data[dataIndex] = myChart.convertFromPixel('grid', this.position);
  myChart.setOption({
    series: [
      {
        id: 'a',
        data: data
      }
    ]
  });
}
```

--------------------------------

### Link to Option Path

Source: https://echarts.apache.org/handbook/en/meta/edit-guide

Example of using the optionPath variable to link to xAxis.type documentation.

```markdown
[xAxis.type](${optionPath}xAxis.type)
```

--------------------------------

### Listen for map georoam event

Source: https://echarts.apache.org/en/faq.html

To get the zoom event of a map, set the series's roam to true and then listen for the 'georoam' event. The example logs the event parameters to the console.

```javascript
myChart.on('georoam', function (params) {
   console.log(params);
});
```

--------------------------------

### Generate Virtual Data for Calendar Chart

Source: https://echarts.apache.org/examples/en/editor.html?c=calendar-horizontal

Defines a function that generates an array of data points for each day of a given year. It uses echarts.time.parse to get the start and end timestamps, iterates daily, and formats each date as 'yyyy-MM-dd' with a random value between 0 and 999.

```javascript
function getVirtualData(year) {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse(+year + 1 + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
}
```

--------------------------------

### Aggregate Data with ecSimpleTransform

Source: https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1

This example shows how to fetch raw data, register the aggregate transform, and configure a dataset pipeline that filters by year and aggregates income statistics.

```javascript
$.when(
$.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json'),
$.getScript(
CDN_PATH + 'echarts-simple-transform/dist/ecSimpleTransform.min.js'
)
).done(function (res) {
run(res[0]);
});
function run(_rawData) {
echarts.registerTransform(ecSimpleTransform.aggregate);
option = {
dataset: [
{
id: 'raw',
source: _rawData
},
{
id: 'since_year',
fromDatasetId: 'raw',
transform: [
{
type: 'filter',
config: {
dimension: 'Year',
gte: 1950
}
}
]
},
{
id: 'income_aggregate',
fromDatasetId: 'since_year',
transform: [
{
type: 'ecSimpleTransform:aggregate',
config: {
resultDimensions: [
{ name: 'min', from: 'Income', method: 'min' },
{ name: 'Q1', from: 'Income', method: 'Q1' },
{ name: 'median', from: 'Income', method: 'median' },
```

--------------------------------

### Initialize Stock Chart Data and Formatting

Source: https://echarts.apache.org/examples/en/editor.html?c=matrix-stock

Sets up constants for chart styling, price color determination, and data arrays for price, volume, and MACD indicators.

```javascript
const lastClose = 50; // Close value of yesterday
const colorGreen = '#47b262';
const colorRed = '#eb5454';
const colorGray = '#888';
const colorGreenOpacity = 'rgba(71, 178, 98, 0.2)';
const colorRedOpacity = 'rgba(235, 84, 84, 0.2)';
const matrixMargin = 10;
const chartWidth = myChart.getWidth();
const chartHeight = myChart.getHeight();
const matrixWidth = chartWidth - matrixMargin * 2;
const matrixHeight = chartHeight - matrixMargin * 2;
const getPriceColor = (price) => {
return price === lastClose
? colorGray
: price > lastClose
? colorRed
: colorGreen;
};
const priceFormatter = (value) => {
const result = Math.round(value * 100) / 100 + '';
// Adding padding 0 if needed
let dotIndex = result.indexOf('.');
if (dotIndex < 0) {
return result + '.00';
} else if (dotIndex === result.length - 2) {
return result + '0';
}
return result;
};
const priceData = [];
const volumeData = [];
const averageData = []; // Volume weighted average price
const macdData = []; // MACD histogram data
const macdLineData = []; // MACD line (DIF) data
const signalLineData = []; // Signal line (DEA) data
let sumPrice = 0;
let sumVolume = 0;
const sTime = new Date('2025-10-16 09:30:00').getTime();
const eTime = new Date('2025-10-16 15:00:00').getTime();
const breakStartTime = new Date('2025-10-16 11:30:00').getTime();
```

--------------------------------

### Install ECharts via npm

Source: https://echarts.apache.org/download.html

Command to install the ECharts package using the npm package manager.

```bash
npm install echarts
```

--------------------------------

### Install ECharts from npm

Source: https://echarts.apache.org/en/download.html

Installs the latest version of Apache ECharts via npm. Requires Node.js and npm.

```bash
npm install echarts
```

--------------------------------

### Configure Dataset with Series Layout

Source: https://echarts.apache.org/examples/en/editor.html?c=dataset-link

This example uses a dataset source to define chart data and configures multiple line series to interpret the data by row.

```javascript
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: false
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
]
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
grid: { top: '55%' },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' }
},
{
type: 'line',

```

--------------------------------

### Create a Matrix Pie Chart

Source: https://echarts.apache.org/examples/en/editor.html?c=matrix-pie

This example demonstrates how to generate a grid of pie charts by iterating through x and y counts and setting the coordinateSystem to 'matrix'.

```javascript
const xCnt = 9;
const yCnt = 6;
const series = [];
for (let i = 0; i < xCnt; ++i) {
for (let j = 0; j < yCnt; ++j) {
series.push({
type: 'pie',
coordinateSystem: 'matrix',
center: [`Grade ${i + 1}`, `Class ${j + 1}`],
radius: 18,
data: [
{
value: Math.round(Math.random() * 10) + 10,
name: 'Male'
},
{
value: Math.round(Math.random() * 10) + 10,
name: 'Female'
}
],
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
});
}
}
option = {
legend: {
show: true,
bottom: 40
},
matrix: {
x: {
data: [
{

```

--------------------------------

### Dual Axis Chart Example

Source: https://echarts.apache.org/handbook/en/concepts/axis

A complete example showing a chart with two y-axes representing different units (precipitation and temperature) and a shared x-axis.

```javascript
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        rotate: 30
      },
      data: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      position: 'right',
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      position: 'left',
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Precipitation',
      type: 'bar',
      yAxisIndex: 0,
      data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      smooth: true,
      yAxisIndex: 1,
      data: [
        6.0,
        10.2,
        10.3,
        11.5,
        10.3,
        13.2,
        14.3,
        16.4,
        18.0,
        16.5,
        12.0,
        5.2
      ]
    }
  ]
};
```

--------------------------------

### Rich Text Formatting Example

Source: https://echarts.apache.org/handbook/en/how-to/label/rich-text

A comprehensive example demonstrating the use of rich text to create labels with titles, icons, and horizontal rules in a scatter plot.

```javascript
option = {
  series: [
    {
      type: 'scatter',
      data: [
        {
          value: [0, 0],
          label: {
            formatter: [
              '{tc|Center Title}{titleBg|}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        },
        {
          value: [0, 1],
          label: {
            formatter: [
              '{titleBg|Left Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n')
          }
        },
        {
          value: [0, 2],
          label: {
            formatter: [
              '{titleBg|Right Title}',
              '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
              '{hr|}',
              '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
            ].join('\n'),
            rich: {
              titleBg: {
                align: 'right'
              }
            }
          }
        }
      ],
      symbolSize: 1,
      label: {
        show: true,
        backgroundColor: '#ddd',
        borderColor: '#555',
        borderWidth: 1,
        borderRadius: 5,
        color: '#000',
        fontSize: 14,
        rich: {
          titleBg: {
            backgroundColor: '#000',
            height: 30,
            borderRadius: [5, 5, 0, 0],
            padding: [0, 10, 0, 10],
            width: '100%',
            color: '#eee'
          },
          tc: {
            align: 'center',
            color: '#eee'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          sunny: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'
            }
          },
          cloudy: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'
            }
          },
          showers: {
            height: 30,
            align: 'left',
            backgroundColor: {
              image:
                'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
            }
          }
        }
      }
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: 0,
    max: 2,
    inverse: true
  }
};
```

--------------------------------

### Confidence Band Chart Setup with Data Loading

Source: https://echarts.apache.org/examples/en/editor.html?c=confidence-band

This snippet initializes a chart, shows a loading indicator, fetches data from a JSON file, and then hides the loading indicator. It calculates a base value from the data and sets the chart option with a title, tooltip, and grid configuration. The tooltip formatter displays the percentage difference from the base value.

```javascript
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
myChart.hideLoading();
var base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
myChart.setOption(
(option = {
title: {
text: 'Confidence Band',
subtext: 'Example in MetricsGraphics.js',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
formatter: function (params) {
return (
params[2].name +
'<br />' +
((params[2].value - base) * 100).toFixed(1) +
'%'
);
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
}
})
);
});
```

--------------------------------

### echarts.getMap

Source: https://echarts.apache.org/en/api.html

Gets a registered map in a specific format.

```APIDOC
## echarts.getMap

### Description
Gets a registered map in a specific format.

### Method
Function

### Signature
`getMap(mapName: string)`

### Parameters
- **mapName** (string) - Required - The name of the map to retrieve.

### Return Value
Returns an object with the following structure:
```
{
    geoJSON: Object,
    specialAreas: Object
}
```

### Notes
- `geoJSON` can also be `geoJson`, they have the same reference.
- SVG registered by `registerMap` cannot be obtained by this method yet.
- If you only import the required components, starting from v5.3.0 `getMap` has to be used after the `MapChart` or `GeoComponent` is imported.
```

--------------------------------

### Initialize and configure ECharts

Source: https://echarts.apache.org/handbook/en/get-started

Initialize the ECharts instance and use setOption to render a simple bar chart with specified data.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- Include the ECharts file you just downloaded -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- Prepare a DOM with a defined width and height for ECharts -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // Initialize the echarts instance based on the prepared dom
      var myChart = echarts.init(document.getElementById('main'));

      // Specify the configuration items and data for the chart
      var option = {
        title: {
          text: 'ECharts Getting Started Example'
        },
        tooltip: {},
        legend: {
          data: ['sales']
        },
        xAxis: {
          data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [
          {
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // Display the chart using the configuration and the data defined above.
      myChart.setOption(option);
    </script>
  </body>
</html>
```

--------------------------------

### Importing the Lightweight Runtime

Source: https://echarts.apache.org/handbook/en/how-to/cross-platform/server

Methods for including the lightweight runtime via CDN or local NPM installation.

```html
<!-- Method one: Using CDN -->
<script src="https://cdn.jsdelivr.net/npm/echarts/ssr/client/dist/index.min.js"></script>
<!-- Method two: Using NPM -->
<script src="node_modules/echarts/ssr/client/dist/index.js"></script>
```
Tokens:
Raw