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. STM32CubeMX GPIO的使用

    一.GPIO口配置1.GPIO的主要配置有输入和输出① 作为普通GPIO输入:根据需要配置该引脚为浮空输入.带弱上拉输入或带弱下拉输入,同时不要使能该引脚对应的所有复用功能模块.② 作为普通GPIO输 ...

  2. iOS内购图文流程(2017)

    什么是内购? 只要在iPhone App上购买的不是实物产品(也就是虚拟产品如qq币.虎牙币.电子书......) 都需要走内购流程,苹果这里面抽走三成.   使用内购需要走的流程. 1,填写协议,税 ...

  3. CSS技巧和经验列表

    如何清除图片下方出现几像素的空白间隙? img{display:block;} 如何让文本垂直对齐文本输入框? input{vertical-align:middle;} 如何使文本溢出边界显示为省略 ...

  4. 各开放平台API接口通用SDK序列文章 前言

    最近两年一直在做API接口相关的工作,在平时工作中以及网上看到很多刚接触API接口调用的新人一开始会感到很不适应,要看的文档一大堆,自己要调用的接口找不着,或都找着了不知道怎么去调用,记得包括自己刚开 ...

  5. 批量自动更新SVN版本库 - Windows

    开发过程中每天都要从SVN代码库里一个一个的update各个项目代码,不仅效率实在是低,也不符合程序员的"懒"精神,由于是在Windows环境做开发,自然就想到了使用bat来实现自 ...

  6. linux 系统中的 /bin /sbin /usr/bin /usr/sbin /usr/local/bin /usr/local/sbin 目录的区别

    先来段英文的: /bin This directory contains executable programs which are needed in single user mode and to ...

  7. linux下如何解压和压缩文件

    1.*.tar 用 tar –xvf 解压 2.*.gz 用 gzip -d或者gunzip 解压 3.*.tar.gz和*.tgz 用 tar –xzf 解压 4.*.bz2 用 bzip2 -d或 ...

  8. Gitlab维护记录

    目前互联网公司主流的代码仓库统是gitlab,类似github的实现,维护gitlab已经有两年多的时间, 下面说一下维护过程中的注意点,以及如何维护更好. 分别是搭建,首先得搭建起来,不然怎么玩,其 ...

  9. Django 踩过的坑（一）

    平台:win10 工具:cmd python3 刚刚学习Django搭建环境,网站还木有发布,就直接来了个大麻烦. 一切按着<Django 学习笔记(二)>这篇文章来的,在最后cmd运行服 ...

  10. bash远程代码执行漏洞

    博客园新闻:http://news.cnblogs.com/n/504506/(如果以下有说错的地方请不吝指出,谢谢~) 详情可围观上面的链接.因为我们的服务器都是私有网环境,即使要修复也得等到下次安 ...