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"?> < ...
随机推荐
- （原+转）linux安装rtl 8812au驱动
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6806917.html 参考网址: http://www.linuxdiyf.com/viewartic ...
- Android开发环境——连接驱动ADB相关内容汇总
Android开发环境将分为SDK相关内容.Eclipse ADT相关内容.模拟器AVD相关内容.调试器DDMS相关内容.日志LogCat相关内容.连接驱动ADB相关内容.内存泄露检测工具MAT相关 ...
- 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时，报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置
spring-import 标签的解析.使用案例: 对于spring配置文件的编写,我想,对于经历过庞大项目的人,都有那种恐惧的心理,太多的配置文件.不过,分模块都是大多数人能想到的方法,但是,怎么分 ...
- 剥下“java.lang.OutOfMemoryError: unable to create new native thread”的外衣 创建线程数公式(MaxProcessMemory - JVMMemory – ReservedOsMemory)
剥下“java.lang.OutOfMemoryError: unable to create new native thread”的外衣 星期一早上到了公司,据称产品环境抛出了最可爱的异常—OutO ...
- C结构体数组的应用
#include <stdio.h> //定义结构体存储学生成绩信息 struct address_list{ ]; ]; ]; } info[]; void save(char *nam ...
- 【Servlet】web.xml中url-pattern的用法
目录结构: contents structure [+] url-pattern的三种写法 servlet匹配原则 filter匹配原则 语法错误的后果 参考文章 一.url-pattern的三种写法 ...
- 【struts2】Struts2的运行流程
1)前提条件 在讲解流程之前,假设我们已经建立了的一个名为strutsDeepen的web工程,该工程仅仅实现了简单的用户登陆与欢迎界面.具体的实现为: 在web.xml中配置了Struts2的过滤器 ...
- iOS证书(.p12)和描述文件(.mobileprovision)申请
证书类型 使用场景 开发(Development)证书和描述文件 用于开发测试,在HBuilder中打包后可在真机环境通过Safari调试 发布(Distribution)证书和描述文件 用于提交Ap ...
- Cg入门11：Vertex Shader - 几何变换 —MVP矩阵变换（旋转、缩放）
旋转.缩放demo C# Code: Shader Code: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize ...
- 【转载并整理】AJAX XmlHttpRequest对象详解
一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...