custom-series/lineRange/test/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apache ECharts Custom Series Test</title>
</head>

<body>
    <div id="main" style="width: 1000px;height:400px;border:1px solid #ccc"></div>

    <script src="../node_modules/echarts/dist/echarts.js"></script>
    <script src="../dist/index.js"></script>
    <script>
        echarts.use(window.lineRangeCustomSeriesInstaller);
        const chart = echarts.init(document.getElementById('main'));
        const data = [
            [0, 26.7, 32.5],
            [1, 25.3, 32.4],
            [2, 24.6, 32.7],
            [3, 26.8, 35.8],
            [4, 26.2, 33.1],
            [5, 24.9, 31.4],
            [6, 25.3, 32.9],
        ];

        option = {
            xAxis: {
                data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                type: 'category'
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                show: true
            },
            legend: {
                top: 15
            },
            series: [{
                type: 'custom',
                name: 'line',
                renderItem: 'lineRange',
                data,
                itemPayload: {
                    areaStyle: {
                    },
                    // lineStyle: {
                    //     width: 2
                    // }
                },
                encode: {
                    x: 0,
                    y: [1, 2],
                    tooltip: [1, 2]
                }
            }, {
                type: 'line',
                name: 'line', // To use the same color as custom series
                data: data.map(function (item) {
                    const ratio = Math.random() * 0.5 + 0.25;
                    return item[1] * ratio + item[2] * (1 - ratio);
                }),
            }]
        };

        chart.setOption(option);
    </script>
</body>

</html>