Apache?ECharts介紹
Apache ECharts
1 介紹
Apache ECharts 是一款基于 JavaScript 的數(shù)據(jù)可視化圖表庫(kù),提供直觀、生動(dòng)、可交互、可個(gè)性化定制的數(shù)據(jù)可視化圖表。
官網(wǎng)地址:https://echarts.apache.org/zh/index.html

常見效果展示:
1). 柱形圖

2). 餅形圖

3). 折線圖

總結(jié):不管是哪種形式的圖形,最本質(zhì)的東西實(shí)際上是數(shù)據(jù),它其實(shí)是對(duì)數(shù)據(jù)的一種可視化展示。
2 入門案例
Apache Echarts官方提供的快速入門:https://echarts.apache.org/handbook/zh/get-started/
效果展示:

實(shí)現(xiàn)步驟:
- 引入echarts.js文件(當(dāng)天資料已提供)
- 為ECharts準(zhǔn)備一個(gè)設(shè)置寬高的DOM
- 初始化echarts實(shí)例
- 指定圖表的配置項(xiàng)和數(shù)據(jù)
- 使用指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
代碼開發(fā):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入剛剛下載的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)定義了寬高的 DOM -->
<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 = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [
{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
總結(jié):使用Echarts,重點(diǎn)在于研究當(dāng)前圖表所需的數(shù)據(jù)格式。通常是需要后端提供符合格式要求的動(dòng)態(tài)數(shù)據(jù),然后響應(yīng)給前端來展示圖表。
到此這篇關(guān)于Apache ECharts簡(jiǎn)介的文章就介紹到這了,更多相關(guān)Apache ECharts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Centos7.4服務(wù)器安裝apache及安裝過程出現(xiàn)的問題解決方法
這篇文章主要介紹了Centos7.4服務(wù)器安裝apache及安裝過程出現(xiàn)的問題解決方法,結(jié)合實(shí)例形式分析了Centos7.4服務(wù)器安裝apache相關(guān)命令、配置操作及端口占用等常見問題解決方法,需要的朋友可以參考下2019-03-03
linux系統(tǒng)內(nèi)核升級(jí)導(dǎo)致進(jìn)不去系統(tǒng)的解決方案
本文介紹了使用sudo apt-get update命令后,內(nèi)核更新導(dǎo)致顯示驅(qū)動(dòng)不匹配的問題,提供了兩種解決方法:重新安裝系統(tǒng)驅(qū)動(dòng)或進(jìn)入舊內(nèi)核系統(tǒng)刪除新內(nèi)核并更新GRUB,以恢復(fù)正常系統(tǒng)2026-01-01
詳解Linux如何將一個(gè)文件夾的所有內(nèi)容授權(quán)給某一個(gè)用戶?
這篇文章主要介紹了Linux如何將一個(gè)文件夾的所有內(nèi)容授權(quán)給某一個(gè)用戶,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
linux系統(tǒng)下一個(gè)冷門的RAID卡ioc0及其監(jiān)控mpt-status
這篇文章主要介紹了linux系統(tǒng)下一個(gè)冷門的RAID卡ioc0及其監(jiān)控mpt-status,需要的朋友可以參考下2016-05-05
21個(gè)常用的apache .htaccess文件配置技巧分享
這篇文章主要介紹了21個(gè)常用的apache .htaccess文件配置技巧分享,涵蓋了網(wǎng)站中最常用的一些功能需求解決辦法,需要的朋友可以參考下2014-07-07
Linux內(nèi)核設(shè)備驅(qū)動(dòng)之高級(jí)字符設(shè)備驅(qū)動(dòng)筆記整理
今天小編就為大家分享一篇關(guān)于Linux內(nèi)核設(shè)備驅(qū)動(dòng)之高級(jí)字符設(shè)備驅(qū)動(dòng)筆記整理,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2018-12-12

