echarts的时间线图表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
$.ajax({
url:'./data1.json',
dataType:'json',
success:function (data) {
myChart.hideLoading()
var itemStyle = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}; var sizeFunction = function (x) {
var y = Math.sqrt(x / 5e8) + 0.1;
return y * 80;
}; // Schema:
var schema = [
{name: 'Income', index: 0, text: '人均收入', unit: '美元'},
{name: 'LifeExpectancy', index: 1, text: '人均寿命', unit: '岁'},
{name: 'Population', index: 2, text: '总人口', unit: ''},
{name: 'Country', index: 3, text: '国家', unit: ''}
]; option = {
baseOption: {
timeline: {//时间线
axisType: 'category',//轴的类型，value是数值轴；category是类目轴；
orient: 'vertical',//摆放方式；vertical/horizontal
autoPlay: true,//自动播放
inverse: false,//是否反方向放置timeline;//时间轴从下往上了
playInterval: 1000,//播放跳动的间隔
left: null,//timeline组件离容器左侧的距离
right: 0,
top: 20,
bottom: 20,
width: 55,//timeline的宽度；
height: null,//timeline的高度；
label: {//轴的文本标签；
normal: {
textStyle: {
color: '#999'
}
},
emphasis: {//文本高亮的样式：如鼠标悬浮的时候；
textStyle: {
color: '#fff'
}
}
},
symbol: 'diamond',//timeline标记的图形；包括circle,rect,roundRect,triangle,diamond,pin,arrow,none;可以通过‘image://url"设置为图片
lineStyle: {
color:'yellow'
},
checkpointStyle: {//当前项的checkpoint的样式，包括circle,rect,roundRect,triangle,diamond,pin,arrow,none
color: '#bbb',
borderColor: '#777',
borderWidth: 2
},
controlStyle: {//控制按钮的样式；包括播放/前进/后退按钮
showNextBtn: false,//是否显示播放按钮；
showPrevBtn: false,//是否显示后退按钮；
showPlayBtn:true,//是否显示播放按钮
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
label:false,
color: '#666',
borderColor: '#aaa'
}
},
data: []//timeline的数据；Array的每一项，可以是直接的数值。如果需要对每个数据项单独进行样式定义，则数据项写成object;
},
backgroundColor: '#404a59',
title: [{
text: data.timeline[0],
textAlign: 'center',
left: '63%',
top: '55%',
textStyle: {
fontSize: 100,
color: 'rgba(255, 255, 255, 0.7)'
}
}, {
text: '各国人均寿命与GDP关系演变',
left: 'center',
top: 10,
textStyle: {
color: '#aaa',
fontWeight: 'normal',
fontSize: 20
}
}],
tooltip: {//提示框组件；提示框组件可以设置在很多地方；
//设置全局：tooltop;设置坐标系中grid.tooltip.polar.tooltip/single.tooltop;
// 设置在系列中：series.tooltip；可以设置在系列的每个数据项中series.data.tooltip
show:true,//是否显示
trigger:'item',//触发方式。item是数据项图形触发；axis坐标轴触发；none什么都不触发；
padding: 5,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return schema[3].text + '：' + value[3] + '<br>'
+ schema[1].text + '：' + value[1] + schema[1].unit + '<br>'
+ schema[0].text + '：' + value[0] + schema[0].unit + '<br>'
+ schema[2].text + '：' + value[2] + '<br>';
}
},
grid: {//直角坐标系中绘图网格；
show:false,//
zlevel:1,//所有图形的分层；
top: 200,
containLabel: true,//grid区域是否包含坐标轴的刻度标签；
left: 30,//grid组件离容器左侧的距离，可以百分比，可以30这样的像素；可以top/middle/bottom
right: '110',
width:'auto',//宽度默认自适应
},
xAxis: {//grid坐标系中的x轴；
type: 'log',//value:数值轴；category:类目轴；time时间轴； log:对数轴
name: '人均收入',//名字
max: 100000,
min: 300,//坐标轴刻度最小值。
nameGap: 45,//坐标轴名称与轴线之间的距离；
nameLocation: 'middle',//名字位置
nameTextStyle: {//坐标轴名字的文字样式
fontSize: 18
},
splitLine: {//坐标轴在grid区域中的分割线；
show: false,
},
axisLine: {//坐标轴刻度标签的相关设置；
inside:false,//刻度标签是否朝内；
rotate:0,//刻度标签旋转的角度
margin:8,//刻度标签与轴线之间的距离；
// formatter:'{value} kg',刻度标签的内容格式，支持模板字符串和回掉函数两种格式；
lineStyle: {
color: '#ccc'
}
},
axisLabel: {//标签
formatter: '{value} $'
}
},
yAxis: {
type: 'value',
name: '平均寿命',
max: 100,
nameTextStyle: {
color: '#ccc',
fontSize: 18
},
axisLine: {//坐标轴的刻度线
lineStyle: {
color: '#ccc'
}
},
splitLine: {//在grid中的分割线
show: false
},
axisLabel: {//标签
formatter: '{value} 岁'
}
},
visualMap: [//visualMap是视觉映射组件，用于进行视觉编码，视觉元素可以是：
{
type:'piecewise',//piecewise是分段型的，continuoous是连续型的；
show: false,
dimension: 3,//seires.data的第四个维度，即value[3]被映射；
categories: data.counties,
calculable: true,
precision: 0.1,//数据展示的小数精度
textGap: 30,//两端文字主题之间的距离；
textStyle: {
color: '#ccc'
},
inRange: {// 选中范围中的视觉配置
color: (function () {
var colors = ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'];//定义了图形颜色映射的颜色列表，数据最小映射到#bcd3bb上，最大映射到#bda29a'上，其余的自动先行计算
return colors.concat(colors);
})()
}
}
],//视觉映射
series: [//系列列表，每个系列通过type决定自己的图表类型；
{
type: 'bar',
itemStyle: itemStyle,
data: data.series[0],
symbolSize: function(val) {
return sizeFunction(val[2]);
}
}
],
animationDurationUpdate: 1000,//动画更新时间
animationEasingUpdate: 'quinticInOut'//初始动画的缓动效果
},
options: []
}; for (var n = 0; n < data.timeline.length; n++) {
option.baseOption.timeline.data.push(data.timeline[n]); option.options.push({//timeline需要操作多个option,传入echarts的option是一个集合多个原子的option的复合option;
title: {//标题
show: true,
'text': data.timeline[n] + ''
},
series: {//系列，可以有多尔芬系列；
name: data.timeline[n],
type: 'scatter',
itemStyle: itemStyle,
data: data.series[n],
symbolSize: function(val) {
return sizeFunction(val[2]);
}
}
}); } myChart.setOption(option);
},
error:function () {
console.log('ajax请求出现错误了')
}
})
</script>
</body>
</html>
echarts的时间线图表的更多相关文章
- Python图表数据可视化Seaborn：3. 线性关系数据| 时间线图表| 热图
1. 线性关系数据可视化 lmplot( ) import numpy as np import pandas as pd import matplotlib.pyplot as plt import ...
- seaborn线性关系数据可视化：时间线图|热图|结构化图表可视化
一.线性关系数据可视化lmplot( ) 表示对所统计的数据做散点图,并拟合一个一元线性回归关系. lmplot(x, y, data, hue=None, col=None, row=None, p ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
- vue和echarts 封装的 v-charts 图表组件
https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...
- WPF性能调试系列 – 应用程序时间线
WPF性能调试系列文章: WPF页面渲染优化:Application Timeline WPF页面业务加载优化:Ants Performance Profiler WPF内存优化:Ants Memor ...
- WPF中的动画——（三）时间线（TimeLine）
WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...
- postgreSQL 时间线
“时间线”(Timeline)是PG一个很有特色的概念,在备份恢复方面的文档里面时有出现.但针对这个概念的详细解释却很少,也让人不太好理解,我们在此仔细解析一下. 时间线的引入 为了理解引入时间线的背 ...
- echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...
- ANDROID_MARS学习笔记_S04_007_从服务器获取微博数据时间线
一.代码 1.xml(1)activity_main.xml <?xml version="1.0" encoding="utf-8"?> < ...
随机推荐
- VMware Workstation 10.0 简中绿色精简版
VMware Workstation是强大的虚拟机软件,能在一台机器上同时运行二个或更多Windows.DOS.LINUX系统,并进行开发.测试.部署新的应用程序.VMware10.0 延续VMwar ...
- 第一次使用Mac
Mac禁用掉默认输入法 搜狗输入法已经包含中文.英文输入法了,其余输入法可以删除掉.按ctrol键的时候本来应该是搜狗输入法中英文切换,结果却是搜狗输入法和ABC输入法之间互相切换. 打开键盘偏好设置 ...
- org.openqa.selenium.remote.UnreachableBrowserException: Could not start a new session. Possible causes are invalid address of the remote server or br
WARN <init>, HHH000409: Using org.hibernate.id.UUIDHexGenerator which does not generate IETF R ...
- ipsec协议(转)
from:http://lulu1101.blog.51cto.com/4455468/816875 ipsec协议 2012-03-25 23:40:28 标签:休闲 ipsec协议 职场 IPSe ...
- vim自动缩进设置
需要软件 vim 下载地址 http://www.vim.org code_complete.vim 插件 http://www.vim.org/scripts/script.php?script ...
- Less入门与安装(转)
快速入门 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览 ...
- Anti-Forgery Request Recipes For ASP.NET MVC And AJAX
Background (Normal scenario of form submitting) To secure websites from cross-site request forgery ( ...
- 【JQuery】jquery对象和javascript对象即DOM对象相互转换
jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $(&quo ...
- html5 ajax 文件上传
http://html5demos.com/dnd-upload 看这个例子看了一会儿...这个是支持拖拽的上传. 下面代码是一个简单的ajax的文件上传: function match(url,rs ...
- MongodDB---初识
NoSQL介绍 一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的. 原始的目的是为 ...