echarts使⽤结合时间轴timeline动态刷新案例
1、echarts简介
  ECharts，⼀个使⽤ JavaScript 实现的开源可视化库，可以流畅的运⾏在 PC 和移动设备上，兼容当前绝⼤部分浏览器
（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的⽮量图形库，提供直观，交互丰富，可⾼度个性化定制的数据可视化图表。
  ECharts 提供了常规的、、、、，⽤于统计的，⽤于地理数据可视化的、、，⽤于关系数据可视化的、、，多维数据可视化的，还有⽤于 BI 的，，并且⽀持图与图之间的混搭。
2、使⽤案例
第⼀步：echarts初始化
第⼆步：定义option,
第三步：echarts加载option
echarts初始化:
var right_bottom_chart = echarts.ElementById("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)+'⽉';
}setoption
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
时间轴时间监听：
right_('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
}]
};
}
挥⼀挥⾐袖，不带⾛⼀⽚云彩

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。