【前端可视化】|echarts使用结合时间轴timeline动态刷新案例

使用案例 第一步: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] + '
最低:' + data_arr[id][0] + '
最高:' + data_arr[id][1] + '
平均:' + 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] + '
最低:' + data_arr[id][0] + '
最高:' + data_arr[id][1] + '
平均:' + 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动态刷新案例】

    推荐阅读