项目有图表方面的需求，其中有做卫星定位的图形，需要制作极坐标来显示当前北半球或南半球的卫星分布情况，本文主要介绍了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) scaleX(0.4)", borderStyle: "solid", borderColor: "#333", }, { id: 4, transform: "translateX(-50%) rotateZ(135deg) scaleX(0.4)", borderStyle: "dashed", borderColor: "#91cc75", }, ], 3.卫星（点）
后台的数据只有经度和纬度。纬度很好做，按照90°的比例进行定位。经度用到旋转，注意不是直接在点上旋转，否则只是盒子旋转，需要在点外边套一个div进行旋转，如果需要美化，可以使点反方向旋转该角度达到编号是一个正的效果。
三、代码实现
代码是以vue的组件来写的，satellites就是极坐标的数据接口。
{{ item.value }}
{{ ele.id }} {{ item.value }}