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(, );

            }

        },

    },

    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 : ,

                end :

            },

            grid : {'y':,'y2':},

            xAxis : [{

                'type':'category',

                'axisLabel':{'interval':},

                'data':[

                    '北京','\n天津','河北','\n山西'

                ]

            }],

            yAxis : [

                {

                    'type':'value',

                    'name':'GDP（亿元）',

                }

            ],

            series : [

                {

                    'name':'GDP',

                    'type':'bar',

                    'data': [,,,]

                },

            {

                'name':'real',

                'type':'line',

                'data': [,,,]

            },

            ]

        },

        {

            title : {'text':'2003全国宏观经济指标'},

            series : [

                {'data': [,,,]},//GDP的值

                { 'data': [,,,]}//real的值

            ]

        },{

        series : [

            { 'data': [,,,]},

            { 'data': [,,,]}

          ]

       },

    ]

};

    var chartContainer = document.getElementById('chart');

    var myChart = echarts.init(chartContainer);

    myChart.showLoading({

        text : 'yoyo',

        effect : 'dynamicLine',

        textStyle : {

            fontSize :

        }

    });

    setTimeout(function (){

        myChart.hideLoading();

        myChart.setOption(option);

    },);

    // loadingTicket();

    // clearTimeout(loadingTicket);

    // myChart.setOption(option);

})(jQuery);

</script>

</html>

【ECHART】实例的更多相关文章

  1. echart实例

    https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all

  2. angular6 引用echart第一次数据不显示解决

    1 使用promise从后台返回数据后,页面还是比数据更快的加载出来,导致echart图页面加载的时候不显示问题 1.1 html <div echarts [options]="do ...

  3. EChart.js 笔记一

    一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...

  4. ng2 中使用echart

    1.首先创建echarts指令 //echart.directive.ts important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit, ...

  5. Echart timeline 高级用法！！！！

    一.前言 在使用 echart timeline 来着图形可视化时,我使用的和官网也不一样,因为我有使用映射关系.比如我将 no 映射到X轴,将 d4 映射到Y轴. 二.参考 echart官网:htt ...

  6. LayUI+Echart实现图表

    1.首先 定义一个容器存放图表  需要指定这个容器的大小 <div class="layui-card"> <div class="layui-card ...

  7. 百度地图和echarts结合实例

    1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...

  8. Echars详解

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...

  9. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

  10. 一步步教你轻松学KNN模型算法

    一步步教你轻松学KNN模型算法( 白宁超 2018年7月24日08:52:16 ) 导读:机器学习算法中KNN属于比较简单的典型算法,既可以做聚类又可以做分类使用.本文通过一个模拟的实际案例进行讲解. ...

随机推荐

  1. Asp.Net生命周期的详解

    一．Asp.Net页面生命周期的概念 当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 TTP页面处理程 ...

  2. 让getElementsByClassName兼容

    function getElementsByClassName(node, classname){ if(node.getElementsByClassName){ //使用现有方法 return n ...

  3. Windows 7安装Oracle 10g的方法

    Windows7下安装Oracle 10g提示"程序异常终止,发生未知错误"的解决方法 1.修改Oracle 10G\database\stage\prereq\db\refhos ...

  4. Scrapyd部署爬虫

    Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...

  5. ecshop和jQuery冲突

    这个问题看ecshop的论坛里有很多帖子,解决方案就好几种,但是有几个标注完美解决方案的需要更改很多文件,对于我们这种初学者出现了问题的话是不知道怎么调试的. 找到一个很简单的解决方案,论坛里说只能解 ...

  6. jsp图片上传

    1.要实现图片上传,首先需要一个组件,这里我用的是smartupload.jar可以到这里下载http://download.csdn.net/detail/mengdecike/8279247 2. ...

  7. 使用Swagger实现webapi接口自动化文档生成

    这里是实现自动化api稳当的生成,在网上看了很多swagger的文档,可能都是在为实现接口时直接使用的swagger,其实步骤差不多,但是更加详细的我还没看到,又或者说,我看着文档来的时候还是出错啦, ...

  8. Web前端总结（小伙伴的）

    以下总结是我工作室的小伙伴的心得,可以参考一下 html+css知识点总结 HTMl+CSS知识点收集 1.letter-spacing和word-spacing的区别 letter-spacing: ...

  9. 【Android Developers Training】 87. 序言：同步到云

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  10. 【Android Developers Training】 53. 打印HTML文档

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...