<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.8.0.min.js"></script>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height: 400px"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        $(function () {

            ////控件大小自适应
            //pageSize();

            ////轮播时间间隔设定
            //$('.carousel').carousel({
            //    //interval: 60000,
            //    interval: 2000,
            //    pause: false
            //});

            setInterval("Show()", 5000);

        });

        function Show() {

            var myChart = echarts.init(document.getElementById('main'));



            $.ajax({
                url: "PaintView.ashx?method=getBar",
                datatype: 'json',
                type: "Post",
                contentType: "application/json; charset=utf-8",
                async: false,
                success: function (result) {
                    if (result) {
                        //var objlist = JSON.parse(result);
                        var objlist = eval('(' + result + ')');

                        myChart.setOption({
                            
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                                }
                            },
                            legend: {
                                data: ['保险杠', '门槛']
                            },
                            color: ['#2899F4', '#00FF00'],
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: objlist.h1
                            },
                            yAxis: { type: 'value' },
                            series: [
                                {
                                    name: '保险杠',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true
                                        },
                           
                                    },
                                    data: objlist.c1
                                },
                                {
                                    name: '门槛',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        normal: {
                                            show: true
                                        }
                                    },
                                    data: objlist.c2
                                }
                            ]
                        });



                    }
                }
            });

        }
    </script>
</body>
</html>