echarts是一款開源的可視化圖表庫,具有可拓展性、交互性等優點。其中柱狀圖是常用的圖表類型之一,在使用echarts柱狀圖時,可以通過json數據進行圖表的呈現。
var myChart = echarts.init(document.getElementById('chart')); var option = { //設置x軸數據 xAxis: { type: 'category', data: [] }, //設置y軸數據 yAxis: { type: 'value' }, //設置柱狀圖數據 series: [{ data: [], type: 'bar' }] }; //ajax請求數據 $.ajax({ url: 'data.json', success: function(data) { var xAxisData = []; var seriesData = []; for(var i = 0; i< data.length; i++) { //取出x軸和y軸數據 xAxisData.push(data[i].x); seriesData.push(data[i].y); } //賦值x軸和y軸數據 option.xAxis.data = xAxisData; option.series[0].data = seriesData; //渲染圖表 myChart.setOption(option); } });
代碼中通過ajax請求獲取到json數據,從中取出x軸和y軸的數據,賦值給xAxis和series,然后渲染圖表。
上一篇python 累乘函數
下一篇python 正方形旋轉