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,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...
随机推荐
- centos6环境远程执行shell脚本报错not a valid identifier的问题处理
# 通过jenkins的apache用户rsync同步php代码到远程服务器报错如下: SSH: EXEC: STDOUT/STDERR from command [/bin/sh /usr/loca ...
- 异常检测-基于孤立森林算法Isolation-based Anomaly Detection-2-实现
参考https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.IsolationForest.html#sklearn.en ...
- VAE论文学习
intractable棘手的,难处理的 posterior distributions后验分布 directed probabilistic有向概率 approximate inference近似推 ...
- 003-结构型-07-享元模式（Flyweight）
一.概述 提供了减少对象数且从而改善应用所需的对象结构的方式.运用共享技术有效地支持大是细粒度的对象. 它通过与其他类似对象共享数据来减小内存占用.它使用共享物件,用来尽可能减少内存使用量以及分享资讯 ...
- Linux记录-Shell自动化部署批量建立用户和批量SSH配置（转载）
if [ ! $# -eq 2 ] ; then echo "请输入用户名和密码以空格分开!" exit else name="$1" passwd=" ...
- 静态站点生成器-html-markdown-jekyll
推荐指数:
- 如何固定table表格宽度，样式不受容器影响
之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...
- Python3 IO编程之操作文件和目录
如果我们要操作文件,目录,可以在命令行下面输入操作系统提供的各种命令来完成.比如ls,cp等命令 如果要在python程序中执行这些目录和文件的操作怎么办?其实操作系统提供的命令指示简单地调用了操作系 ...
- web端自动化——selenium Page Object设计模式
Page Object设计模式的优点如下: ① 减少代码的重复. ② 提高测试用例的可读性. ③ 提高测试用例的可维护性,特别是针对UI频繁变化的项目. 当为Web页面编写测试时,需 ...
- java当中JDBC当中Scrollable和Updatable ResultSet的用法和Helloworld例子
[学习笔记] 在前面的jdbc的Helloworld程序当中,我们接触了最简单的 Statement.那种Statement的光标只能向前移.意思就是访问完2,只能继续访问3,不能再回过头来访问1.还 ...