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"?> < ...
随机推荐
- Ubuntu 12.10安装QQ2012
[日期:2012-11-05] 在最新的Ubuntu 12.10下安装QQ2012,请根据自己的机器类型下载后按照下面的32位或64位安装说明安装. 下载网址:http://www.longene.o ...
- CreateDialog 注意事项
CreateDialog创建非模态对话框时 其内部 会发送几条消息例如: WM_INITDIALOG,WM_SETFONT DS_SETFONT , DS_SHELLFONT. 所以如果在另一个Ca ...
- Rot13加密算法
Rot13是一种非常简单的替换加密算法,只能加密26个英语字母.方法是:把每个字母用其后第13个字母代替. 因为有26个字母,取其一半13. s = "xrlvf23xfqwsxsqf&qu ...
- Redability
在写爬虫进行舆情分析.情感分析等内容时,我们经常爬取博客.新闻等长篇大论的文章,在一个网页上,根据网页布局,人眼可以很明确的确定哪些元素是文章主体.人眼既然能够识别,那么机器必然也是能够识别的.如果给 ...
- SoapUI利用Groovy把外部数据加载到request中
默认已经用Groovy把外部数据给读取出来了,关键是读取出来后,如何加载到request中去?这里提供了两种方法:1.该Groovy脚本的名称是"setUp" def num = ...
- windows 7 开启无线wifi
Windows 7 开启无线wifi步骤:1.选择“开始”-“运行”命令,在运行命令栏里输入“CMD”打开管理员: 2.在界面里输入以下命令:netsh wlan set hostednetwork ...
- aaronyang的百度地图API之LBS云 笔记[位置数据 geotable]
位置数据表 geotable DEMO下载 我们再创建一个 leverTerminal表 添加 手机价格,手机型号,手机唯一码,用户id 新建一个html页面,引入最新的jquery包,1.8.2以 ...
- 你应该知道的JAVA面试题
你应该知道的JAVA面试题 经常面试一些候选人,整理了下我面试使用的题目,陆陆续续整理出来的题目很多,所以每次会抽一部分来问.答案会在后面的文章中逐渐发布出来. 基础题目 Java线程的状态 进程和线 ...
- jdk动态代理与cglib动态代理例子
1.JAVA的动态代理特征:特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关系,一个代理类的对象 ...
- springboot 多环境配置yml或properties
https://www.cnblogs.com/mr-yang-localhost/p/8971327.html springboot 多环境配置 https://blog.csdn.net/li ...