在頁面上嵌入圖表(如柱狀圖、餅圖、折線圖、儀表盤等)通常是為了更高效、直觀地傳達(dá)信息,尤其在數(shù)據(jù)密集的場景中。
在軟件開發(fā)的過程中,我們經(jīng)常會(huì)遇到需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,那么我們?cè)撊绻麑?shù)據(jù)變成圖表呈現(xiàn)在頁面上呢?長沙做軟件開發(fā)的公司一步步帶你打怪升級(jí):
第一步:打開Apache ECharts官網(wǎng)

第二步:點(diǎn)擊快速入門,下載Echart.js文件
①快速入門
②查看入門指引
③找到echart.js文件


④Ctrl + s 保存echart.js文件到需要的文件夾

第三步:用Visual Studio Code打開文件夾
①打開文件夾

②新建HTML文件并引入echart.js
③在繪圖前我們需要為 ECharts 設(shè)置一個(gè)定義了高寬的 DOM 容器:

④然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖,下面是完整代碼。

獲取用于顯示圖表的DOM,然后將配置的參數(shù)賦值給DOM
運(yùn)行頁面到瀏覽器,你就完成了你的用第一個(gè)圖表!

最后:Echart還有很多其它的圖表,鼓勵(lì)大家去嘗試生成不一樣的圖表!