【ECHART】实例

1. 带timeline   datazoom的例子

 

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <link href="/resources/um_report/css/common.css" rel="stylesheet" type="text/css">
    <link href="/resources/um_report/css/widget.css" rel="stylesheet" type="text/css">
    <link href="/resources/um_report/css/main.css" rel="stylesheet" type="text/css">
    <link href="/resources/um_report/css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id='chart' style="width:900px;height:600px;"></div>
</body> 
<script src="/resources/um_report/js/jquery/jquery.js" type="text/javascript"></script>
<script src="/resources/um_report/js/echarts-all.js" type="text/javascript"></script>

<script src="/resources/um_report/js/util/myEcharts.js" type="text/javascript"></script> 
<script src="/resources/um_report/js/main.js" type="text/javascript"></script> 
<script src="/resources/um_report/js/timelineOption.js" type="text/javascript"></script> 
<script type="text/javascript">

(function($){
var option = {
    timeline:{
        data:[
            '2002-01-01','2003-01-01'
        ],
        label : {
            formatter : function(s) {
                return s.slice(0, 4);
            }
        },
    },
    options:[
        {
            title : {
                'text':'2002全国宏观经济指标',
                'subtext':'数据来自国家统计局'
            },
            tooltip : {'trigger':'axis'},
            legend : {
                x:'center',
                'data':['GDP','real'],
            },
            toolbox : {
                'show':true, 
                orient : 'vertical',
                x: 'right', 
                y: 'center',
                'feature':{
                    'mark':{'show':true},
                    'dataView':{'show':true,'readOnly':false},
                    'magicType':{'show':true,'type':['line','bar','stack','tiled']},
                    'restore':{'show':true},
                    'saveAsImage':{'show':true}
                }
            },
            calculable : true,
            dataZoom : {
                show : true,
                realtime : true,
                start : 20,
                end : 80
            },            
            grid : {'y':80,'y2':100},
            xAxis : [{
                'type':'category',
                'axisLabel':{'interval':0},
                'data':[
                    '北京','\n天津','河北','\n山西'
                ]
            }],
            yAxis : [
                {
                    'type':'value',
                    'name':'GDP（亿元）',
                }
            ],
            series : [
                {
                    'name':'GDP',
                    'type':'bar',
                    'data': [10000,20000,30000,40000]
                },
            {
                'name':'real',
                'type':'line',
                'data': [50000,40000,20000,10000]
            },  
            ]
        },
        {
            title : {'text':'2003全国宏观经济指标'},
            series : [
                {'data': [20000,50000,30000,40000]},//GDP的值
                { 'data': [80000,40000,70000,30000]}//real的值
            ]
        },{
        series : [
            { 'data': [80000,70000,60000,50000]},
            { 'data': [40000,20000,30000,10000]}
          ]        
       },

    ]
};

    var chartContainer = document.getElementById('chart');
    var myChart = echarts.init(chartContainer);
    myChart.showLoading({
        text : 'yoyo',
        effect : 'dynamicLine',
        textStyle : {
            fontSize : 20
        }
    });
    setTimeout(function (){
        myChart.hideLoading();
        myChart.setOption(option);
    },1000);
    // loadingTicket();
    // clearTimeout(loadingTicket);
    // myChart.setOption(option);

})(jQuery);
</script>
    
</html>

 

posted @ 2014-11-24 09:01  空城夕  阅读(627)  评论(0)  编辑  收藏  举报