echarts使用结合时间轴timeline动态刷新案例
1、echarts简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、使用案例
第一步：echarts初始化
第二步：定义option,
第三步：echarts加载option
echarts初始化:
var right_bottom_chart = echarts.init(document.getElementById("right_bottom"));
定义option
var getLBOptionConfig = function(data_res, monthArr , index){
var data_arr = getDataArr(data_res);
right_bottom_option = {
baseOption:{
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
},
options:[
{
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
}]
}
right_bottom_option.options=[];
monthArr.forEach(function(n){
right_bottom_option.options.push(getTemplate(data_arr));
});
return right_bottom_option;
};
echarts加载option:
right_bottom_chart.setOption(LBoption,true);
时间轴代码片：
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
时间轴时间监听：
right_bottom_chart.on('timelinechanged', function (timeLineIndex) {
var month_str = monthArr[timeLineIndex.currentIndex];
if(month_str){
loadRightBottomCON(right_bottom_chart, month_str, timeLineIndex.currentIndex);
}
});
抽取模板
var getTemplate = function(data_arr){
return {
title: {
text: '租赁人口',
textStyle:{
color:'#fff'
}
},
textStyle:{
color:'#B3E4A1'
},
grid: {
},
angleAxis: {
type: 'category',
data: cities,
axisLabel:{
show:true,
interval : 0
}
},
radiusAxis: {
},
polar: {
},
tooltip: {
show: true,
formatter: function (params) {
var id = params.dataIndex;
return cities[id] + '<br>最低：' + data_arr[id][0] + '<br>最高：' + data_arr[id][1] + '<br>平均：' + data_arr[id][2];
}
},
series: [{
type: 'bar',
itemStyle: {
normal: {
color: 'transparent'
}
},
data: data_arr.map(function (d) {
return d[0];
}),
coordinateSystem: 'polar',
stack: '最大最小值',
silent: true
}, {
type: 'bar',
data: data_arr.map(function (d) {
return d[1] - d[0];
}),
coordinateSystem: 'polar',
name: '价格范围',
stack: '最大最小值'
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'transparent',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return d[2];
}),
coordinateSystem: 'polar',
stack: '均值',
silent: true,
barGap: '-100%',
z: 10
}, {
type: 'bar',
itemStyle: {
normal: {
color: 'green',/*设置bar为隐藏，撑起下面横线*/
}
},
data: data_arr.map(function (d) {
return 8;
}),
coordinateSystem: 'polar',
name: '均值',
stack: '均值',
barGap: '-100%',
z: 10
}]
};
}
挥一挥衣袖，不带走一片云彩
echarts使用结合时间轴timeline动态刷新案例的更多相关文章
- 时间轴 timeline
时间轴 timeline https://www.helloweba.net/javascript/285.html https://www.helloweba.net/demo/v_timeline ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
- 横向、纵向时间轴timeline系列
近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...
- SharePoint 中时间轴 Timeline的实现
客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态.就像Facebook的Timeline效果(点击查看). 尝试着搜索 ...
- 超酷的JavaScript叙事性时间轴(Timeline)类库
在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
- echarts 地图与时间轴混搭
//常量定义public class Constant { public static Integer PM_YEAR_NO = 5; } //action public class ZhiBiaoP ...
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
一.Lateral On-Scroll Sliding with jQuery的使用 View demo Download source 1. HTML结构 <div id=" ...
- Android 时间轴TimeLine
代码:这里
- ECharts实例开发学习笔记二——时间轴
记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
随机推荐
- Docker容器（二）——镜像制作
制作Docker镜像有两种方式:第一种.docker commit,保存容器(Container)的当前状态到镜像后,然后生成对应的image:第二种.docker build,使用Dockerfil ...
- 无法复制CSD内容，复制后出现一行长字符串解决
先打开一个linux文件,然后把复制的内容放到linux文件中即可解决
- idea能用下划线替换红色报错吗？我色弱，用idea简直太痛苦了
看看下图的idea,如果某个类的包路径没有引进来,使用颜色来提示,这对于色弱的程序员简直是一种折磨,有没有可以改成eclipse的那种报错提示方式? 个人感觉idea真的没有eclipse友好,也许是 ...
- Winsock.简单TCP
PS:vs2017 编译C++代码 支持 XP:项目属性-->链接器-->系统-->需要的最小版本--> 输入 "5.1" 1.ZC:测试:c向s 发送长度 ...
- js 上传txt格式文件
判断文件是否为.txt格式: $(".delbao .file").on("change",function(){ var acceptType = $(thi ...
- PHP实现单点登录最简单的方法
PHP实现单点登录最简单的方法 用户在A登录 存入登录状态 登录B站(A的识别要传入B) 获取A的登录状态
- 抓包curl解析
目录 背景 code 背景 抓包工具charles抓取的请求curl,是这样: curl -H ':method: POST' -H ':path: /client.action?functionId ...
- [itext]Java生成PDF文件
一.前言 最近在做也导出试卷的功能,刚开始是导出为doc,可是导出来格式都有变化,最后说直接将word转为pdf,可是各种不稳定,各种报错.最后想到直接将文件写入pdf(参考:http://www.c ...
- cesium 水面、淹没 效果
水面效果 参考: http://cesiumcn.org/topic/158.html http://api.rivermap.cn/cesium/rivermap/map.html https:// ...
- 1.IO的演进
1.Java IO 演进之路 本文围绕着一下几个问题 1.Java 中 BIO.NIO.AIO 之间的区别及应用场景. 2.阻塞(Block)与非阻塞(Non-Block)区别. 3.同步(Syn ...