可視化第一篇文章戳此。這是可視化的第二篇筆記。從數(shù)據(jù)庫里查詢電影評分和各個評分數(shù)值的數(shù)量并柱狀圖到WEB端。

WEB模板還是用的前面的模板。也還是只布局到首頁，沒有做分頁。先上最終效果：

后端代碼很簡單，就是從數(shù)據(jù)庫里查出電影評分已經(jīng)評分數(shù)量。

網(wǎng)頁端代碼比較多一些（主要看選的示例）很長，選取圖表配置和數(shù)據(jù)項的代碼展示：

WEB端代碼步驟和解釋：

1，在頭部引入echarts官網(wǎng)下載的js文件；如下?:

2，為圖表展示區(qū)定義一個DOM；如下：

3，基于創(chuàng)建好的DOM，創(chuàng)建一個js實例，如下：

注意DOM的id和實例的id必須相同。

4，指定圖表的配置項和數(shù)據(jù)，js的代碼的大部；

5，利用第3步創(chuàng)建的實例，并使用剛指定的配置項和數(shù)據(jù)在網(wǎng)頁上展示圖表，如下：

上面的步驟來自echarts官方，只是組織成了自己能讓自己簡單明了的語言?？蓞⒖迹篽ttps://echarts.apache.org/handbook/zh/get-started/。

心得幾點：

1，就是使用echarts的步驟；

2，圖表可以在官方示例中先改好自己想要的風格，然后將代碼復(fù)制到上述步驟中的第4步（指定圖表的配置項和數(shù)據(jù)）；

3，配置項的標簽不需要記，要用的時候，可以找一個相對代碼較多的實例，將它里面自己喜歡的代碼復(fù)制到自己的配置項中；也可以在官方文檔中查：https://echarts.apache.org/zh/option.html#title；

4，有時候在官方實例中編輯代碼，改成了自己想要的風格，但是復(fù)制代碼又怕出錯，也會出現(xiàn)不知道粘到哪里的情況?？梢渣c擊官方示例右下角的下載按鈕將整個文檔下載下來。然后再從本地的html文檔中，提取上面說到的幾部分，第一是在頭部引入js文件，第二是構(gòu)造DOM，第三是基于準備好的DOM創(chuàng)建實例，第四是圖表配置項和數(shù)據(jù)，最后是利用實例展示圖表。

可能會有一種情況（通常是數(shù)值到字符串轉(zhuǎn)換的時候）：

可能會有這么一種情況，由于echarts的x軸坐標一般是字符串形式的，而數(shù)據(jù)本身是數(shù)值型的，在Flask中不小心將數(shù)值處理成了字符串，那么在WEB端可能會出現(xiàn)轉(zhuǎn)義的問題，然后導(dǎo)致圖表不顯示，查看網(wǎng)頁源碼類似如下：

數(shù)據(jù)本身從Flask里出來沒問題的。但是就是不顯示圖表了。這時候只需要在WEB端轉(zhuǎn)義出錯的代碼的源碼處將變量轉(zhuǎn)換成json數(shù)據(jù)格式就行了。也就是：

通過這么一行，WEB端的數(shù)據(jù)轉(zhuǎn)義就會沒問題，圖表也還會是那個圖表。