【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(, );
}
},
},
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】实例的更多相关文章
- echart实例
https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all
- angular6 引用echart第一次数据不显示解决
1 使用promise从后台返回数据后,页面还是比数据更快的加载出来,导致echart图页面加载的时候不显示问题 1.1 html <div echarts [options]="do ...
- EChart.js 笔记一
一直对数据可视化比较感兴趣,当年 Alibaba 年报晚会上的大屏显示可谓是技惊四座,够震撼,将数据之美展现得淋漓尽致. 国内的前端数据可视化插件中,echart.js 算是热度很高的,也容易上手,算 ...
- ng2 中使用echart
1.首先创建echarts指令 //echart.directive.ts important { Directive,ElementRef,Input,Ouput,Onchanges,OnInit, ...
- Echart timeline 高级用法!!!!
一.前言 在使用 echart timeline 来着图形可视化时,我使用的和官网也不一样,因为我有使用映射关系.比如我将 no 映射到X轴,将 d4 映射到Y轴. 二.参考 echart官网:htt ...
- LayUI+Echart实现图表
1.首先 定义一个容器存放图表 需要指定这个容器的大小 <div class="layui-card"> <div class="layui-card ...
- 百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...
- Echars详解
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- 一步步教你轻松学KNN模型算法
一步步教你轻松学KNN模型算法( 白宁超 2018年7月24日08:52:16 ) 导读:机器学习算法中KNN属于比较简单的典型算法,既可以做聚类又可以做分类使用.本文通过一个模拟的实际案例进行讲解. ...
随机推荐
- Nginx实用教程(一):启动、停止、重载配置
Nginx是一个功能强大的web服务器和负载均衡软件,由俄罗斯人开发.Nginx包括一个master进程和数个worker进程,master进程用于读取.解析配置文件和管理worker进程,worke ...
- FastReport.NET 中使用二维码
FastReport.net 是一个比较好用的报表控件,在编辑器中编辑以后 可以直接在vs 中引用. 最近在研究fastreport 现在讲解一下 如何使用它的二维码. fastreport 没有单独 ...
- SQLServer数据库操作
--创建数据库create database 在线考试系统on(name=在线考试系统_DATA,filename='E:\DB\在线考试系统_DATA.mdf',size=5mb,maxsize=2 ...
- ecshop图片上传JPEG格式失败问题
在根目录下找到includes文件目录,在其目录中找到cls_image.php打开并找到: $allow_file_types = '|GIF|JPG|JEPG|PNG|BMP|SWF|'; 此处J ...
- Android 串口设置校验位、速率、停止位等参数
Android 串口通讯设置校验位.速率.停止位等参数 最近业余时间有个android项目需要和硬件进行通信,通讯方式都是通过串口,android串口通讯google有个开源的demo 和很多人一样我 ...
- LODOP之票据连续套打笔记<二>
接着上一篇博文,继续说说关于lodop,关于模板设计及相关的这里不多说了,上一篇博文最下面的推荐可以看看,说的很比较清楚,今天说说我在项目中运用套打实现分页预览和打印的, 之前弄lodop打印的时候发 ...
- angularLoad(用以异步加载js文件)
angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...
- tomcat7以上,ajax post参数后台获取不到的问题
AJAX post传参后台获取不到查询参数. 网上找了各种方法,包括设置content-type,又是把json转成json格式字符串,问题依然存在,但是把post改成get又可以获取到,百思不得其解 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 【原】无脑操作:Windows 10 + MySQL 5.5 安装使用及免安装使用
本文介绍Windows 10环境下, MySQL 5.5的安装使用及免安装使用 资源下载: MySQL安装文件:http://download.csdn.net/detail/lf19820717/9 ...