ECharts 是一個基于 JavaScript 的開源可視化庫,用于制作數據可視化圖表。它支持多種數據格式,并提供了多種圖表類型。與此同時,ECharts 也為我們提供了一套完備的 API,使得我們能夠自由地定制展現效果,嵌入數據,以及調整交互細節。
在 ECharts 的使用中,我們需要先通過初始化函數 echarts.init() 來創建一個基本的 ECharts 實例。同時,為了方便使用 jQuery 控制 DOM 元素,我們需要引用 echarts.js 和 jQuery 庫。
// 引入echarts.js <script src="./echarts.js"></script> // 引入jQuery庫 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
接下來,我們來看一下 echarts.init() 函數的具體實現:
var myChart = echarts.init(document.getElementById('myChart'));
其中,參數 document.getElementById('myChart') 表示我們需要在頁面中找到一個 ID 為 myChart 的元素,綁定 ECharts 實例。通過這個實例,我們就可以調用 ECharts 提供的 API,在頁面中繪制出我們需要的圖表。
以下是一個簡單的 ECharts 圖表展示代碼實現:
// 創建 ECharts 實例 var myChart = echarts.init(document.getElementById('myChart')); // 配置參數 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);
這段代碼實現了一個柱狀圖,展示了不同商品的銷售數量。其中通過 option 對象,我們設置了圖表的標題、提示框、圖例、X軸和Y軸等屬性。我們最后調用 myChart.setOption() 來繪制圖表。
總之,通過 ECharts 的初始化函數 echarts.init(),我們可以在頁面中輕松創建一個基本的 ECharts 實例,然后通過 API 和配置參數來定義圖表的層級、樣式、數據等細節,實現精美的可視化效果。