Echats前后端交互例子

最新推荐文章于 2023-04-21 15:38:53 发布

Carry丶果

最新推荐文章于 2023-04-21 15:38:53 发布

阅读量283

点赞数 1

本文链接：https://blog.csdn.net/weixin_41058439/article/details/89227528

版权

<script src="echarts/echarts.min.js"></script> //导入echat.js
<body>
<div id="detail" style="width: 600px;height:400px;"></div> //注意要设置
</body>

<script type="text/javascript">
myEcharts();

 function myEcharts(){
        //alert(11);
        var myChart = echarts.init(document.getElementById('detail'));

        // alert(11);
        // 指定图表的配置项和数据
        myChart.setOption({
            title : {
                text: '小时流量增长幅度',
                subtext: '横向坐标:小时/间隔',
                subtextStyle: {
                    fontWeight:'normal',     //标题颜色
                    color: 'black'
                }
            },
            tooltip : {
                trigger: 'axis',
                formatter: '{a0}:{c0}人<br />{b}:00'
            },
            legend: {
                data:['流量详细']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : []
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel:{formatter:'{value}人'}
                }
            ],
            series : [
                {
                    name:'累计人数',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default'},
                            color: '#00FF00'}},
                    data:[]
                }
            ]
        });

        var hours=[];    //类别数组（实际用来盛放X轴坐标值）
        var detailNumber=[];    //销量数组（实际用来盛放Y坐标值）

        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/searchDetail",    //请求发送到TestServlet处
            data : {shop:shop,type:type},
            //dataType : "json",        //返回数据形式为json
            success : function(data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (data) {
                    for(var i=0;i<data.length;i++){
                        hours.push(data[i].hours);    //挨个取出类别并填入类别数组
                    }
                    for(var i=0;i<data.length;i++){
                        detailNumber.push(data[i].detailNumber);    //挨个取出销量并填入销量数组
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    //alert(data);
                    myChart.setOption({        //加载数据图表
                        xAxis : [
                            {
                                type : 'category',
                                boundaryGap : false,
                                data : hours
                            }
                        ],
                        series : [
                            {
                                name:'累计人数',
                                type:'line',
                                smooth:true,
                                itemStyle: {normal: {areaStyle: {type: 'default'},
                                        color: '#00FF00'}},
                                data: detailNumber
                            }
                        ]
                    });
                    document.getElementById("title").innerHTML = data[0].description;
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                //alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    };
    window.onresize = function(){
        myChart.resize();}
</script>