Echarts在线免费图表

 
            let bg = [
   [70, 30],
   [70, 180],
   [220, 150],
   [310, 30],
]
let points = [
   [200, 120],
   [169, 100],
   [130, 150],
]

/*绘制不规则多边行方法 */
function renderItem(params, api) {
   if (params.context.rendered) {
      return;
   }
   params.context.rendered = true;

   let points = [];
   //转换成屏幕像素坐标
   for (var i = 0; i < bg.length; i++) {
      points.push(api.coord(bg[i]));
   }

   return {
      type: "polygon",
      shape: {
         points: echarts.graphic.clipPointsByRect(points, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height,
         }),
      },

      style: {
         fill: "rgba(73, 157, 242, 0.2)",
         stroke: "#499DF2",
      },
   };
}

/* 处理多边形中的线 */
function dealArrowLine(data) {
   if (data.length > 2) {
      let arrow = [];
      for (let i = 1; i < data.length; i++) {
         let a = [{ coord: data[i - 1] }, { coord: data[i] }];
         arrow.push(a);
      }
      return arrow;
   } else {
      return [];
   }
}

let option = {
   xAxis: {},
   yAxis: {},
   series: [
      {
         type: "custom",
         renderItem: renderItem,
         data: bg,
      },
      {
         type: "line",
         clip: false,
         lineStyle: {
            type: "solid",
            opacity: 1,
         },
         symbol: "circle",
         data: points,
         markLine: {
            data: dealArrowLine(points),
         },
      },
   ],
};