D3 Examples - Echarts test

xxxxxxxxxx
 
<!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>
​
    <style>
        div {
            display: inline-block;
        }
    </style>
</head>
<body>
​
​
<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);
​
        const div = document.createElement('div');
        const divId = `div${id}`;
        div.id = divId;
//        div.style.width = `${window.innerWidth}px`;
//        div.style.height = `${window.innerHeight}px`;
        div.style.width = `500px`;
        div.style.height = `300px`;
​
        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>
    