Echarts 實現顯示六邊形

我不是專業的前端開發，項目中需要用到，但是有點不符合需求，不過既然做了個效果，那就發出來，給有用的人用吧。

效果如下圖所示：

代碼如下：

function GetPolygon(side) {
　　//參數說明：side是六邊形邊長
　　let polygonP = [];//六邊形六個頂點的列表，代表六邊形
　　//let side = Math.sqrt(area / (3 * sqrt_3 / 2));//六邊形邊長
　　let midwid=Math.sqrt(3)/2*side //六邊形高度的一半
　　let midx=side/2 //橫向坐標 第一個點與原點的距離
　　//left top
　　let x = 0;//頂點x坐標 調整顯示位置
　　let y = 0;//頂點y坐標  調整顯示位置
　　//
　　polygonP.push([x+midx,y+midwid*2]);
　　polygonP.push([x+0,y+midwid]);
　　polygonP.push([x+midx,y+0]);
　　polygonP.push([x+midx+side,y+0]);
　　polygonP.push([x+midx*2+side,y+midwid]);
　　polygonP.push([x+midx+side,y+midwid*2]);
　　polygonP.push([x+midx,y+midwid*2]);

  return polygonP;
};
option = {
  tooltip: {
    trigger: 'axis'
  },
 legend: {
    data: ['bar', 'error']
  },
  dataZoom: [
    {
      type: 'slider',
      filterMode: 'none'
    },
    {
      type: 'inside',
      filterMode: 'none'
    }
  ],
  xAxis: {},
  yAxis: {},
  series: [
    
    {
      type: 'custom',
      renderItem: function (params, api) {
        if (params.context.rendered) {
          return;
        }
        params.context.rendered = true;
         let points = [];
         let mydata=GetPolygon(100)
        for (let i = 0; i < mydata.length; i++) {
          points.push(api.coord(mydata[i]));
        }
        let color = api.visual('color');
        return {
          type: 'polygon',
          transition: ['shape'],
          shape: {
            points:points
          },
          style: api.style({
            fill: color,
            stroke: echarts.color.lift(color, 0.1)
          })
        };
      },
      clip: true,
      data: GetPolygon(100)
    },
    
  ]
};