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"?> < ...
随机推荐
- Xcode7 运行iOS10以上系统（10.1、10.2、10.3）解决Could not find Developer Disk Image
由于历史原因,需要在Xcode7上真机运行下app,无奈手机系统已是10.3了,一运行, 就提示:Could not find Developer Disk Image 解决办法: 1.找到xcode ...
- Android百度地图相关内容汇总
Android百度地图知识讲解 1.百度地图开发环境搭建 http://www.apkbus.com/android-116050-1-1.html 2.Android百度地图系列教程 h ...
- Zabbix Trigger表达式实例
Zabbix提供强大的触发器(Trigger)函数以方便进行更为灵活的报警及后续动作,具体触发器函数可以访问https://www.zabbix.com/documentation/2.0/manua ...
- 【SQL】SQL中Case When的用法
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 ' T ...
- Python学习笔记001——Linux
Linux文件系统采用树形目录结构,系统中一切皆文件.文件名字母区分大小写 Linux命令使用格式(终端窗口) 命令名 [选项] [参数] 命令名:在命令行输入命令. 备注:命令名字母区分大小写, 1 ...
- 【转】写给支持和反对《完全用Linux工作》的人们
早就有人问起我的学习情况,问我有没有找到理想的研究环境.我却总是弄一些小动物,要不就是好玩的内容在这上面.真是惭愧,因为一直觉得自己还没有什么发言权,一直觉得是不是自己搞错了.不过来了 Cornell ...
- python 实验环境
python 实验环境的搭建 刚开始在windows环境下尝试过komodo ,eclispse pydev,swing,spyder甚至limodou的编辑器,之后ipython,安装很多科学计算包 ...
- Linux中在防火墙中开启80端口的例子
最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置ipt ...
- SQL 中的 UNION 和UNION ALL 的区别
UNION表示“并”,当用的时候,系统会自动将重复的元组去掉,如果要保留重复元组则就用UNION ALL UNION 会合并重复数据,(由于要合并重复,该操所 隐藏着一个 排序的操作.)UNION A ...
- [转]JVM参数设置、分析
不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Java ...