echarts 数据展示模板

最新推荐文章于 2024-08-01 12:00:00 发布
菜鸡6666
最新推荐文章于 2024-08-01 12:00:00 发布
阅读量432
点赞数
分类专栏：前端文章标签： html echarts
本文链接：https://blog.csdn.net/weixin_43639743/article/details/115333747
版权
前端专栏收录该内容
2 篇文章 0 订阅
订阅专栏
主要用来以后编写echarts折线图展示，可以使用这个模板进行(折现图，有标记，多条折现在一张图上，可鼠标缩放)
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户金币情况查询看板</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="./jquery-3.1.1.min.js"></script>
</head>
<style>
    #button_div label{
        margin-left: 20px;
    }
    #button_div input:last-child{
        margin-left: 40px;
        background-color: green;
        width: 80px;
        height: 30px;
        color: white;
    }
    /* body{
        width: 100%;
        height: 100%;
    } */
    #main_1, #main_2, #main_3{
        width: 2000px;
        height: 800px;
        margin-top: 100px;
    }
</style>
<body>
    <h1>远洋组用户金币情况查询</h1>
    <div id="button_div"> 
        <label for="">查询的用户id: </label>
        <input id="user_id" type="text" value="" placeholder='请输入查询的id'>
        <label for="">查询的类型: </label>
        <!-- <select name="type_api" id="find_type">
            <option value="4">全部</option>
            <option value="1">用户充值</option>
            <option value="2">离开金币变化</option>
            <option value="3">离开身上金币</option>
        </select> -->
        <label for=""> 开始时间: </label>
        <input type="date" value="" min="20200101" id="start_time"/>
        <label for=""> 结束时间: </label>
        <input type="date" value="" min="20200101" id="end_time"/>
        <input id='chaxun' type="button" value="查询" onclick="click_chaxun()">
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main_1"></div>
    <div id="main_2"></div>
    <div id="main_3"></div>
</body>
<script type="text/javascript">

    $(document).ready(function () {
            var time = new Date();
            var day = ("0" + time.getDate()).slice(-2);
            var month = ("0" + (time.getMonth() + 1)).slice(-2);
            var today = time.getFullYear() + "-" + (month) + "-" + (day);
            
            var date2 = new Date(today);
            date2.setDate(date2.getDate() - 7 );
            var date_day = ("0" + date2.getDate()).slice(-2);
            var date_month = ("0" + (date2.getMonth() + 1)).slice(-2);
            var time2 = date2.getFullYear() + "-" + (date_month) + "-" + (date_day);
            $('#end_time').val(today);
            $("#start_time").val(time2);
        })


    //接口数据
    function click_chaxun(){
        $('#chaxun').css({'background-color':'black'});
        var userid = $("#user_id").val();
        // var find_type = $("#find_type").val();
        var start_time = $("#start_time").val();
        var end_time = $("#end_time").val();
        if(!userid){
            alert('请填写用户id');
        }
        // else if(!find_type){
        //     alert('请选择需要查询的类型');
        // }
        else if(!start_time){
            alert('请选择需要查询的开始时间');
        }else if(!end_time){
            alert('请选择需要查询的结束时间');
        };
        chuli_api(userid, start_time, end_time);
    }


    
    function get_data(url, data_dict){
        var data = [];
        $.ajax({
            type: "GET",
            url: url,
            dataType: 'json',
            async:false, 
            data: data_dict,
            success: function (e) {
                // console.log(e);
                if(e.length>0){
                    data = e
                };
                
            }
        });
        return data;
    }



    function chuli_api(userid, start_time, end_time){
        var gamerounds_url = 'http://****/indiagame/qryusergamerounds_admin_json.php';
        var payorder_url = 'http://******/indiagame/qryuserpayorder_admin_json.php';
        var payout_url = 'http://*****/indiagame/qryuserpayout_admin.php';
        var gameround_data_dict = {
                'userid': userid,
                'startTime': start_time,
                'endTime': end_time,
                'startid': 1,
                'endid':10000
            };
        var gamerounds_data = get_data(url=gamerounds_url, data_dict=gameround_data_dict);
        var two_data_dict = {
                'userid': userid,
                'begintime': start_time,
                'endtime': end_time,
                'startid': 1,
                'endid':10000
            };
        var payorder_data = get_data(url=payorder_url, data_dict=two_data_dict);
        // var payorder_data = [{"UserID":6635751,"PayChannel":7,"payfee":"200.0000","score":202000,"finishTime":"2021-06-14 19:56:14","TradeNO":"6635751_0_202105261132466019","Status":1,"Gold":"12700","source":"rummysunday_gp","mobile":"9725415732","username":"Sanjay","email":"Sanjay@gmail.com"},{"UserID":6635751,"PayChannel":7,"payfee":"200.0000","score":202000,"finishTime":"2021-06-14 19:00:14","TradeNO":"6635751_0_202105261132466019","Status":1,"Gold":"12700","source":"rummysunday_gp","mobile":"9725415732","username":"Sanjay","email":"Sanjay@gmail.com"}];
        var payout_data = get_data(url=payout_url, data_dict=two_data_dict);
        // var payout_data = [{"rid":31394,"userid":6237228,"cash":100,"status":2,"statusStr":"success","checkUser":"","username":null,"UPIID":null,"PhnoeNumber":null,"BankAccount":null,"IFSCCode":null,"rdate":"2021-06-14 19:28:54.977","updatetime":"2021-06-14 21:28:57.120"},{"rid":31393,"userid":6237228,"cash":100,"status":2,"statusStr":"success","checkUser":"","username":null,"UPIID":null,"PhnoeNumber":null,"BankAccount":null,"IFSCCode":null,"rdate":"2021-06-14 21:28:39.570","updatetime":"2021-06-14 21:28:41.600"},{"rid":31387,"userid":6237228,"cash":100,"status":2,"statusStr":"success","checkUser":"","username":null,"UPIID":null,"PhnoeNumber":null,"BankAccount":null,"IFSCCode":null,"rdate":"2021-06-14 21:06:26.430","updatetime":"2021-06-14 21:06:28.723"}];
        parser_json(gamerounds_data, payorder_data, payout_data);
    }

    function jiequ_str(time_str){
        if(time_str.length>19){
            time_str = time_str.substring(0, 19);
        };
        return time_str;
    }


    function parser_json(gamerounds_data, payorder_data, payout_data){
        var title_text = '用户金币曲线图';
        var linshi_list_1 = [];
        var linshi_list_2 = [];
        var linshi_list_3 = [];
        var linshi_list_4 = [];
        var max_num = 200;


        for(var item in gamerounds_data){
            var sub_list = Array();
            if(gamerounds_data[item]['score_body'] == null){
                var sub_list = [jiequ_str(gamerounds_data[item]['rdate']), 0];
            }else{
                var sub_list = [jiequ_str(gamerounds_data[item]['rdate']), gamerounds_data[item]['score_body']];
                if(parseInt(gamerounds_data[item]['score_body']) > max_num ){
                    max_num = parseInt(gamerounds_data[item]['score_body']);
                };
            };
            // if(item%5==0){
            //     var sub_dict = {'name':'游戏记录', 'yAxis':gamerounds_data[item]['score_body'], 'xAxis':jiequ_str(gamerounds_data[item]['rdate']), value:'嗨点'};
            //     linshi_list_4.push(sub_dict);
            // };
            if(gamerounds_data[item]['happy'] == 1){
                var sub_dict = {'name':'游戏记录', 'yAxis':gamerounds_data[item]['score_body'], 'xAxis':jiequ_str(gamerounds_data[item]['rdate']), value:'嗨点'};
                linshi_list_4.push(sub_dict);
            };
            linshi_list_3.push(sub_list);
            
        };
        linshi_list_3.sort();
        linshi_list_4.sort();
        for(var item in payorder_data){
            var sub_list = Array();
            var sub_list = [jiequ_str(payorder_data[item]['finishTime']), max_num];
            linshi_list_1.push(sub_list);
        };
        linshi_list_1.sort();

        for(var item in payout_data){
            var sub_list = Array();
            var sub_list = [jiequ_str(payout_data[item]['rdate']), max_num];
            linshi_list_2.push(sub_list);
        };
        linshi_list_2.sort();

        var div_id = 'main_1';
        zexian(title_text, div_id, linshi_list_1, linshi_list_2, linshi_list_3, linshi_list_4);
    }


    function zexian(title_text, div_id, data_y1, data_y2, data_y3, line_biaoji_data){
        //一条x轴，多个y值，具体意思请看https://blog.csdn.net/qq_43033251/article/details/110163387
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(div_id));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: title_text,
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid:{
                left:'5%',
                bottom: '15%'
            },
            legend: {
                orient: 'vertical',     //垂直放置，水平放置默认
                left: 200,      //存放位置
                data:['充值', '提现', '游戏记录']
            },
            xAxis: {
                // data: data_x,
                axisLabel:{
                    interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推，（简单试一下就明白了，这样说是不是有点抽象）
                    rotate:60,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
                },
                type: 'time',   //x轴的时间类型，如果是时间，最好加上
                // boundaryGap: false,
            },
            yAxis: {},
            //处理x轴数据，可以伸缩
            dataZoom: [{                 // 内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系 
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,                  // handleIcon 手柄的 icon 形状，支持路径字符串
                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%',        //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
                handleStyle: {
                    color: 'pink',
                    shadowBlur: 3,      // shadowBlur图片阴影模糊值，shadowColor阴影的颜色
                    shadowColor: 'red',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series:[
                {
                    name: '充值',
                    type: 'bar',
                    barWidth:1,
                    // type: 'line',
                    data: data_y1,
                    // itemStyle : { normal: {label : {show: true}}},
                },
                {
                    name: '提现',
                    type: 'bar',
                    barWidth:1,
                    // type: 'line',
                    data: data_y2,
                    // itemStyle : { normal: {label : {show: true}}},
                },
                {
                    name: '游戏记录',
                    // type: 'bar',
                    type: 'line',
                    data: data_y3,
                    //加标记内容：line_biaoji_data = [{'name':'游戏记录', 'yAxis':gamerounds_data[item]['score_body'], 'xAxis':jiequ_str(gamerounds_data[item]['rdate']), value:'嗨点'}];
                    markPoint: {
                        data: line_biaoji_data
                    },
                    // itemStyle : { normal: {label : {show: true}}},
                }
            ],
            
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        $('#chaxun').css({'background-color':'green'});
    }


</script>
</html>