Echart是一個開源的JavaScript可視化庫,可以幫助我們快速創建交互式和動態的圖表。Echart除了提供各種圖表的繪制,還提供了許多實用的功能,如數據綁定。通過綁定JSON數據,我們可以輕松地將數據渲染到圖表中,并實現數據的實時更新。
var option = { title: { text: '某站點訪問情況', subtext: '純屬虛構' }, tooltip: { trigger: 'axis' }, legend: { data:['訪問量'] }, xAxis: { type: 'category', boundaryGap: false, data: ['周一','周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 次' } }, series: [ { name:'訪問量', type:'line', data:[120, 132, 101, 134, 90, 230, 210] } ] }; myChart.setOption(option);
以上代碼為繪制一個簡單的折線圖,可以看到x軸的data和series的data都是硬編碼在代碼中的,如果要修改數據,需要到代碼中手動更改。而使用數據綁定則可以避免這種繁瑣的手動修改。以下是一個簡單的例子。
// JSON數據 var data = [ {name: '周一', value: 120}, {name: '周二', value: 132}, {name: '周三', value: 101}, {name: '周四', value: 134}, {name: '周五', value: 90}, {name: '周六', value: 230}, {name: '周日', value: 210} ]; // option配置 var option = { title: { text: '某站點訪問情況', subtext: '純屬虛構' }, tooltip: { trigger: 'axis' }, legend: { data:['訪問量'] }, xAxis: { type: 'category', boundaryGap: false, // 綁定JSON數據 data: data.map(function(item){ return item.name; }) }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 次' } }, series: [ { name:'訪問量', type:'line', // 綁定JSON數據 data: data.map(function(item){ return item.value; }) } ] }; myChart.setOption(option);
以上代碼通過綁定JSON數據,將數據渲染到了圖表中,并且數據的修改可以直接在JSON中修改,而不用手動修改代碼,非常方便。