zhaobao
/
layui_back


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>m</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
</head>

<body style="margin: 20px;">
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <label class="layui-form-label">公共属性</label>
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="title" lay-text="左边|中间">
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="toolbox" lay-text="打开工具栏|关闭工具栏">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="radio" name="ecType" value="1" lay-filter="ecType" title="折线图" checked>
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="rotate" lay-text="文字倾斜|默认">
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="normal" lay-text="显示数据|默认">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="radio" name="ecType" value="2" lay-filter="ecType" title="饼图">
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="legend" lay-text="数据种类|默认">
            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="normal" lay-text="显示数据|默认">
        </div>
    </div>
</form>

<div id="mainView" style="height:500px; margin: 0"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>今日访问企业列表</legend>
</fieldset>
<div class="layui-collapse" lay-accordion id="mainLineInfo" lay-filter="test">

</div>

</body>
<!-- js部分 -->
<script src="assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="assets/libs/echarts/theme/vintage.js"></script>
<script src="assets/libs/echarts/theme/shine.js"></script>
<script src="assets/libs/echarts/theme/macarons.js"></script>
<script src="assets/libs/echarts/theme/roma.js"></script>
<script src="assets/libs/echarts/plus/echarts-util.js"></script>
<!--<script src="assets/libs/echarts/plus/mysetTheme.js"></script>-->
<script>
    layui.use(['form', 'element', 'util', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;

        var openStyle = {ecType: "1", toolbox: true, rotate: true, normal: true, legend: true, title: true};
        //监听指定开关
        form.on('radio(ecType)', function (data) {
            var level = data.value;
            openStyle.ecType = level;
            loadMainView(openStyle);
        });
        form.on('switch(toolbox)', function () {
            openStyle.toolbox = this.checked;
            loadMainView(openStyle);
        });
        form.on('switch(rotate)', function () {
            openStyle.rotate = this.checked;
            loadMainView(openStyle);
        });
        form.on('switch(legend)', function () {
            openStyle.legend = this.checked;
            loadMainView(openStyle);
        });

        form.on('switch(normal)', function () {
            openStyle.normal = this.checked;
            loadMainView(openStyle);
        });

        form.on('switch(title)', function () {
            openStyle.title = this.checked;
            loadMainView(openStyle);
        });


        $.ajax({
            type: "get",
            url: "http://127.0.0.1:8899/3rd/outData/ccInfo",
            data: {},
            success: function (res) {
                var ul = "";
                $.each(res.data, function (index, value) {
                    ul += `<div class="layui-colla-item">
                                <h2 class="layui-colla-title" id="${value.cId}">${value.cName}</h2>
                                <div class="layui-colla-content ${index == 0 ? 'layui-show' : ''}" id="${value.cId}_">
<!--                                    <p>${value.cName}</p>-->
                                </div>
                            </div>`;
                });
                $("#mainLineInfo").html(ul);
                element.init();
            }
        });

        //监听折叠
        element.on('collapse(test)', function (data) {
            if (data.show) {
                var id = data.title[0].id;
                $.ajax({
                    type: "get",
                    url: "http://127.0.0.1:8899/3rd/outData/ccInfoA",
                    data: {cId: id},
                    success: function (res) {
                        var ul = "";
                        $.each(res.data, function (index, value) {
                            ul += `<span class="layui-badge layui-bg-blue">${value.val}</span>&nbsp;&nbsp;`;
                        });
                        $("#" + id + "_").html(ul);
                        element.init();
                    }
                });
            }
        });


        loadMainView(openStyle);

        function loadMainView(openStyle) {
            console.log(openStyle)
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:8899/3rd/outData/cc",
                data: {},
                success: function (res) {

                    var initChart = null;
                    var option = null;
                    if (openStyle.ecType === "1") {
                        option = MyEcharts.EchartsOption.Line("折线图", "单位（家）", res.data);
                    } else if (openStyle.ecType === "2") {
                        option = MyEcharts.EchartsOption.pie("环形饼图", "种类数（份）", res.data, ['40%', '60%']);
                    }

                    option.tooltip = {trigger: 'axis'}
                    //标题显示
                    if (openStyle.title) {
                        option.title = {text: '环形饼图', subtext: '纯属虚构', left: 'center'}
                    }
                    //工具栏
                    if (openStyle.toolbox) {
                        option.toolbox = {show: true,
                            feature: {
                                dataZoom: {yAxisIndex: 'none'},
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        }
                    }
                    //文字倾斜
                    if (openStyle.ecType === "1" && openStyle.rotate) {
                        option.xAxis[0].axisLabel = {interval: 0, rotate: 50};
                    }
                    if (openStyle.ecType === "2" && openStyle.legend) {
                        //pie 显示在左边
                        option.legend = {orient: 'vertical', left: 'left',};
                    }
                    //显示折线数据
                    if (openStyle.normal) {
                        option.series[0].label = {normal: {show: true}};
                    }

                    console.log(option);

                    initChart = MyEcharts.initChart(option, "mainView");
                    setTimeout(function () {
                        window.onresize = function () {
                            initChartLine.resize();
                        }
                    }, 200);

                    //
                    // option.tooltip = {trigger: 'axis'}
                    // option.toolbox = {show: true, feature: {dataZoom: {yAxisIndex: 'none'}, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {}}}
                    // option.legend = {orient: 'vertical', left: 'left',};
                    // option.series[0].itemStyle = {borderRadius: 10, borderColor: '#fff', borderWidth: 2};
                    // // option.series[0].emphasis = {label: {show: true, fontSize: '40', fontWeight: 'bold'}};
                    // // option.series[0].label = {show: false, position: 'center'};
                    // // option.series[0].labelLine = {show: false};
                    // if (openStyle.ecType === "2") {
                    //     initChart = MyEcharts.initChart(option, "mainView");
                    // }
                    // setTimeout(function () {
                    //     window.onresize = function () {
                    //         initChart.resize();
                    //     }
                    // }, 200);
                }
            });
        }
    });


    //区域填充样式(渐变)
    /*option.series[0].areaStyle = {
        color: {
            type: 'linear', // 线性渐变：linear，径向渐变：radial
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0.2, color: '#838CFF' // 0% 处的颜色
            }, {
                offset: 0.6, color: 'transparent' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        }
        // 纹理填充
        // color: {
        //     image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
        //     repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
        // }
    }*/

    // var initChartLine = MyEcharts.initChart(option, "mainLine");
</script>

</html>