ajax请求tab切换从新渲染Echarts图表

这里为了方便，使用下拉列表代替tab切换

HTML代码

<select id="selectID"> <option value="day">按天</option> <option value="week">按周</option> <option value="month">按月</option> </select> <div id="main" style="width: 600px;height:400px;"></div>

 

JavaScript代码

//walden为echarts主题，_.flatten为underscore.js提供的数组扁平化方法 var myChart = echarts.init(document.getElementById('main'), 'walden'); //封装_ajax方法，每次切换时发起get请求，获取相应的json文件，请求成功后渲染echarts function _ajax(url) { $.ajax({ type: 'get', url: url, success: function(res) { option = { xAxis: { data: res.series }, yAxis: {}, series: [{ name: '销量', type: 'line', data: _.flatten(res.rows[0].values) }] }; myChart.setOption(option); } }); } $(function() { _ajax('data/day.json'); $("#selectID").change(function() { var selectValue = $("#selectID").val(); switch(selectValue){ case 'day': _ajax('data/day.json'); break; case 'week': _ajax('data/week.json'); break; default: _ajax('data/month.json'); } }); });

 

week.json

{ "series":[ "05-01", "05-08", "05-15", "05-22", "05-29" ], "rows":[ { "values":[ [13174], [13486], [13816], [13832], [11374] ] } ] }