master

分支 (1)

管理

管理

master

guotou
/
test2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1200px;height:800px;"></div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <script type="module">
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom, 'dark');
        var option;
        function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }

        var data = [];
        var now = +new Date(1997, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }

        option = {
            title: {
                text: '设备阈值监测图'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };

        setInterval(function () {

            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }

            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);

        option && myChart.setOption(option);


        // $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (_rawData) {
        //     console.log(_rawData);
        //     run(_rawData);
        // });

        // function run(_rawData) {
        //     var countries = ['Finland', 'France', 'Germany', 'Iceland', 'Norway', 'Poland', 'Russia', 'United Kingdom'];
        //     var datasetWithFilters = [];
        //     var seriesList = [];
        //     echarts.util.each(countries, function (country) {
        //         var datasetId = 'dataset_' + country;
        //         datasetWithFilters.push({
        //             id: datasetId,
        //             fromDatasetId: 'dataset_raw',
        //             transform: {
        //                 type: 'filter',
        //                 config: {
        //                     and: [
        //                         { dimension: 'Year', gte: 1950 },
        //                         { dimension: 'Country', '=': country }
        //                     ]
        //                 }
        //             }
        //         });
        //         seriesList.push({
        //             type: 'line',
        //             datasetId: datasetId,
        //             showSymbol: false,
        //             name: country,
        //             endLabel: {
        //                 show: true,
        //                 formatter: function (params) {
        //                     return params.value[3] + ': ' + params.value[0];
        //                 }
        //             },
        //             labelLayout: {
        //                 moveOverlap: 'shiftY'
        //             },
        //             emphasis: {
        //                 focus: 'series'
        //             },
        //             encode: {
        //                 x: 'Year',
        //                 y: 'Income',
        //                 label: ['Country', 'Income'],
        //                 itemName: 'Year',
        //                 tooltip: ['Income'],
        //             }
        //         });
        //     });

        //     option = {
        //         animationDuration: 10000,
        //         dataset: [{
        //             id: 'dataset_raw',
        //             source: _rawData
        //         }].concat(datasetWithFilters),
        //         title: {
        //             text: 'Income of Germany and France since 1950'
        //         },
        //         tooltip: {
        //             order: 'valueDesc',
        //             trigger: 'axis'
        //         },
        //         xAxis: {
        //             type: 'category',
        //             nameLocation: 'middle'
        //         },
        //         yAxis: {
        //             name: 'Income'
        //         },
        //         grid: {
        //             right: 140
        //         },
        //         series: seriesList
        //     };

        //     myChart.setOption(option);

        // }

        // option && myChart.setOption(option);


    </script>


    <!-- <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script> -->
</body>
</html>