當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

001_ECharts入门

發(fā)布時(shí)間：2025/5/22 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 001_ECharts入门小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. ECharts介紹

1.1. ECharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(kù), 涵蓋各行業(yè)圖表, 滿(mǎn)足各種需求。

1.2. ECharts遵循Apache-2.0開(kāi)源協(xié)議, 免費(fèi)商用。

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

1.4. ECharts官網(wǎng)鏈接:?https://echarts.apache.org/zh/index.html。

2. 獲取Apache ECharts

2.1. Apache ECharts提供了多種安裝方式, 你可以根據(jù)項(xiàng)目的實(shí)際情況選擇以下任意一種方式安裝。

從GitHub獲取
從npm獲取
從CDN獲取
在線(xiàn)定制

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

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

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

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

2.3.3.?打開(kāi)壓縮包是package目錄, 進(jìn)入該目錄, 查看echarts項(xiàng)目的目錄結(jié)構(gòu)?

2.3.4.?進(jìn)入dist文件夾, 該目錄下有一個(gè)echarts.js文件, 在我們的項(xiàng)目中引用該文件, 就可以進(jìn)行圖表的繪制了。?

2.4. 從GitHub獲取

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

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

2.5. 在線(xiàn)定制

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

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

3. 引入Apache ECharts

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

4. 為ECharts準(zhǔn)備一個(gè)具備高寬的DOM容器

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

5. 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例

5.1. 通過(guò)echarts.init方法初始化一個(gè)echarts實(shí)例, 命名為myChart。

6. 設(shè)置配置信息

6.1. echarts實(shí)例通過(guò)setOption方法設(shè)置配置信息, 這里option表示使用json數(shù)據(jù)格式的配置來(lái)繪制圖表。

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

6.2. 為圖表配置標(biāo)題

title: {text: 'ECharts入門(mén)例子' }

6.3. 配置提示信息

tooltip: {}

6.4. 圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol), 顏色和名字?？梢酝ㄟ^(guò)點(diǎn)擊圖例控制哪些系列不顯示。

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

6.5. 配置要在X軸顯示的項(xiàng)

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

6.6. 配置要在Y軸顯示的項(xiàng)

yAxis: {}

6.7. 系列列表

series: [{name: '銷(xiāo)量', // 系列名稱(chēng)type: 'bar', // 系列圖表類(lèi)型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容} ]

6.8. 每個(gè)系列通過(guò)type決定自己的圖表類(lèi)型

type: 'bar', 柱狀/條形圖。
type: 'line', 折線(xiàn)/面積圖。
type: 'pie', 餅圖。
type: 'scatter', 散點(diǎn)(氣泡)圖。
type: 'effectScatter', 帶有漣漪特效動(dòng)畫(huà)的散點(diǎn)(氣泡)。
type: 'radar', 雷達(dá)圖。
type: 'tree', 樹(shù)型圖。
type: 'treemap', 樹(shù)型圖。
type: 'sunburst', 旭日?qǐng)D。
type: 'boxplot', 箱形圖。
type: 'candlestick', K線(xiàn)圖。
type: 'heatmap', 熱力圖。
type: 'map', 地圖。
type: 'parallel', 平行坐標(biāo)系的系列。
type: 'lines', 線(xiàn)圖。
type: 'graph', 關(guān)系圖。
type: 'sankey', ?；鶊D。
type: 'funnel', 漏斗圖。
type: 'gauge', 儀表盤(pán)。
type: 'pictorialBar', 象形柱圖。
type: 'themeRiver', 主題河流。
type: 'custom', 自定義系列。

7. 第一個(gè)ECharts例子

7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>ECharts入門(mén)例子</title><script type="text/javascript" src="echarts.js"></script></head><body><div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom, 初始化echarts實(shí)例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項(xiàng)和數(shù)據(jù)var option = {// 為圖表配置標(biāo)題title: {text: 'ECharts入門(mén)例子'},// 配置提示信息tooltip: {},// 圖例組件legend: {data: ['銷(xiāo)量']},// 配置要在X軸顯示的項(xiàng)xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},// 配置要在Y軸顯示的項(xiàng)yAxis: {},// 系列列表series: [{name: '銷(xiāo)量', // 系列名稱(chēng)type: 'bar', // 系列圖表類(lèi)型data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容}]};// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></body> </html>

7.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的001_ECharts入门的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。