CSS完成极坐标

---

前言

项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况。第一时间想到了echarts的极坐标，找到示例，虽然满足了部分需求，但是极坐标是由canvs画的，卫星有自己的编号，所以难以辨析每个点对应的卫星编号。于是就想到了自己去用CSS画极坐标

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、示例

上面示例，下面echarts示例

二、设计步骤

1.纬度

几个div，设置圆角

2.经度

多条0.5px的边框，通过旋转实现

lines: [
        {
   
          id: 1,
          transform: "translateX(-50%) rotateZ(0deg) scaleX(0.4)",
          borderStyle: "solid",
          borderColor: "#333",
        },
        {
   
          id: 2,
          transform: "translateX(-50%) rotateZ(45deg) scaleX(0.4)",
          borderStyle: "dashed",
          borderColor: "#91cc75",
        },
        {
   
          id: 3,
          transform: "translateX(-50%) rotateZ(90deg) scal