新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)ECharts教程:如何快速上手ECharts
特性介紹
ECharts,一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設(shè)備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,F(xiàn)irefox,Safari等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定制的數(shù)據(jù)可視化圖表。

從哪里獲取 ECharts ?
獲取 ECharts 的路徑有以下幾種,請根據(jù)您的情況進行選擇:
- 最直接的方法是在 ECharts 的官方網(wǎng)站中挑選適合您的版本進行下載,不同的打包下載應(yīng)用于不同的開發(fā)者功能與體積的需求,或者您也可以直接下載完整版本;開發(fā)環(huán)境建議下載源代碼版本,包含了常見的錯誤提示和警告。
- 也可以在 ECharts 的 GitHub 上下載最新的 release 版本,解壓出來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫。
- 或者通過 npm 獲取 echarts,npm install echarts --save,詳見“在 webpack 中使用 echarts”
- 由 cdn 引入,你可以在 cdnjs,npmcdn 或者國內(nèi)的 bootcdn 上找到 ECharts 的最新版本。
如何引入 ECharts?
ECharts 的引入方式變簡單了,因為從 ECharts 3 開始就不用使用 AMD 的方式引入,代碼也不再內(nèi)置 AMD 加載器,所以 ECharts 的引入方式就可以像 JavaScript 庫一樣用 script 標簽引入即可。
下面是 Echarts 引入的代碼:
準備容器
使用 Echarts 繪制圖表前需要先有一個有寬高的 DOM 容器,代碼如下:
使用 Echarts 繪制一個簡單的圖表
接著通過使用 echarts.init 方法來初始化一個 echarts 實例和使用 setOption 方法生成一個簡單的柱狀圖,完整的代碼如下:
cdcxhl.com(www.cdcxhl.com)
嘗試一下
這樣你的第一個圖表就誕生了!
文章標題:創(chuàng)新互聯(lián)ECharts教程:如何快速上手ECharts
文章轉(zhuǎn)載:http://m.5511xx.com/article/ccdgogh.html


咨詢
建站咨詢
