當前位置：首頁 >

001_ECharts入门

發布時間：2025/5/22 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 001_ECharts入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. ECharts介紹

1.1. ECharts是一個使用JavaScript實現的開源可視化庫, 涵蓋各行業圖表, 滿足各種需求。

1.2. ECharts遵循Apache-2.0開源協議, 免費商用。

1.3. ECharts兼容當前絕大部分瀏覽器(IE8/9/10/11, Chrome, Firefox, Safari等)及兼容多種設備, 可隨時隨地任性展示。

1.4. ECharts官網鏈接:?https://echarts.apache.org/zh/index.html。

2. 獲取Apache ECharts

2.1. Apache ECharts提供了多種安裝方式, 你可以根據項目的實際情況選擇以下任意一種方式安裝。

從GitHub獲取
從npm獲取
從CDN獲取
在線定制

2.2. 從npm獲取: npm install echarts --save。

2.3. 從CDN獲取, 推薦從jsDelivr引用echarts

2.3.1.?jsDelivr下載地址: https://www.jsdelivr.com/package/npm/echarts, 點擊下載按鈕。

2.3.2.?下載完成壓縮包: ?

2.3.3.?打開壓縮包是package目錄, 進入該目錄, 查看echarts項目的目錄結構?

2.3.4.?進入dist文件夾, 該目錄下有一個echarts.js文件, 在我們的項目中引用該文件, 就可以進行圖表的繪制了。?

2.4. 從GitHub獲取

2.4.1. apache/echarts項目的release頁面可以找到各個版本的鏈接。點擊下載頁面下方Assets中的Source code, 解壓后dist目錄下的echarts.js即為包含完整ECharts功能的文件。

2.4.2. GitHub上echarts地址: https://github.com/apache/echarts。

2.5. 在線定制

2.5.1. 如果只想引入部分模塊以減少包體積, 可以使用ECharts在線定制功能。

2.5.2. 在線定制地址: https://echarts.apache.org/zh/builder.html, 勾選自己需要的功能, 最后點擊下載。

3. 引入Apache ECharts

3.1. 新建一個index.html文件, 引入echarts.js。

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>ECharts入門例子</title><script type="text/javascript" src="echarts.js"></script><body></body></head> </html>

4. 為ECharts準備一個具備高寬的DOM容器

4.1. 實例中id為main的div用于包含ECharts繪制的圖表

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>ECharts入門例子</title><script type="text/javascript" src="echarts.js"></script><body><div id="main" style="width: 600px; height:400px;"></div></body></head> </html>

5. 基于準備好的dom, 初始化echarts實例

5.1. 通過echarts.init方法初始化一個echarts實例, 命名為myChart。

6. 設置配置信息

6.1. echarts實例通過setOption方法設置配置信息, 這里option表示使用json數據格式的配置來繪制圖表。

echarts.init(document.getElementById('main')).setOption(option);

6.2. 為圖表配置標題

title: {text: 'ECharts入門例子' }

6.3. 配置提示信息

tooltip: {}

6.4. 圖例組件展現了不同系列的標記(symbol), 顏色和名字。可以通過點擊圖例控制哪些系列不顯示。

legend: {data: [{name: '系列1',// 強制設置圖形為圓。icon: 'circle',// 設置文本為紅色textStyle: {color: 'red'}}] }

6.5. 配置要在X軸顯示的項

xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }

6.6. 配置要在Y軸顯示的項

yAxis: {}

6.7. 系列列表

series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容} ]

6.8. 每個系列通過type決定自己的圖表類型

type: 'bar', 柱狀/條形圖。
type: 'line', 折線/面積圖。
type: 'pie', 餅圖。
type: 'scatter', 散點(氣泡)圖。
type: 'effectScatter', 帶有漣漪特效動畫的散點(氣泡)。
type: 'radar', 雷達圖。
type: 'tree', 樹型圖。
type: 'treemap', 樹型圖。
type: 'sunburst', 旭日圖。
type: 'boxplot', 箱形圖。
type: 'candlestick', K線圖。
type: 'heatmap', 熱力圖。
type: 'map', 地圖。
type: 'parallel', 平行坐標系的系列。
type: 'lines', 線圖。
type: 'graph', 關系圖。
type: 'sankey', 桑基圖。
type: 'funnel', 漏斗圖。
type: 'gauge', 儀表盤。
type: 'pictorialBar', 象形柱圖。
type: 'themeRiver', 主題河流。
type: 'custom', 自定義系列。

7. 第一個ECharts例子

7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>ECharts入門例子</title><script type="text/javascript" src="echarts.js"></script></head><body><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: ['銷量']},// 配置要在X軸顯示的項xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項yAxis: {},// 系列列表series: [{name: '銷量', // 系列名稱type: 'bar', // 系列圖表類型data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body> </html>

7.2. 效果圖

總結

以上是生活随笔為你收集整理的001_ECharts入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

001_ECharts入门

總結