Echarts test

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

function randomInt(firstParam, secondParam) {
        if (secondParam === void 0) {
            return Math.floor(Math.random() * (firstParam + 1));
        } else {
            return firstParam + Math.floor(Math.random() * (secondParam - firstParam + 1));
        }
    }

function randomString(length) {
        let text = '';
        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

for (let i = 0; i < length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        }

return text;
    }

for (let i = 0; i < 10; i++) {
        createChart(i);
    }

function createChart(id) {

function randData(num) {
            var data = [];
            for (let i = 0; i < num; i++) {
                data.push(
                    {
                        value1: randomInt(1, 1000),
                        value2: randomInt(1, 1000),
                        value3: randomInt(1, 1000),
                        text: randomString(5)
                    }
                )

}
            return data;
        }

const data = randData(20);

document.body.appendChild(div);

var myChart = echarts.init(document.getElementById(divId));

const typeOptions = ['bar', 'line', 'pie', 'scatter', 'effectScatter', 'treemap', 'funnel', 'gauge'];

const selectedType = typeOptions[randomInt(0, typeOptions.length - 1)];

var option = {
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'inside',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                },
                {
                    id: 'dataZoomY',
                    type: 'inside',
                    yAxisIndex: [0],
                    filterMode: 'empty'
                }
            ],
            title: {
                text: `${selectedType}`
            },
            tooltip: {},
            legend: {
                data: ['Sales', 'Apples', 'Peas']
            },
            xAxis: {
                data: data.map(function (el) {
                    return el.text
                })
            },
            yAxis: {},
            series: [
                {
                    name: 'Sales',
                    type: selectedType,
                    data: data.map(function (el) {
                        return el.value1
                    }),

smooth: true
                },
                {
                    name: 'Apples',
                    type: selectedType,
                    data: data.map(function (el) {
                        return el.value2
                    }),
                    smooth: true
                },
                {
                    name: 'Peas',
                    type: selectedType,
                    data: data.map(function (el) {
                        return el.value3
                    }),
                    smooth: true
                }
            ]
        };

myChart.setOption(option);

}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js