什么是ECharts？

ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11，Chrome，Firefox，Safari等)，底層依賴(lài)輕量級(jí)的矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。還可以創(chuàng)建3d可視化圖表。

為什么要使用ECharts

雖然我們可以使用canvas元素繪制條形圖，折線圖等數(shù)據(jù)可視化圖表，但是在編寫(xiě)代碼的時(shí)候需要編寫(xiě)復(fù)雜的代碼，因此使用ECharts可以讓我們使用數(shù)據(jù)可視化圖表模板，直接寫(xiě)入數(shù)據(jù)就可以輕松實(shí)現(xiàn)好看，復(fù)雜的可視化數(shù)據(jù)圖表。

如何ECharts下載？

我們可以通過(guò)GitHub或者npm下載(npm install echarts)

使用案例教程

我是通過(guò)npm下載的

如何使用？

1.我們要看官方的數(shù)據(jù)可視化圖表案例中的圖標(biāo)名稱(chēng)，因?yàn)檫@是我們選擇模板所需要的固定內(nèi)容。

2.第二部我們需要學(xué)習(xí)官方的API，這里是顯示數(shù)據(jù)導(dǎo)入的變量方式和數(shù)據(jù)可視化圖表的顏色，特效等。

首先查詢(xún)案例模板

然后我們引入ECharts文件

創(chuàng)建DOM對(duì)象

用于顯示ECharts可視化數(shù)據(jù)圖表

JS獲取DOM對(duì)象，設(shè)置ECharts數(shù)據(jù)，導(dǎo)入數(shù)據(jù)。

如何修改數(shù)據(jù)？

當(dāng)我們修改數(shù)據(jù)的時(shí)候，可以直接在option屬性中修改，對(duì)應(yīng)的ECharts圖表數(shù)據(jù)也會(huì)跟著變化。

總結(jié)

ECharts數(shù)據(jù)可視化圖表可以方便我們快速開(kāi)發(fā)各種數(shù)據(jù)可視化圖表，減輕了我們操作canvas繪制圖表的壓力，提高了工作效率。

總結(jié)

以上是生活随笔為你收集整理的echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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