在vue中添加Echarts圖表的基本使用教程？模塊化單文件導(dǎo)入（推薦）1新建一個(gè)電子藝術(shù).html為ecarts準(zhǔn)備一個(gè)大小（寬度和高度）為的DOM，如下圖所示：2創(chuàng)建一個(gè)新的<script&g

在vue中添加Echarts圖表的基本使用教程？

模塊化單文件導(dǎo)入（推薦）

1

新建一個(gè)電子藝術(shù).html為ecarts準(zhǔn)備一個(gè)大?。▽挾群透叨龋榈腄OM，如下圖所示：

2

創(chuàng)建一個(gè)新的<script>標(biāo)記以引入一個(gè)模塊化的單個(gè)文件電子藝界.js，如下圖所示：

3

在新的<script>標(biāo)記，配置eCart的路徑和模塊加載器接收所需的圖表（相對(duì)路徑來(lái)自當(dāng)前頁(yè)面鏈）電子藝界.js)，如下圖所示：

4

<script> tab動(dòng)態(tài)加載eCart和所需圖表。回調(diào)函數(shù)可以初始化圖表并驅(qū)動(dòng)圖表的生成，如下圖所示：

5

在瀏覽器中打開電子藝品.html，可以看到如下效果，如下圖所示：

end

label type single file import

新建一個(gè)電子藝術(shù).html文件，為ecart準(zhǔn)備一個(gè)大?。▽挾群透叨龋榈腄OM，如下圖所示：

創(chuàng)建一個(gè)新的<script>標(biāo)記并引入ecart-所有.js，如下圖所示：

創(chuàng)建新的<script>，使用全局變量ecarts初始化圖表并驅(qū)動(dòng)圖表的生成，如下圖所示：4

在瀏覽器中打開電子藝術(shù).html，您可以看到如下效果，如下圖所示：

如何制作簡(jiǎn)約、大氣逼格較高的商務(wù)報(bào)表？有什么工具？

業(yè)務(wù)報(bào)表從圖表搭配、行布和配色都很重要，但我認(rèn)為最重要的是表中數(shù)據(jù)的呈現(xiàn)，指標(biāo)之間的邏輯，以及它是否能解釋任何商業(yè)問題。可以使用Excel、Bi和報(bào)表工具完成。

Excel上面說了一些自己操作的細(xì)節(jié)，具體可以看我的文章《如何制作圖表很漂亮的Excel文檔？》

如果您使用報(bào)表或Bi，例如，類似的顏色匹配和圖表組合可以應(yīng)用模板。一些細(xì)節(jié)，如細(xì)胞對(duì)齊和圖表縮放可以通過自適應(yīng)解決。例如，finereport創(chuàng)建的業(yè)務(wù)報(bào)告模板如下圖所示：