CSS polar coordinates example code
PrefaceThe project has requirements for charts, including graphics for satellite positioning, which require the production of polar coordinates to display the current satellite distribution in the northern or southern hemisphere. The first thing that came to my mind was the polar coordinates of echarts. I found an example, which met some of the requirements, but the polar coordinates were drawn by canvs, and the satellites had their own numbers, so it was difficult to distinguish the satellite number corresponding to each point. So I thought of using CSS to draw polar coordinates Tip: The following is the main content of this article. The following cases can be used for reference 1. ExampleThe example above, the echarts example below
2. Design steps1. Latitude Several divs, set rounded corners 2. Longitude Multiple 0.5px borders, achieved by rotation
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. Satellite (dot) The background data only contains longitude and latitude. Latitude is easy to do and can be positioned according to the ratio of 90°. Longitude is used for rotation. Note that it is not rotated directly on the point, otherwise it will just rotate the box. You need to put a div outside the point for rotation. If you need to beautify it, you can rotate the point in the opposite direction to achieve a positive effect of numbering. 3. Code ImplementationThe code is written in vue components, and satellites is the data interface of polar coordinates.
<template>
<div class="polar">
<div class="polar-main">
<div class="polar-1">
<div class="polar-2">
<div class="polar-3">
<p
v-for="item in latitudes"
:key="item.id"
class="latitude"
:style="{
top: item.location.top,
transform: item.location.transform,
}"
>
{{ item.value }}
</p>
<div class="polar-center">
<div class="satellites">
<div v-for="item in satellites" :key="item.name">
<p
v-for="ele in item.distribution"
:key="ele.id"
class="satellite-box"
:style="{
transform: rotate(ele.long),
}"
>
<el-tooltip
class="item"
effect="dark"
:content="`Longitude: ${ele.long} Latitude: ${ele.lati}`"
placement="top-start"
>
<span
class="satellite"
:style="{
backgroundColor:ele.color,
top: top(ele.lati),
transform: rotate(-1 * ele.long),
}"
>{{ele.id}}</span>
>
</el-tooltip>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p
v-for="item in lines"
:key="item.id"
class="line"
:style="{
transform: item.transform,
borderStyle: item.borderStyle,
borderColor: item.borderColor,
}"
></p>
<p
v-for="item in longitudes"
:key="item.id"
class="longitude"
:style="{
top: item.location.top,
left: item.location.left,
transform: item.location.transform,
}"
>
{{ item.value }}
</p>
</div>
<div class="satellite-name"></div>
</div>
</template>
<script>
export default {
data() {
return {
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",
},
],
longitudes:
{
id: 5,
value: "90°",
location: {
top: "50%",
left: "100%",
transform: "translateY(-50%)",
},
},
{
id: 6,
value: "180°",
location: {
top: "100%",
left: "50%",
transform: "translateX(-50%)",
},
},
{
id: 7,
value: "270°",
location: {
top: "50%",
left: "0",
transform: "translateX(-100%) translateY(-50%)",
},
},
{
id: 8,
value: "360°",
location: {
top: "0",
left: "50%",
transform: "translateX(-50%) translateY(-100%)",
},
},
],
latitudes:
{
id: 1,
value: "90°",
location: {
top: "50%",
left: "0",
transform: "translateY(-50%) translateX(50%)",
},
},
{
id: 2,
value: "60°",
location: {
top: "0",
left: "0",
transform: "translateY(-50%) translateX(50%)",
},
},
{
id: 3,
value: "30°",
location: {
top: "-50%",
left: "0",
transform: "translateY(-50%) translateX(50%)",
},
},
],
satellites:
{
name: "Below Mask",
distribution: [
{
id: "10",
long: 46.397128,
lati: 56.397128,
color: "#409eff",
},
{
id: "08",
long: 76.397128,
lati: 32.916527,
color: "#409eff",
},
],
},
{
name: "Unhealthy",
distribution: [
{
id: "25",
long: 156.397128,
lati: 62.916527,
color: "#f56c6c",
},
{
id: "25",
long: 316.397128,
lati: 12.916527,
color: "#f56c6c",
},
],
},
{
name: "Missing",
distribution: [
{
id: "07",
long: 256.397128,
lati: 22.916527,
color: "#118452",
},
{
id: "18",
long: 56.397128,
lati: 27.916527,
color: "#118452",
},
{
id: "12",
long: 66.397128,
lati: 27.916527,
color: "#118452",
},
{
id: "16",
long: 196.397128,
lati: 67.916527,
color: "#118452",
},
],
},
],
};
},
methods: {
top(lati) {
return ((90 - lati) / 90) * -90 - 10 + "px";
},
rotate(long) {
let z = (long / 360) * 360;
return `rotateZ(${z}deg)`;
},
},
// filters: {},
};
</script>
<style scoped lang='scss'>
$polarPiameter: 180px;
.polar-main {
width: $polarPiameter;
height: $polarPiameter;
position: relative;
p {
margin: 0;
}
.polar-1 {
width: $polarPiameter;
height: $polarPiameter;
border-style: solid;
.polar-2 {
width: $polarPiameter * 2/3;
height: $polarPiameter * 2/3;
border-style: dashed;
.polar-3 {
width: $polarPiameter/3;
height: $polarPiameter/3;
border-style: dashed;
.polar-center {
width: 1px;
height: 1px;
background-color: #333;
}
}
}
}
.line {
height: $polarPiameter;
border-right-color: #333;
border-right-width: 1px;
border-right-style: solid;
position: absolute;
left: 50%;
cursor: pointer;
}
.longitude,
.latitude {
height: 14px;
line-height: 14px;
font-size: 12px;
color: #868585;
position: absolute;
cursor: pointer;
}
}
.polar-1,
.polar-2,
.polar-3,
.polar-center {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-color: #91cc75;
border-width: 1px;
box-sizing: border-box;
cursor: pointer;
}
.polar-1:hover {
border-width: 2px;
}
.polar-2:hover{
border-width: 2px;
}
.satellite-box {
position: absolute;
width: 1px;
height: 1px;
border-radius: 50%;
background-color: transparent;
.satellite {
position: absolute;
left: -10px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
font-size: 14px;
color: #fff;
cursor: pointer;
z-index: 999;
opacity: 0.6;
transition: 0.6s;
}
.satellite:hover {
background-color: #333 !important;
}
}
</style>
SummarizeExample image:
This is the end of this article about the example code of CSS polar coordinates. For more relevant CSS polar coordinates content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: HTML+CSS to achieve text folding special effects example
>>: HTML+CSS to create a top navigation bar menu
Recommend
Detailed explanation of the index and storage structure of the MySQL InnoDB engine
Preface In databases such as Oracle and SQL Serve...
MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10
Win10 system locally installed MySQL8.0.20, perso...
Docker container source code deployment httpd use storage volume to deploy the website (recommended)
Table of contents Deploy httpd with docker contai...
In-depth analysis of MySQL query interception
Table of contents 1. Query Optimization 1. MySQL ...
Mobile web screen adaptation (rem)
Preface I recently sorted out my previous notes o...
Detailed explanation of Vue router routing
Table of contents 1. Basic use 2. Several points ...
Installation tutorial of MySQL 5.1 and 5.7 under Linux
The operating system for the following content is...
How to move a red rectangle with the mouse in Linux character terminal
Everything is a file! UNIX has already said it. E...
Use overflow: hidden to disable page scrollbars
Copy code The code is as follows: html { overflow...
Tutorial on how to install htop on CentOS 8
If you are looking to monitor your system interac...
mysql 8.0.15 winx64 decompression version graphic installation tutorial
Every time after installing the system, I have to...
Four ways to switch tab pages in VUE
Table of contents 1. Static implementation method...
A brief talk on responsive design
1. What is responsive design? Responsive design i...
How to use Docker-compose to build an ELK cluster
All the orchestration files and configuration fil...
Detailed explanation of the front-end method of passing parameters between HTML pages
A situation that often occurs in a project is tha...