next/examples/data/custom-gauge.js

/*
title: Custom Gauge
category: custom
titleCN: 自定义仪表
difficulty: 9
*/


var _datasourceList = [
    [[1, 156]],
    [[1, 54]],
    [[1, 131]],
    [[1, 32]],
    [[1, 103]],
    [[1, 66]],
];
var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
var _animationDuration = 1000;
var _animationDurationUpdate = 1000;
var _animationEasingUpdate = 'elasticOut';
var _valOnRadianMax = 200;
var _outerRadius = 100;
var _innerRadius = 85;
var _pointerInnerRadius = 40;
var _insidePanelRadius = 65;
var _currentDataIndex = 0;

function renderItem(params, api) {
    var valOnRadian = api.value(1);
    var coords = api.coord([api.value(0), valOnRadian]);
    var polarEndRadian = coords[3];
    var imageStyle = {
        image: _panelImageURL,
        x: params.coordSys.cx - _outerRadius,
        y: params.coordSys.cy - _outerRadius,
        width: _outerRadius * 2,
        height: _outerRadius * 2
    };

    return {
        type: 'group',
        children: [{
            type: 'image',
            style: imageStyle,
            clipPath: {
                type: 'sector',
                shape: {
                    cx: params.coordSys.cx,
                    cy: params.coordSys.cy,
                    r: _outerRadius,
                    r0: _innerRadius,
                    startAngle: 0,
                    endAngle: -polarEndRadian,
                    transition: 'endAngle',
                    enterFrom: { endAngle: 0 }
                }
            }
        }, {
            type: 'image',
            style: imageStyle,
            clipPath: {
                type: 'polygon',
                shape: {
                    points: makePionterPoints(params, polarEndRadian),
                },
                extra: {
                    polarEndRadian: polarEndRadian,
                    transition: 'polarEndRadian',
                    enterFrom: { polarEndRadian: 0 }
                },
                during: function (apiDuring) {
                    apiDuring.setShape(
                        'points',
                        makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                    );
                }
            },
        }, {
            type: 'circle',
            shape: {
                cx: params.coordSys.cx,
                cy: params.coordSys.cy,
                r: _insidePanelRadius
            },
            style: {
                fill: '#fff',
                shadowBlur: 25,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgb(0,0,50)'
            }
        }, {
            type: 'text',
            extra: {
                valOnRadian: valOnRadian,
                transition: 'valOnRadian',
                enterFrom: { valOnRadian: 0 }
            },
            style: {
                text: makeText(valOnRadian),
                fontSize: 40,
                x: params.coordSys.cx,
                y: params.coordSys.cy,
                fill: 'rgb(0,50,190)',
                align: 'center',
                verticalAlign: 'middle',
                enterFrom: { opacity: 0 }
            },
            during: function (apiDuring) {
                apiDuring.setStyle('text', makeText(apiDuring.getExtra('valOnRadian')));
            }
        }]
    };
}

function convertToPolarPoint(renderItemParams, radius, radian) {
    return [
        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
    ];
}

function makePionterPoints(renderItemParams, polarEndRadian) {
    return [
        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian + Math.PI * 0.03),
        convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
    ];
}

function makeText(valOnRadian) {
    // Validate additive animation calc.
    if (valOnRadian < -10) {
        alert('illegal during val: ' + valOnRadian);
    }
    return (valOnRadian / _valOnRadianMax * 100).toFixed(0) + '%'
}

option = {
    animationEasing: _animationEasingUpdate,
    animationDuration: _animationDuration,
    animationDurationUpdate: _animationDurationUpdate,
    animationEasingUpdate: _animationEasingUpdate,
    dataset: {
        source: _datasourceList[_currentDataIndex]
    },
    tooltip: {},
    angleAxis: {
        type: 'value',
        startAngle: 0,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 0,
        max: _valOnRadianMax
    },
    radiusAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false }
    },
    polar: {},
    series: [{
        type: 'custom',
        coordinateSystem: 'polar',
        renderItem: renderItem
    }]
};

// --------------
// Control Panel
app.config = {
    'Click Me ...': function () {
        _currentDataIndex++;
        _currentDataIndex >= _datasourceList.length && (_currentDataIndex = 0);
        myChart.setOption({
            dataset: {
                source: _datasourceList[_currentDataIndex]
            }
        });
    }
};