ECharts是一款非常流行的JavaScript圖表庫。它支持各類圖表的繪制,如折線圖、柱狀圖、散點圖等。在ECharts中,通常需要通過JSON數據來描述圖表的數據和樣式。但是,如果我們需要在一個頁面中展示多個圖表,那么就需要使用多個JSON數據了。
下面是一個同時展示兩個圖表的例子,其中使用了兩個不同的JSON數據:
// JSON數據1 var option1 = { title: { text: '圖表1' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["蘋果","梨子","香蕉","葡萄","西瓜","草莓"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // JSON數據2 var option2 = { title: { text: '圖表2' }, tooltip: {}, legend: { data:['訪問量'] }, xAxis: { data: ["周一","周二","周三","周四","周五","周六","周日"] }, yAxis: {}, series: [{ name: '訪問量', type: 'line', data: [150, 230, 224, 218, 135, 147, 260] }] }; // 創建兩個圖表實例 var chart1 = echarts.init(document.getElementById('chart1')); var chart2 = echarts.init(document.getElementById('chart2')); // 綁定JSON數據并渲染圖表 chart1.setOption(option1); chart2.setOption(option2);
如上所示,我們通過創建兩個JSON數據對象分別描述兩個圖表的數據和樣式,并將它們分別綁定到兩個ECharts實例上。
最后,我們使用ECharts提供的setOption
方法將JSON數據渲染成可視化圖表。通過這種方式,我們就可以在同一頁面上展示多個不同的圖表了。