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] ] } ] }