基本信息
源码名称:echarts数据分页
源码大小:0.20M
文件格式:.zip
开发语言:CSS
更新时间:2020-02-14
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

使用echarts实现柱型统计图数据分页展示,解决当展示的数据量过大时界面卡顿甚至崩溃的问题。


<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
     var option = {
    timeline:{
        data:[1,2,3,4],
        label : {
            formatter : function(s) { return "第" s "页"; }
        },
        autoPlay : false,
        playInterval : 1000,
		tooltip:{formatter : function(s) { return "第" s "页"; }}
    },
    options:[
        {
            title : {
                'text':'全国宏观经济指标'
            },
            tooltip : {'trigger':'axis'},
            legend : {
                //x:'right',
                'data':['GDP','房地产']
            },
            calculable : true,
            grid : {'y2':80},
            xAxis : [{
                'type':'category',
                //'axisLabel':{'interval':0},
                'data':[ '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江'
                ]
            }],
            yAxis : [
                {
                    'type':'value',
                    'name':'GDP(亿元)',
                    'max':3000
                }
            ],
            series : [
                {
                    'name':'GDP','type':'bar',
                    'data': [100,200,300,400,500,600,700,800]
                },
                {
                    'name':'房地产','type':'bar',
                    'data': [500,400,300,400,200,600,300,800]
                } ]
        },
        {
            series : [
                {'data':  [200,300,400,500,600,700,800]},
                {'data': [500,400,300,400,200,600,300]}
            ],
          xAxis:[{'data':['云南','西藏','陕西','甘肃','青海','宁夏','新疆']}]
        },
        {
            series : [
                {'data':  [1200,1300,400,500,600,700,800]},
                {'data': [500,400,1300,400,1200,600,300]}
            ],
          xAxis:[{'data':[ '上海','江苏','浙江','安徽','福建','江西','山东']}]
        },
        {
            series : [
                {'data':  [1200,1300,400,500,600,700,800,900]},
                {'data': [500,400,1300,400,1200,600,300,900]}
            ],
          xAxis:[{'data':['湖北','湖南','广东','广西','海南','重庆','四川','贵州']}]
        }
    ]
};
                    
                    

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>