使用ECharts动态展示统计数据-优快云博客

本文链接：https://blog.youkuaiyun.com/esrrhs/article/details/77043651
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<select name="select" id="select_k1" class="xla_k">
</select>
<select name="select" id="select_k2" class="xla_k">
</select>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1900px;height:800px;"></div>
<script type="text/javascript">

    function iniHeads() {
        $.getJSON('statDataHeads.html', function (jsondata) {

            var k1 = document.getElementById("select_k1");
            k1.options.length = 0;
            for (var i = 0; i < jsondata.length; i++) {
                k1.options.add(new Option(jsondata[i], jsondata[i]));
            }

            k1.onchange = function(){

                // 更改值后执行的代码
                var index = k1.selectedIndex;
                var head = k1.options[index].value;

                iniIps(head);
            }

            var head = k1.options[0].value;
            iniIps(head);
        });
    }
    iniHeads();


    function iniIps(headname) {
        $.getJSON('statDataIps.html?head='+headname, function (jsondata) {

            var k1 = document.getElementById("select_k1");
            var k2 = document.getElementById("select_k2");

            k2.options.length = 0;
            for (var i = 0; i < jsondata.length; i++) {
                k2.options.add(new Option(jsondata[i], jsondata[i]));
            }

            k2.onchange = function(){

                // 更改值后执行的代码
                var index = k1.selectedIndex;
                var head = k1.options[index].value;

                var index2 = k2.selectedIndex;
                var ip = k2.options[index2].value;

                showdata(head, ip);
            }

            var index = k1.selectedIndex;
            var head = k1.options[index].value;
            var ip = k2.options[0].value;
            showdata(head, ip);
        });
    }

    // 基于准备好的dom，初始化echarts实例
    function showdata(headname, ip) {
        $.getJSON('statData.html?head='+headname+'&ip='+ip, function (jsondata) {
            var date = [];
            for (var i = jsondata.length - 1; i >= 0; i = i - 1) {
                date.push(jsondata[i].time);
            }

            var first = jsondata[0];

            var series = [];
            for (var key in first.data) {

                var name = key;
                var data = [];

                for (var i = jsondata.length - 1; i >= 1; i = i - 1) {
                    var value = jsondata[i].data[key];
                    data.push(value);
                }

                ser = {
                    name: name,
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data
                };

                series.push(ser);
            }

            option = {
                title: {
                    text: '数据'
                },
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: series
            };

            var myChart = echarts.init(document.getElementById('main'));

            myChart.setOption(option);

        });
    };


</script>
</body>
</html>
echarts显示图表
