How to use the echarts/lib/echarts.registerVisual function in echarts

if (typeof category === 'string') {
                        category = categoryNameIdxMap[category];
                    }
                    if (!data.getItemVisual(idx, 'color', true)) {
                        data.setItemVisual(
                            idx, 'color',
                            categoriesData.getItemVisual(category, 'color')
                        );
                    }
                }
            });
        }
    });
});

echarts.registerVisual(function (ecModel) {
    ecModel.eachSeriesByType('graphGL', function (seriesModel) {
        var graph = seriesModel.getGraph();
        var edgeData = seriesModel.getEdgeData();

        var colorQuery = 'lineStyle.color'.split('.');
        var opacityQuery = 'lineStyle.opacity'.split('.');

        edgeData.setVisual('color', seriesModel.get(colorQuery));
        edgeData.setVisual('opacity', seriesModel.get(opacityQuery));

        edgeData.each(function (idx) {
            var itemModel = edgeData.getItemModel(idx);
            var edge = graph.getEdgeByIndex(idx);
            // Edge visual must after node visual
            var color = itemModel.get(colorQuery);
            var opacity = itemModel.get(opacityQuery);

import echarts from 'echarts/lib/echarts';

import './line3D/Line3DSeries';
import './line3D/Line3DView';

import symbolVisual from 'echarts/lib/visual/symbol';
import opacityVisual from './common/opacityVisual';

echarts.registerVisual(symbolVisual('line3D', 'circle', null));

echarts.registerVisual(opacityVisual('line3D'));

echarts.registerLayout(function (ecModel, api) {
    ecModel.eachSeriesByType('line3D', function (seriesModel) {
        var data = seriesModel.getData();
        var coordSys = seriesModel.coordinateSystem;

        if (coordSys) {
            if (coordSys.type !== 'cartesian3D') {
                if (__DEV__) {
                    console.error('line3D needs cartesian3D coordinateSystem');
                }
                return;
            }
            var points = new Float32Array(data.count() * 3);

            var item = [];

import echarts from 'echarts/lib/echarts';

import './line3D/Line3DSeries';
import './line3D/Line3DView';

import symbolVisual from 'echarts/lib/visual/symbol';
import opacityVisual from './common/opacityVisual';

echarts.registerVisual(symbolVisual('line3D', 'circle', null));

echarts.registerVisual(opacityVisual('line3D'));

echarts.registerLayout(function (ecModel, api) {
    ecModel.eachSeriesByType('line3D', function (seriesModel) {
        var data = seriesModel.getData();
        var coordSys = seriesModel.coordinateSystem;

        if (coordSys) {
            if (coordSys.type !== 'cartesian3D') {
                if (__DEV__) {
                    console.error('line3D needs cartesian3D coordinateSystem');
                }
                return;
            }
            var points = new Float32Array(data.count() * 3);

import echarts from 'echarts/lib/echarts';

import './scatter3D/Scatter3DSeries';
import './scatter3D/Scatter3DView';

import symbolVisual from 'echarts/lib/visual/symbol';
import opacityVisual from './common/opacityVisual';
echarts.registerVisual(echarts.util.curry(symbolVisual, 'scatter3D', 'circle', null));

echarts.registerVisual(echarts.util.curry(opacityVisual, 'scatter3D'));

echarts.registerLayout(function (ecModel, api) {
    ecModel.eachSeriesByType('scatter3D', function (seriesModel) {
        var data = seriesModel.getData();
        var coordSys = seriesModel.coordinateSystem;

        if (coordSys) {
            var coordDims = coordSys.dimensions;
            if (coordDims.length < 3) {
                if (__DEV__) {
                    console.error('scatter3D needs 3D coordinateSystem');
                }
                return;
            }
            var dims = coordDims.map(function (coordDim) {
                return seriesModel.coordDimToDataDim(coordDim)[0];

import echarts from 'echarts/lib/echarts';

import './bar3D/bar3DLayout';

import './bar3D/Bar3DView';
import './bar3D/Bar3DSeries';

import opacityVisual from './common/opacityVisual';

echarts.registerVisual(opacityVisual('bar3D'));

echarts.registerProcessor(function (ecModel, api) {
    ecModel.eachSeriesByType('bar3d', function (seriesModel) {
        var data = seriesModel.getData();
        data.filterSelf(function (idx) {
            return data.hasValue(idx);
        });
    });
});

import echarts from 'echarts/lib/echarts';

import './graphGL/GraphGLSeries';
import './graphGL/GraphGLView';
import symbolVisual from 'echarts/lib/visual/symbol';
import opacityVisual from './common/opacityVisual';

echarts.registerVisual(symbolVisual('graphGL', 'circle', null));

echarts.registerVisual(opacityVisual('graphGL'));

echarts.registerVisual(function (ecModel) {
    var paletteScope = {};
    ecModel.eachSeriesByType('graphGL', function (seriesModel) {
        var categoriesData = seriesModel.getCategoriesData();
        var data = seriesModel.getData();

        var categoryNameIdxMap = {};

        categoriesData.each(function (idx) {
            var name = categoriesData.getName(idx);
            categoryNameIdxMap[name] = idx;

            var itemModel = categoriesData.getItemModel(idx);

import echarts from 'echarts/lib/echarts';

import './surface/SurfaceSeries';
import './surface/SurfaceView';
import './surface/surfaceLayout';

import opacityVisual from './common/opacityVisual';

echarts.registerVisual(opacityVisual('surface'));

import echarts from 'echarts/lib/echarts';
import Geo3D from '../coord/geo3D/Geo3D';

import './map3D/Map3DSeries';
import './map3D/Map3DView';

import geo3DCreator from '../coord/geo3DCreator';

import opacityVisual from './common/opacityVisual';

echarts.registerVisual(echarts.util.curry(opacityVisual, 'map3D'));

echarts.registerAction({
    type: 'map3DChangeCamera',
    event: 'map3dcamerachanged',
    update: 'series:updateCamera'
}, function (payload, ecModel) {
    ecModel.eachComponent({
        mainType: 'series', subType: 'map3D', query: payload
    }, function (componentModel) {
        componentModel.setView(payload);
    });
});

function transformPolygon(poly, mapboxCoordSys) {
    var newPoly = [];
    for (var k = 0; k < poly.length; k++) {

import echarts from 'echarts/lib/echarts';

import './lines3D/lines3DLayout';

import './lines3D/Lines3DView';
import './lines3D/Lines3DSeries';

import opacityVisual from './common/opacityVisual';

echarts.registerVisual(opacityVisual('lines3D'));


echarts.registerAction({
    type: 'lines3DPauseEffect',
    event: 'lines3deffectpaused',
    update: 'series.lines3D:pauseEffect'
}, function () {});

echarts.registerAction({
    type: 'lines3DResumeEffect',
    event: 'lines3deffectresumed',
    update: 'series.lines3D:resumeEffect'
}, function () {});

echarts.registerAction({
    type: 'lines3DToggleEffect',

import echarts from 'echarts/lib/echarts';

import './scatterGL/ScatterGLSeries';
import './scatterGL/ScatterGLView';

import symbolVisual from 'echarts/lib/visual/symbol';
import opacityVisual from './common/opacityVisual';

echarts.registerVisual(echarts.util.curry(symbolVisual, 'scatterGL', 'circle', null));

echarts.registerVisual(echarts.util.curry(opacityVisual, 'scatterGL'));

echarts.registerLayout(function (ecModel, api) {
    ecModel.eachSeriesByType('scatterGL', function (seriesModel) {
        var data = seriesModel.getData();
        var coordSys = seriesModel.coordinateSystem;

        if (coordSys) {
            var dims = coordSys.dimensions;
            var points = new Float32Array(data.count() * 2);
            if (dims.length === 1) {
                data.each(dims[0], function (x, idx) {
                    var pt = coordSys.dataToPoint(x);
                    points[idx * 2] = pt[0];
                    points[idx * 2 + 1] = pt[1];