echarts學習筆記

時間 2019-11-12

標籤 echarts 學習筆記简体版

原文原文鏈接

前段時間客戶要求將數據以圖形報表的形式展現，特地提到要求用echarts，因爲以前沒有接觸過，臨時邊學便用。javascript

開始學習echarts首先想到的就是去官網找相應的資料了： echarts官網，裏面有教程有API。html

先拷貝一下官方的教程：5 分鐘上手 EChartsjava

獲取 ECharts

你能夠經過如下幾種方式獲取 ECharts。webpack

從官網下載界面選擇你須要的版本下載，根據開發者功能和體積上的需求，咱們提供了不一樣打包的下載，若是你在體積上沒有要求，能夠直接下載完整版本。開發環境建議下載源代碼版本，包含了常見的錯誤提示和警告。git
在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的文件夾裏的 dist 目錄裏能夠找到最新版本的 echarts 庫。github
經過 npm 獲取 echarts，npm install echarts --save，詳見「在 webpack 中使用 echarts」web
cdn 引入，你能夠在 cdnjs，npmcdn 或者國內的 bootcdn 上找到 ECharts 的最新版本。npm

引入 ECharts

ECharts 3 開始再也不強制使用 AMD 的方式按需引入，代碼裏也再也不內置 AMD 加載器。所以引入方式簡單了不少，只須要像普通的 JavaScript 庫同樣用 script 標籤引入。api

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>

繪製一個簡單的圖表

在繪圖前咱們須要爲 ECharts 準備一個具有高寬的 DOM 容器。echarts

<body> <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body>

而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 爲ECharts準備一個具有大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的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: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>