safesite/enp/templates/gaspredict.html

<div style="padding: 10px;" id="fulldiv">
</div>
<script>
    $.get('/api/enp/drain/combobox/', function (res) {
        for (var i = 0; i < res.length; i++) {
            var drain = res[i]
            var panelId = 'panel' + res[i]['id']
            var panelTitle = res[i]['name'] + ':' + res[i]['number']
            $('#fulldiv').append('<div id="' + panelId + '" style="margin-bottom:10px;padding:10px"></div>')
            $('#' + panelId).panel({
                height: 360,
                title: panelTitle,
            });
            var div1 = panelId + 'out_smoke';
            var div2 = panelId + 'out_so2';
            var div3 = panelId + 'out_particle';
            var div4 = panelId + 'out_nox';
            $('#' + panelId).append(
                '<div style="float:left;width:25%;height:100%" id="' + div1 + '"></div>' +
                '<div style="float:left;width:25%;height:100%" id="' + div2 + '"></div>' +
                '<div style="float:left;width:25%;height:100%" id="' + div3 + '"></div>' +
                '<div style="float:left;width:25%;height:100%" id="' + div4 + '"></div>'
            )
            initMap(div1, 'out_smoke', res[i]['id'], '标态干烟气量', 'Nm3/h');
            initMap(div2, 'out_so2', res[i]['id'], '二氧化硫', 'mg/m3');
            initMap(div3, 'out_particle', res[i]['id'], '颗粒物', 'mg/m3');
            initMap(div4, 'out_nox', res[i]['id'], '氮氧化物', 'mg/m3');
        }
    })
    function initMap(div, element, drainId, text, unit) {
        var dom = document.getElementById(div);
        var myChart = echarts.init(dom);
        myChart.showLoading()
        var option;
        option = {
            title: {
                text: text,
                // subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
            },
            yAxis: {
                type: 'value',
                // axisLabel: {
                //     formatter: '{value} W'
                // },
                axisPointer: {
                    snap: true
                },
                name: unit
            },
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 14,
                    color: 'green'
                }, {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                }, {
                    gt: 17,
                    color: 'red'
                }]
            },
            series: [
                {
                    name: '含量',
                    type: 'line',
                    smooth: true,
                    data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
                    markArea: {
                        data: [[{
                            name: '预测区',
                            xAxis: '17:30'
                        }, {
                            xAxis: '23:45'
                        }]]
                    }
                }
            ]
        };
        $.get('/api/enp/gaspredict/' + element + '/' + drainId + '/', function (res) {
            if (res.code == 0) {
                $('#' + div).html('<p style="text-align:center">' + text + '-' + res.msg + '</p>')
                return
            } else {
                var ydata = res.data
                var xdata = []
                var leng = ydata.length
                for(var i=0;i<leng;i++){
                    xdata.push(i+1)
                }
                option.xAxis.data = xdata;
                option.series[0].data = ydata
                option.series[0].markArea.data = [ [{
                            name: '预测区',
                            xAxis: leng-3
                        }, {
                            xAxis: leng-1
                        }] ]
                option.visualMap.pieces = [{
                    lte: leng-3,
                    color: 'green'
                }, {
                    gt: leng-3,
                    lte: leng-2,
                    color: 'red'
                }, {
                    gt: leng-2,
                    color: 'red'
                }]
                console.log(option)
                if (option && typeof option === 'object') {
                    myChart.hideLoading();
                    myChart.setOption(option);
                }

            }
        })

    }
</script>