echarts中餅狀圖數據太多進行翻頁

charts餅狀圖數據太多

echarts 餅狀圖內容太多怎么處理

有些時候，我們餅狀圖中echarts的數據可能會很多。
這個時候展示肯定會密密麻麻的。導致顯示很凌亂
我們需要\'翻頁\'類似表格展示下一頁的數據

在legend中下需要配置屬性 type: \'scroll\',表示滾動
數據太多可以滾動的形式進展示
如下：
legend: {
	type: \'scroll\',
}

自定義分頁箭頭

但是我們發現這個分頁箭頭不好看。
所以我們需要優化這個分頁的箭頭
通過官網的描述信息我們配置如下這只
這里設置箭頭的路徑
var option={
	legend: {
		type: \'scroll\', 滾動
		orient: \'vertical\', 垂直方向滾動
		pageIcons: {
		 	vertical: [
		 		\'path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22.08 57.792 0 79.872 22.016 22.016 57.792 22.08 79.872 0L512 392.256l359.296 359.296c22.016 22.016 57.792 22.08 79.872 0 22.08-22.08 22.016-57.792 0-79.872L551.936 272.448C529.856 250.432 494.144 250.432 472.064 272.448z\',
				\'path://M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z\',
			],
		},
		pageButtonPosition: \'end\', // 翻頁的位置。\'start\'：控制塊在左或上,end控制塊在右或下。
		pageIconColor: \'#29bca8\', // 可以點擊的翻頁按鈕顏色
		pageIconInactiveColor: \'#7f7f7f\', // 禁用的按鈕顏色
		pageIconSize: 14, //這當然就是按鈕的大小
	}
}

有的小伙伴會好奇
path得值怎么來的，我是從svg中獲取的，

如何在iconfont中獲取圖標的svg代碼

pageIcons 的值哪些？

第1種：svg的代碼,就是我剛剛使用的

第2種:URL為圖片鏈接例如：\'image://http://xxx.xxx.xxx/a/b.png\'

第3種:URL為dataURI 例如：
\'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUh
wFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7\'

定義legend的顯示內容樣式的設置

在legend下有一個formatter屬性
我們可以通過 formatter 來自定義文字
formatter: function(name) {
	let showNum
	let percentage
	for (var i=0; i < listSummary.length; i++) {
		if (listSummary[i].name==name) {
			showNum=listSummary[i].value
			if (lejibaoxiuTotals) { //lejibaoxiuTotals可能為0
				// 計算百分比
				percentage=((listSummary[i].value /lejibaoxiuTotals) *100).toFixed(2) + \'%\'
			} else {
				percentage=\'\'
			}
		}
	}
	return `{name| ${ name.length > 5 ? name.slice(0, 5) + \'...\' : name}}
	| {val| ${percentage}}  {numNum| ${showNum}}`
},

通過富文本來控制樣式
textStyle: {
	fontSize: 13, //字體的大小
	color: \'#D9D9D9\',
	rich: {
		//設置name屬性的樣式(顯示的:華為x)，這里與 return中的name保持一致
		name: {
			color: \'#595959\',
			width: 77, //寬度
			padding: [0, 0, 0, 0], //間距表示 上右下左
		},
		//設置val(百分比)屬性的樣式，這里與 return中的val保持一致
		val: {
			width: 50,//寬度
			color: \'#8c8c8c\', 、
			padding: [0, 10, 0, 6], //間距表示 上右下左
		},
		//設置numNum(數量)屬性的樣式，這里與 return中的numNum保持一致
		numNum: {
			color: \'#8c8c8c\',
		},
	},
},

這樣就好看一些了

最終的代碼

是簡易數據分析系列的第 10 篇文章。

原文首發于博客園：簡易數據分析 10。

友情提示：這一篇文章的內容較多，信息量比較大，希望大家學習的時候多看幾遍。

我們在刷朋友圈刷微博的時候，總會強調一個『刷』字，因為看動態的時候，當把內容拉到屏幕末尾的時候，APP 就會自動加載下一頁的數據，從體驗上來看，數據會源源不斷的加載出來，永遠沒有盡頭。

我們今天就是要講講，如何利用 Web Scraper 抓取滾動到底翻頁的網頁。

今天我們的練手網站是知乎數據分析模塊的精華帖，網址為：

https://www.zhihu.com/topic/19559424/top-answers

這次要抓取的內容是精華帖的標題、答題人和贊同數。下面是今天的教程。

1.制作 Sitemap

剛開始我們要先創建一個 container，包含要抓取的三類數據，為了實現滾動到底加載數據的功能，我們把 container 的 Type 選為 Element scroll down，就是滾動到網頁底部加載數據的意思。

在這個案例里，選擇的元素名字為 div.List-item。

為了復習上一節通過數據編號控制條數的方法，我們在元素名后加個 nth-of-type(-n+100)，暫時只抓取前 100 條數據。

然后我們保存 container 這個節點，并在這個節點下選擇要抓取的三個數據類型。

首先是標題，我們取名為 title，選擇的元素名為 [itemprop='zhihu:question'] a：

然后是答題人名字 name 與贊同數 like，選擇的元素名分別為 #Popover10-toggle a 和 button.VoteButton--up：

2.爬取數據，發現問題

元素都選擇好了，我們按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路徑進行數據抓取，等待十幾秒結果出來后，內容卻讓我們傻了眼：

數據呢？我要抓的數據呢？怎么全變成了 null？

在計算機領域里，null 一般表示空值，表示啥都沒有，放在 Web Scraper 里，就表示沒有抓取到數據。

我們可以回想一下，網頁上的的確確存在數據，我們在整個的操作過程中，唯一的變數就是選擇元素這個操作上。所以，肯定是我們選擇元素時出錯了，導致內容匹配上出了問題，無法正常抓取數據。要解決這個問題，我們就要查看一下網頁的構成。

3.分析問題

查看一下網頁的構成，就要用瀏覽器的另一個功能了，那就是選擇查看元素。

1.我們點擊控制面板左上角的箭頭，這時候箭頭顏色會變藍。

2.然后我們把鼠標移動到標題上，標題會被一個藍色的半透明遮罩蓋住。

3.我們再點擊一下標題，會發現我們會跳轉到 Elements 這個子面板，內容是一些花花綠綠看不大懂的代碼

做到這里心里別發怵，這些 HTML 代碼不涉及什么邏輯，在網頁里就是個骨架，提供一些排版的作用。如果你平常用 markdown 寫作，就可以把 HTML 理解為功能更復雜的 markdown。

結合 HTML 代碼，我們先看看 [itemprop='zhihu:question'] a 這個匹配規則是怎么回事。

首先這是個樹形的結構：

先是一個名字為 h2 的標簽 <h2>...</h2>，它有個 class='ContentItem-title' 的屬性；
里面又有個名為 div 的標簽 <div>...</div>，它有個 itemprop='zhihu:question' 的屬性；
div 標簽里又有一個名字為 a 的標簽 <a>...</a>；
a 標簽里有一行字，就是我們要抓取的標題：如何快速成為數據分析師？
上句話從可視化的角度分析，其實就是一個嵌套的結構，我把關鍵內容抽離出來，內容結構是不是清晰了很多？

<h2 class='ContentItem-title'/>
 <div itemprop='zhihu:question'/>
 <a>如何快速成為數據分析師？</a>
 </div>
</h2>

我們再分析一個抓取標題為 null 的標題 HTML 代碼。

我們可以很清楚的觀察到，在這個標題的代碼里，少了名為 div 屬性為 itemprop='zhihu:question' 的標簽！這樣導致我們的匹配規則匹配時找不到對應標簽，Web Scraper 就會放棄匹配，認為找不到對應內容，所以就變成 null 了。

找到原因后我們就好解決問題了。

4.解決問題

我們發現，選擇標題時，無論標題的嵌套關系怎么變，總有一個標簽不變，那就是包裹在最外層的，屬性名為 class='ContentItem-title' 的 h2 標簽。我們如果能直接選擇 h2 標簽，不就可以完美匹配標題內容了嗎？

邏輯上理清了關系，我們如何用 Web Scraper 操作？這時我們就可以用上一篇文章介紹的內容，利用鍵盤 P 鍵選擇元素的父節點：

放在今天的課程里，我們點擊兩次 P 鍵，就可以匹配到標題的父標簽 h2 （或 h2.ContentItem-title）：

以此類推，因為答題人名字也出現了 null，我們分析了 HTML 結構后選擇名字的父標簽 span.AuthorInfo-name，具體的分析操作和上面差不多，大家可以嘗試一下。

我的三個子內容的選擇器如下，可以作為一個參考：

最后我們點擊 Scrape 爬取數據，檢查一下結果，沒有出現 null，完美！

5.吐槽時間

爬取知乎數據時，我們會發現滾動加載數據那一塊兒很快就做完了，在元素匹配那里卻花了很多時間。

這間接的說明，知乎這個網站從代碼角度上分析，寫的還是比較爛的。

如果你爬取的網站多了，就會發現大部分的網頁結構都是比較「隨心所欲」的。所以在正式抓取數據前，經常要先做小規模的嘗試，比如說先抓取 20 條，看看數據有沒有問題。沒問題后再加大規模正式抓取，這樣做一定程度上可以減少返工時間。

6.下期預告

這期內容比較多，大家可以多看幾遍消化一下，下期我們說些簡單的內容，講講如何抓取表格內容。

7.推薦閱讀

簡易數據分析 09 | Web Scraper 自動控制抓取數量 & Web Scraper 父子選擇器

簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁

言

眾所周知，word、excel、ppt 和 pdf 文件在線預覽有很多解決方案，但大多無法播放 ppt 動畫，或者功能非常單一。這不，最近產品經理閉關修煉三天，提出了如下需求：

監聽文檔翻頁，根據頁碼執行相應的操作
文檔轉圖片，每一頁轉成一張圖片
ppt 動畫、內嵌視頻在線播放
ppt 多人同步播放
ppt 畫板功能

今天就給大家介紹一下幾種主流的文檔預覽方案，有免費，有收費的，希望對大家有所幫助。

微軟的 Office Web Viewer

調用微軟的 office 在線預覽服務，用法也比較簡單：

http://view.officeapps.live.com/op/view.aspx?src=文件地址

優點是免費，可以實現 ppt 動畫播放；缺點就是沒有擴展性，無法實現其他功能。

官方示例：

https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/?eu=true

百度文檔服務 DOC

百度文檔服務是將文件上傳至百度服務器，進行轉碼，轉碼成功之后會拿到一個 docId，根據 docId 預覽不同的文件。在控制臺中上傳文檔，然后復制以下代碼，替換docId，即可在瀏覽器中預覽。

<div id="reader"></div>
<script src="http://static.bcedocument.com/reader/v2/doc_reader_v2.js"></script>
<script type="text/javascript">
  (function () {
    var option={
      docId: "doc-xxxxxx",
      token: "TOKEN",
      host: "BCEDOC",
      width: 800, // 文檔容器寬度
      pn: 2, // 定位到第幾頁，可選
      ready: function (handler) { // 設置字體大小和顏色, 背景顏色（可設置白天黑夜模式）
        handler.setFontSize(1);
        handler.setBackgroundColor("#000");
        handler.setFontColor("#fff");
      },
      flip: function (data) { // 翻頁時回調函數, 可供客戶進行統計等
        console.log(data.pn);
      },
      fontSize: "big",
      toolbarConf: {
        page: true, // 上下翻頁箭頭圖標
        pagenum: true, // 幾分之幾頁
        full: false, // 是否顯示全屏圖標,點擊后全屏
        copy: true, // 是否可以復制文檔內容
        position: "center" // 設置 toolbar中翻頁和放大圖標的位置(值有left/center)
      } //文檔頂部工具條配置對象,必選
    };
    new Document("reader", option);
  })();
</script>

可以看到百度文檔的配置還是挺多的，文檔轉圖片、監聽翻頁都不是問題，不過缺點就是 ppt 動畫播放不了。

官方網址：

https://cloud.baidu.com/product/doc.html

永中 DCS 文檔預覽

永中的功能還是很強大的，分為私有云和公有云，私有云就是部署在自己的服務器上，公有云就是用永中的服務器。公有云有免費版，可以實現基本的預覽功能。私有云支持定制，上述功能基本都可以實現。

官網上有很多示例，大家也可以把自己的文件上傳上去，預覽體驗一下。

官方示例：

https://www.yozodcs.com/page/example.html

Office Web 365

office web 365 和永中 DCS 類似，也有部署版和在線版，不過部署版和在線版功能都非常強大，滿足你對文檔預覽的所有幻想。

office web 365 也有免費版，使用方法很簡單，先注冊賬號登錄，然后把文件下載地址所在的域名添加到后臺，后臺會根據域名生成一個網站 ID，然后再使用下面的預覽地址就可以了。

預覽地址：

http://ow365.cn/?i=您的網站ID&furl=要預覽的Office文件下載地址

如果文件下載地址是 https 開頭，那么還要加一個 ssl=1 參數：

http://ow365.cn/?ssl=1&i=您的網站ID&furl=要預覽的Office文件下載地址

官方示例：

https://officeweb365.com/Default/Viewview

總結

以上就是最主流的文檔預覽方案，如果產品經理再讓你開發這些功能，知道怎么做了吧。只要有 money，就沒有實現不了的功能下面來做個小小的總結：

功能	微軟 Office Web Viewer	百度文檔服務 DOC	永中 DCS 文檔預覽	Office Web 365
監聽文檔翻頁	?	?	?	?
文檔轉圖片	?	?	?	?
ppt動畫	?	?	?	?
ppt同步播放	?	?	?	?
ppt畫板	?	?	?	?

以上內容本人花了大量時間調研、嘗試，如果對你有所幫助，不要忘了點個贊再走呦~

有問題歡迎評論區留言~

在線咨詢

上一篇：Foundation CSS 參考手冊
下一篇：驚喜大曝光！如何制作網頁投票-

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

echarts中餅狀圖數據太多進行翻頁

charts餅狀圖數據太多

echarts 餅狀圖內容太多怎么處理

自定義分頁箭頭

如何在iconfont中獲取圖標的svg代碼

pageIcons 的值哪些？

定義legend的顯示內容樣式的設置

最終的代碼

1.制作 Sitemap

2.爬取數據，發現問題

3.分析問題

5.吐槽時間

6.下期預告

7.推薦閱讀

言

微軟的 Office Web Viewer

百度文檔服務 DOC

永中 DCS 文檔預覽

Office Web 365

總結

您的項目需求