搞了一天多，才勉強搞出了一個不緊湊的六邊形統計圖，是真的菜。

這裡ECharts的用法與06說的同一種，直接使用帶all的js

先上個效果圖，用面積來表示人數的多少

1. 引數option的tooltip和title還是一樣設定

2. 還有一個grid，這是用來設定y軸的實際長度的。（我把y軸隱藏了，所以設不設定沒看出來什麼）

3. xAxis和yAxis必須要有，即便是空也要有

4. 自定義多邊形的關鍵在於series！

根據官方文件：在渲染階段，對於series.data中的每個資料項（為方便描述，這裡稱為 dataItem)，會呼叫此randerItem函式。這個renderItem

所以，關鍵就在於randerItem這個函式上，既然是函式那麼我就寫一個

主要就是return的這個返回值上，我這裡只寫我用到的。其他具體見官方文件http://echarts.baidu.com/option.html#series-custom.renderItem.return

renderItem函式提供了兩個引數：

• params：包含了當前資料資訊（如 seriesIndex、dataIndex 等等）和座標系的資訊（如座標系包圍盒的位置和尺寸）。
• api：是一些開發者可呼叫的方法集合（如 api.value()、api.coord()）。

type設定為'polygon'表示多邊形

style可以通過api.style()設定itemStyle 的配置和視覺對映得到的顏色

shape就是用來設定多邊形形狀的，引數points傳入的是多邊形各個頂點的座標列表。如[[344, 144], [388, 144], [421, 110], [388, 76], [344, 76], [311, 110]]

　　這個形狀自然是代表每個不同的資料，所以需要通過計算獲得。

　　這裡我自己寫了個演算法，一個簡單的演算法花了我好長時間。。。最後再附上程式碼

注意：

1）圖表中座標系的原點是在左上角，x軸往右遞增為正，y軸往下遞增為正！！！不要被眼前的現象所欺騙！

2）我是根據官方demo修改的，這個demo還需要引用min.js並且使用到echarts.util.each。但是我沒查到這個each是幹什麼用的，只是去掉後卻不顯示了，所以只好做些修改。有大神知道的麻煩教我一下，謝謝了

其實，有點遺憾，我的能力實在有限，寫出來的演算法不是緊湊的，只能分行顯示，暫時無法也沒時間做到插空顯示。

如果能實現到和下圖這個一樣就更好了。這樣就顯得緊湊多了。

 生成六邊形各頂點的程式碼如下。一行顯示4個。

var row_count = 4;//每行多少個

var sqrt_3 = Math.sqrt(3);//根號三

var last_x = 0;//上一個佔長
var last_y = 0;//逐個篩選上一行佔寬
var last_row_y = 0;//上一行佔寬

var top_or_right = 0;//通過除以行顯示個數代表向上增或者向右增

function GetPolygon(area) {
　　//引數說明：area六邊形面積，上一個六邊形的標誌點（向上增時是左上頂點的y座標，向右增時是最右頂點的x座標）
　　let polygonP = [];//六邊形六個頂點的列表，代表六邊形
　　let side = Math.sqrt(area / (3 * sqrt_3 / 2));//六邊形邊長
　　let x = 75;//頂點x座標 70左右才接近相當於x座標原點 增大向右
　　let y = 75;//頂點y座標 240左右才接近相當於y座標原點 減小向上
　　if (last_row_y == 0) {
　　　　last_row_y = y;
　　}
　　var distance = 10;//兩個六邊形間的距離
　　let temp = top_or_right % row_count;
　　top_or_right += 1;
　　switch (temp) {
　　　　case 0://每行的第一個
　　　　　　x = x + side / 2;//六邊形左上頂點x座標
　　　　　　y = last_row_y + distance;//六邊形左上頂點y座標
　　　　　　last_x = x + side * 3 / 2;//因為下一個是向右增，故為最右頂點的x座標
　　　　　　last_y = y + side * sqrt_3;
　　　　　　break;
　　　　case 1://每行的第二個
　　　　case 2://每行的第三個
　　　　　　x = last_x + distance + side / 2;//六邊形左上頂點x座標
　　　　　　y = last_row_y + distance;//六邊形左上頂點y座標
　　　　　　last_x = x + side * 3 / 2;//因為下一個是向右增，故為最右頂點的x座標
　　　　　　last_y = y + side * sqrt_3 > last_y ? y + side * sqrt_3 : last_y;
　　　　　　break;
　　　　case 3://每行的最後個
　　　　　　x = last_x + distance + side / 2;//六邊形左上頂點x座標
　　　　　　y = last_row_y + distance;//六邊形左上頂點y座標
　　　　　　last_row_y = y + side * sqrt_3 > last_y ? y + side * sqrt_3 : last_y;//因為下一個是向上增，故為左上頂點的y座標
　　　　　　break;
　　　　}
　　polygonP.push([x, y]);//新增左上頂點座標
　　for (var i = 0; i < 5; i++) {
　　　　//剩下五個頂點
　　　　switch (i) {
　　　　　　case 0:
　　　　　　　　x += side;
　　　　　　　　break;
　　　　　　case 1:
　　　　　　　　x += side / 2;
　　　　　　　　y += side * sqrt_3 / 2;
　　　　　　　　break;
　　　　　　case 2:
　　　　　　　　x -= side / 2;
　　　　　　　　y += side * sqrt_3 / 2;
　　　　　　　　break;
　　　　　　case 3:
　　　　　　　　x -= side;
　　　　　　　　break;
　　　　　　case 4:
　　　　　　　　x -= side / 2;
　　　　　　　　y -= side * sqrt_3 / 2;
　　　　　　　　break;
　　　　}

　　polygonP.push([x, y]);
　　}

　　return polygonP;
}