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动态刷新案例的更多相关文章

  1. 时间轴 timeline

    时间轴 timeline https://www.helloweba.net/javascript/285.html https://www.helloweba.net/demo/v_timeline ...

  2. Alamofire源码解读系列(十二)之时间轴(Timeline)

    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...

  3. 横向、纵向时间轴timeline系列

    近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...

  4. SharePoint 中时间轴 Timeline的实现

    客户需要在OA中实现每日动态功能,能够记录每一位员工的每天的工作动态,我很快想到了时间轴,因为时间轴能很直观的现实员工每一刻的动态.就像Facebook的Timeline效果(点击查看). 尝试着搜索 ...

  5. 超酷的JavaScript叙事性时间轴(Timeline)类库

    在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...

  6. echarts 地图与时间轴混搭

    //常量定义public class Constant { public static Integer PM_YEAR_NO = 5; } //action public class ZhiBiaoP ...

  7. JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner

    一.Lateral On-Scroll Sliding with jQuery的使用 View demo      Download source 1. HTML结构 <div id=" ...

  8. Android 时间轴TimeLine

    代码:这里

  9. ECharts实例开发学习笔记二——时间轴

    记录一下ECharts时间轴的使用,首先是照着官方的示例做一遍,在这里不要忘了引入timelineOption.js,后面介绍如何动态创建时间轴的记录数,即根据需求可伸缩显示有多少天或者年月等轴标记数 ...

随机推荐

  1. openresty开发系列15--lua基础语法4表table和运算符

    openresty开发系列15--lua基础语法4表table和运算符 lua中的表table 一)table (表)Table 类型实现了一种抽象的"关联数组".即可用作数组,也 ...

  2. shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查)

    shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查) Shell脚本与MySQL数据库交互(增删改查) # 环境准备:安装mariadb 数据库 [ro ...

  3. Python3基础 函数 返回值 利用元组返回多个值

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  4. 实战c++中的string系列--std:vector 和std:string相互转换(vector to stringstream)

    string.vector 互转 string 转 vector vector  vcBuf;string        stBuf("Hello DaMao!!!");----- ...

  5. 【问题解决】Flasgger mapping values are not allowed here?

    参考来源:https://stackoverflow.com/questions/9055371/python-and-pyaml-yaml-scanner-scannererror-mapping- ...

  6. 透过SourceTree再谈Git

    初出茅庐之基础篇 1. Download SourceTree from: https://www.sourcetreeapp.com/ 2.Complete the installation. 3. ...

  7. 【kubeconfig】kubectl命令所使用的集群访问文件

    kubectl默认会从$HOME/.kube目录下查找文件名为 config 的文件,也可以通过设置环境变量 KUBECONFIG 或者通过设置 --kubeconfig 去指定其它 kubeconf ...

  8. idea的alt+enter可以从菜单点吗

    在idea中,当java某个类的包没有引入的时候,可以通过alt+enter来实现包的引入,那么可以通过菜单按钮,或者右键的方式点出来吗? 我们知道eclipse如果某个类为止,放在这个报错的类上,e ...

  9. MySQL学习笔记——MySQL启动过程(一)

    首先去官网或者github下载MySQL5.7的源码. 官网地址:https://dev.mysql.com/downloads/mysql/ github地址:https://github.com/ ...

  10. 【Leetcode_easy】1030. Matrix Cells in Distance Order

    problem 1030. Matrix Cells in Distance Order 参考 1. Leetcode_easy_1030. Matrix Cells in Distance Orde ...