王文博--20221116--echarts-day01

<div id="box" style="width: 800px; height:400px;"></div>
    <script>
        const box = document.querySelector('#box');
        var myChart = echarts.init(box);
        var option;

        let base = +new Date(1995, 9, 3);
        let oneDay = 24 * 3600 * 1000;
        let data = [
            [base, Math.random() * 300]
        ];
        for (let i = 1; i < 10000; i++) {
            let now = new Date((base += oneDay));
            data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
        }
        option = {
            tooltip: {
                trigger: 'axis',
                position: function(pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: 'Large Ara Chart'
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 20
            }, {
                start: 0,
                end: 20
            }],
            series: [{
                name: 'Fake Data',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {},
                data: data
            }]
        };

        option && myChart.setOption(option);
    </script>