Web前端圖表框架EChars.js入門（使用Visual Studio2017）
阿新 • • 發佈：2018-12-18
前言
前幾個月負責了一個web專案，這幾天順利交付了，心裡很開心。這段時間會陸續總結一下專案中用到的東西，這既是對自己的總結與提高，同時也希望可以分享給大家，希望對大家有幫助。
ECharts.js簡介
百度出品的圖表框架，可以做柱狀圖、折線圖等很多種圖表。使用起來非常簡單，花幾分鐘時間學習一下即可在專案中順利的使用。
開始
開啟vs2017，新建 ASP.NET Web應用程式，選擇空模板，點選確認。
將下載得到的js檔案複製到專案資料夾，
右擊專案名，選擇[新增]->[html頁]，來新增HTML檔案
將HtmlPage1.html內容替換為下面程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html>
我們將在id="main"的div裡面畫一個柱狀圖，在該div程式碼行下面新增js程式碼。新增完後頁面程式碼如下(借鑑了官網的入門示例程式碼)：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['價格'] }, xAxis: { data: ["雪碧", "阿薩姆奶茶", "王中王一包", "老式大辣片"] }, yAxis: {}, series: [{ name: '價格', type: 'bar', data: [3, 5, 20, 6] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
儲存後，F5執行網站，將會看到下圖所示
返回VS2017，修改HtmlPage1裡面script裡面的option物件程式碼如下：
var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['價格', '銷量'] }, xAxis: { data: ["雪碧", "阿薩姆奶茶", "王中王一包", "老式大辣片"] }, yAxis: {}, series: [ { name: '價格', type: 'bar', data: [3, 5, 20, 6] }, { name: '銷量', type: 'bar', data: [7, 10, 5, 8] }, ] };
儲存後，返回瀏覽器介面，F5重新整理，可以看到圖表增加了一系列資料
滑鼠放到柱狀圖的柱子上，可以看到浮動提示框；點選圖例，可以隱藏對應的柱子，再次點選則取消隱藏。
返回VS2017，修改option.series程式碼為：
series: [
{
name: '價格',
type: 'bar',
data: [3, 5, 20, 6]
},
{
name: '銷量',
type: 'line',
data: [7, 10, 5, 8]
},
]
儲存後，返回瀏覽器介面，F5重新整理，可以看到“銷量”變為折線圖顯示
結束
通過上面例子可以看出，ECharts.js使用非常方便，不過在實際專案中使用時，需要根據後臺給的資料來源來構造option物件。
ECharts.js官網有詳細的教程及示例，需要的小夥伴可以去官網學習。