百度EChart3初體驗

2022-01-14 20:16:40 字數 2099 閱讀 7821

由於專案需要在首頁搞乙個訂單數量的走勢圖,經過多方查詢,體驗,感覺echarts不錯,封裝的很細,我們只需要看自己需要那種型別的圖表,搞定好自己的json資料就ok。至於說如何體現出來,官網的教程很詳細。大家可以去看下。大概了解下用法就ok。

其實還有很多,可以到官網中找。

其實只需要4步就ok。

1:劃分一塊區域用來顯示圖形;

2:初始化echart外掛程式;

3:填充option中的資料data;

4:載入,裝配資料到echart。

這樣就ok了。其實最難的不是使用,而是如何將這個外掛程式和自己的後台聯絡起來,比如資料應該展示那些,如何將資料json化之後傳遞過來。如何實現非同步等……

下面是mvc中乙個簡單的頁面,只是為了將圖表先展示出來。

1

///2

///折線圖

3///

4///

5public

actionresult index()

6

123"

main

" style="

width: 600px;height:400px;

">

4 @*引人外部js檔案,下面的vintage,dark是主題。*@

5678

其中的每一步都有解釋,每乙個名詞都有各自的意義,大家可以了解下。至於每乙個data,都是使用靜態的json,後面會從後台傳遞資料。下面是這個的效果。

其實上面的資料都是靜態的,很好的實現。但是對於我們實際的專案中都是從資料庫中取到的資料,不可能是靜態的,此時我們就需要將其json化,進行一定的轉換。把資料從後面傳遞到前台,在進行操作。

datalist類

1

public

class

datelist25

6public ilist ordernumber

7 }

控制器controller

檢視view

12

"main

" style="

width: 800px;height:400px;

">

3 @*引人外部js檔案*@

45678

效果如下:

我們可以發現顏色和第二個的不一樣,這個就是我們使用了主題,這個在獲取dom元素的時候標記的。如下所示。

下面是乙個餅狀圖的主要option,其餘的不變;

我一直相信,只要我一直走,就一定可以到達。雖然我不知道要到那裡去...

百度OCR識別初體驗

將sdk放入要載入專案的根目錄 2.在專案根目錄下執行npm install sdk檔名 3.具體引用方法檢視sdk中的package.json中的配置 專案目錄結構 idcard.png 身份證 新建aipocrclient ocrclient是optical character recognit...

百度飛槳(Paddle)使用初體驗

該平台有大量的課程 比賽可以參與,也有詳細的新手指導,更有免費的gpu可以蹭,詳細內容大家自己開啟就可以看到了 裡面有飛槳框架使用的詳細教程與說明,也可以搜尋飛槳api埠呼叫的說明,很方便啦 飛槳本地部署快速安裝 install quick 本次的課程是cv入門,我作為一條研二狗感到汗顏 馬上就要找...

百度echart初用總結

2.引入echarts.js檔案 第一種 模組化單檔案引入 推薦 1 最重要的第一步是引入echarts.js。2 主檔案引入後你將獲得乙個amd環境,然後就開始配置require.config 3 給裝圖表的盒子新增寬高 第二種 標籤式單檔案引入 1 第一步引入echarts all.js。這個檔...