Apache ECharts 6.0.0 版本-探究自定义动态注册机制（二）

目录

浏览器环境自注册的版本

[ES Modules](#ES Modules)

UMD

使用效果：

---

首先，使用 npm 安装 @echarts-x/custom-violin：

npm install @echarts-x/custom-violin

注意：在 dist 目录下有多种环境适用的编译产物。

浏览器环境自注册的版本

如果在浏览器环境使用，没有使用额外的打包工具，

推荐在 <script> 标签中引入 dist/index.auto.js，

该文件会自动将自定义系列注册到全局变量 echarts 下（所以需要确保它在 echarts.js 之后引入），无需手动调用 echarts.use()，使用起来更方便：

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

ES Modules

如果你的项目支持 Webpack、Rollup 等现代构建环境，可以使用 ES Modules 版本的自定义系列：

import * as echarts from'echarts';
import violinCustomSeriesInstaller from'@echarts-x/custom-violin';

echarts.use(violinCustomSeriesInstaller);
const chart = echarts.init(...);

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

需要注意的是，这里需要手动调用 echarts.use(violinCustomSeriesInstaller);完成自定义系列的注册。

UMD

如果你的项目不支持 ES Modules，可以考虑使用 UMD 版本的自定义系列。同样需要手动调用 echarts.use(violinCustomSeriesInstaller); 完成自定义系列的注册。

const echarts = require('echarts');
const violinInstaller = require('@echarts-x/custom-violin');
echarts.use(violinInstaller);
const chart = echarts.init(...);

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

使用效果：