next/examples/data/doc-example/pictorialBar-repeatLayout.js

var paper = 'image://data:image/png;base64,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';
var startData = 13000;
var maxData = 18000;
var minData = 5000;

option = {
    backgroundColor: '#0f375f',
    tooltip: {},
    legend: {
        data: ['all'],
        textStyle: {color: '#ddd'}
    },
    grid: {
        right: 20,
        left: 140,
        bottom: 160
    },
    xAxis: {
        data: ['a', 'b', 'c', 'd'],
        axisTick: {show: false},
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {show: false}
    },
    yAxis: {
        splitLine: {show: false},
        axisTick: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#ddd'
            }
        }
    },
    animationEasing: 'cubicOut',
    animationDuration: 100,
    animationDurationUpdate: 2000,
    series: [{
        type: 'pictorialBar',
        name: 'all',
        id: 'paper',
        hoverAnimation: true,
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: '{c} km',
                textStyle: {
                    fontSize: 16,
                    color: '#e54035'
                }
            }
        },
        symbol: paper,
        symbolSize: ['70%', 50],
        symbolMargin: '-25%',
        data: [{
            value: maxData,
            symbolRepeat: true
        }, {
            value: startData,
            symbolRepeat: true
        }, {
            value: startData,
            symbolBoundingData: startData,
            symbolRepeat: true
        }, {
            value: startData,
            symbolBoundingData: startData,
            symbolRepeat: 20
        }],
        markLine: {
            symbol: ['none', 'none'],
            label: {
                normal: {show: false}
            },
            lineStyle: {
                normal: {
                    color: '#e54035'
                }
            },
            data: [{
                yAxis: startData
            }]
        }
    }, {
        name: 'all',
        type: 'pictorialBar',
        symbol: 'circle',
        itemStyle: {
            normal: {
                color: '#185491'
            }
        },
        silent: true,
        symbolSize: ['150%', 50],
        symbolOffset: [0, 20],
        z: -10,
        data: [1, 1, 1, 1]
    }]
};



setInterval(function () {
    var dynamicData = Math.round(Math.random() * (maxData - minData) + minData);

    myChart.setOption({
        series: [{
            id: 'paper',
            data: [{
                value: maxData,
                symbolRepeat: true
            }, {
                value: dynamicData,
                symbolRepeat: true
            }, {
                value: dynamicData,
                symbolBoundingData: dynamicData,
                symbolRepeat: true
            }, {
                value: dynamicData,
                symbolBoundingData: dynamicData,
                symbolRepeat: 20
            }],
            markLine: {
                data: [{
                    yAxis: dynamicData
                }]
            }
        }]
    });
}, 3000);




// Add descriptions.
function addDescriptions() {
    var descriptions = [
        [
            'symbolBoundingData:',
            'value:',
            'symbolRepeat:',
            'characteristic:',
        ],
        [
            'default',
            'max value',
            'true (auto)',
            'This is a standard'
        ],
        [
            'default',
            'current value',
            'true (auto)',
            'Not accurate\nSymbol gap stable\nAppropriate to compare\nwith other bar'
        ],
        [
            'current value',
            'current value',
            'true (auto)',
            'Accurate\nSymbol gap unstable\nInappropriate to compare\nwith other bar'
        ],
        [
            'current value',
            'current value',
            '20 (a fixed number)',
            'Accurate\nSymbol gap unstable\nNot responsive'
        ]
    ];

    myChart.setOption({
        graphic: descriptions.map(function (item, index) {
            var pos = myChart.convertToPixel('grid', [Math.max(index - 1, 0), -1000]);

            return {
                type: 'group',
                position: pos,
                left: index ? null : 10,
                children: [{
                    type: 'text',
                    left: 'center',
                    top: 0,
                    style: {
                        text: descriptions[index].join('\n\n'),
                        fill: index ? '#fff' : 'yellow',
                        textAlign: index ? 'left' : 'right'
                    },
                    z: 101
                }]
            };
        })
    }, {silent: true});
}

setTimeout(function () {
    addDescriptions();
    myChart.on('updated', addDescriptions);
}, 100);