@echarts-x/custom-$CUSTOM_SERIES_KEBAB_NAME$

$CUSTOM_SERIES_NAME$ is a custom series for Apache ECharts. It's typically used to ...

Source Code

Usage

Browser Environment

For browser usage, use the auto-registration version that automatically installs the custom series when loaded:

<script src="./node_modules/echarts/dist/echarts.js"></script>
<script src="./node_modules/@echarts-x/custom-$CUSTOM_SERIES_KEBAB_NAME$/dist/index.auto.js"></script>
<script>
  // No need to call echarts.use(), automatically registered
  const chart = echarts.init(...);
  const option = {
    series: [{
      type: 'custom',
      renderItem: '$CUSTOM_SERIES_NAME$',
      // ...
    }]
  }
  chart.setOption(option);
</script>

See examples for more details.

UMD (Universal Module Definition)

For environments that need manual registration or when using AMD/CommonJS loaders:

// CommonJS
const echarts = require('echarts');
const $CUSTOM_SERIES_NAME$Installer = require('@echarts-x/custom-$CUSTOM_SERIES_KEBAB_NAME$');
echarts.use($CUSTOM_SERIES_NAME$Installer);
const chart = echarts.init(...);

const option = {
  series: [{
    type: 'custom',
    renderItem: '$CUSTOM_SERIES_NAME$',
    // ...
  }]
}
chart.setOption(option);

See examples for more details.

ESM (ES Modules)

For modern module bundlers or native ES module environments:

npm install @echarts-x/custom-$CUSTOM_SERIES_KEBAB_NAME$

import * as echarts from 'echarts';
import $CUSTOM_SERIES_NAME$CustomSeriesInstaller from '@echarts-x/custom-$CUSTOM_SERIES_KEBAB_NAME$';

echarts.use($CUSTOM_SERIES_NAME$CustomSeriesInstaller);
const chart = echarts.init(...);

const option = {
  series: [{
    type: 'custom',
    renderItem: '$CUSTOM_SERIES_NAME$',
    // ...
  }]
}
chart.setOption(option);

See examples for more details.

API

series.data

The data of the series is an array of arrays. Each sub-array represents ...

const data = [];

series.itemPayload

The itemPayload is an object that contains the following properties:

series.encode

To make sure the value axis and tooltip take the correct range, encode should be set as follows:

encode: {
    x: 0,
    y: 1,
    tooltip: 2
}