网页制作 CSS极坐标的实例代码

最新推荐文章于 2023-03-21 15:59:35 发布

knight11112

最新推荐文章于 2023-03-21 15:59:35 发布

阅读量474

点赞数

文章标签： css 前端 echarts

原文链接：www.jcdi.cn

版权

网页制作 CSS极坐标的实例代码前言

根据IAB E“2021年欧洲广告报告”，2021年下半年欧洲数字广告强劲复苏，全年增长6%，达到694亿欧元。刷赞平台的相关资讯可以到我们网站了解一下，从专业角度出发为您解答相关问题，给您优质的服务！教程弟

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

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

一、示例

上面示例，下面echarts示例

polar

二、设计步骤

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进行旋转，如果需要美化，可以使点反方向旋转该角度达到编号是一个正的效果。