圖文詳解echarts的使用方法（餅狀圖實例）

在頁面佈局時經常需要插入一些圖表，例如餅狀圖，柱狀圖，地圖等等，但是這些程式碼比較難寫，因此我們通常會用借助echarts，那你知道如何使用echarts嗎？這篇文章就跟大家講echarts的使用方法，有一定的參考價值，有興趣的朋友可以看看。

以餅狀圖為例，介紹echarts的使用步驟

第一步：開啟echarts官網，網址：http://echarts.baidu.com

第二步：進入首頁，下載echarts文件，一般情況下，選擇原始碼就可以

##第三步：開啟編輯器，新建一個HTML文件，在頁面中引入echarts.js文件（注意文件的引入位置），如下圖所示，

##第四步：在頁面中創建一個div用來放置餅狀圖（可以設定div的大小），並給它一個class類別名稱「main」

第五步：在<script>標籤中編寫程序，基於準備好的dom，用var myChart = echarts.init(document.getElementById('main'));</script>

將echart初始化到div中

#第六步：指定圖表的組態項目和資料（可依個人需求修改刪除相關資料）

#2步驟：使用剛指定的組態項目和數據顯示圖表。

步驟八：設定完成，在瀏覽器中打開，可以看到echarts繪製的餅狀圖，如圖所示：

#以上詳細介紹了echarts的使用方法，專案中用的比較多，希望大家可以自己動手嘗試，看看自己能不能實現這樣的效果，希望這篇文章對你有所幫助！

【相關教學推薦】

1. 

JavaScript中文參考手冊

2. CSS3影片教學
3. bootstrap教程

以上是圖文詳解echarts的使用方法（餅狀圖實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！