pelma_analyse_service/public/script/http/lora.js

var dom1 = document.getElementById('container1');
var dom2 = document.getElementById('container2');
lineGraph(dom1, '温度', '℃')
lineGraph2(dom2, '血氧', '%')

function lineGraph(dom, title, unit){
    var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};
var ROOT_PATH = '';
var option;
var dataAll = [];

$.get(
    ROOT_PATH + '/loraData',
    function (_rawData) {
        _rawData.forEach(value => dataAll.push(value));
        run(_rawData);
    }
);
function run(_rawData) {
    _rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
    // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
    const countries = [title];
    const datasetWithFilters = [];
    const 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,
            smooth: true,
            name: country,
            endLabel: {
                show: true,
                formatter: function (params) {
                    return params.value[3] + ': ' + params.value[0] + unit;
                }
            },
            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
            },
            ...datasetWithFilters
        ],
        tooltip: {
            order: 'valueDesc',
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            nameLocation: 'middle'
        },
        yAxis: {
            scale: false,
            name: 'Income',
            min: 30,
            max: 40,
        },
        grid: {
            right: 140
        },
        series: seriesList
    };
    myChart.setOption(option);
}

setInterval(function () {
    $.get(
        ROOT_PATH + '/loraData?item=' + title,
        function (_rawData2) {

            if (dataAll.length > 40){
                dataAll.shift();
                dataAll.shift();
            }

            _rawData2.forEach(value => dataAll.push(value));

            _rawData = [["Income","Life Expectancy","Population","Country","Year"]];
            dataAll.forEach(value => _rawData.push(value));

            myChart.setOption({
                dataset: [
                    {
                        source: _rawData
                    }
                ],
            });

            let original = '';
            dataAll.forEach((elem, index) => {
                original += elem[3] + elem[0];
                if (elem[3] == "血氧") {
                    original += '%'
                } else {
                    original += '℃'
                }
                original += ' '
            })

            $(".sound-code-chunk-default-content").html(original);


        }
    );



}, 1000);


if (option && typeof option === 'object') {
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

}

function lineGraph2(dom, title, unit){
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = '';
    var option;
    var dataAll = [];

    $.get(
        ROOT_PATH + '/loraData',
        function (_rawData) {
            _rawData.forEach(value => dataAll.push(value));
            run(_rawData);
        }
    );
    function run(_rawData) {
        _rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
        const countries = [title];
        const datasetWithFilters = [];
        const 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,
                smooth: true,
                name: country,
                endLabel: {
                    show: true,
                    formatter: function (params) {
                        return params.value[3] + ': ' + params.value[0] + unit;
                    }
                },
                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
                },
                ...datasetWithFilters
            ],
            tooltip: {
                order: 'valueDesc',
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                nameLocation: 'middle'
            },
            yAxis: {
                scale: false,
                name: 'Income'
            },
            grid: {
                right: 140
            },
            color:[
                'rgba(231,82,27,0.94)'
            ],
            series: seriesList
        };
        myChart.setOption(option);
    }

    setInterval(function () {
        $.get(
            ROOT_PATH + '/loraData?item=' + title,
            function (_rawData2) {

                if (dataAll.length > 40){
                    dataAll.shift();
                    dataAll.shift();
                }

                _rawData2.forEach(value => dataAll.push(value));

                _rawData = [["Income","Life Expectancy","Population","Country","Year"]];
                dataAll.forEach(value => _rawData.push(value));

                myChart.setOption({
                    dataset: [
                        {
                            source: _rawData
                        }
                    ],
                });

                let original = '';
                dataAll.forEach((elem, index) => {
                    original += elem[3] + elem[0];
                    if (elem[3] == "血氧") {
                        original += '%'
                    } else {
                        original += '℃'
                    }
                    original += ' '
                })

                $(".sound-code-chunk-default-content").html(original);


            }
        );



    }, 1000);


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

}