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 tutorial on MySql installation and uninstallation
This article shares the tutorial of MySql install...
A brief analysis of the use of zero copy technology in Linux
This article discusses several major zero-copy te...
Summary of methods to prevent users from submitting forms repeatedly
Duplicate form submission is the most common and ...
When setting up Jenkins in Docker environment, the console log shows garbled Chinese characters when building tasks
Table of contents 1. Problem description: 2. Trou...
KTL tool realizes the method of synchronizing data from MySQL to MySQL
Use ktl tool to synchronize data from mysql to my...
jQuery implements time selector
This article example shares the specific code of ...
Linux operation and maintenance basics httpd static web page tutorial
Table of contents 1. Use the warehouse to create ...
Some notes on modifying the innodb_data_file_path parameter of MySQL
Preface innodb_data_file_path is used to specify ...
Summary of MySQL log related knowledge
Table of contents SQL execution order bin log Wha...
Vue + OpenLayers Quick Start Tutorial
Openlayers is a modular, high-performance and fea...
Detailed explanation of Vue Notepad example
This article example shares the specific code of ...
MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution
1. Installation of the decompressed version (1). ...
Detailed explanation of JavaScript upload file limit parameter case
Project scenario: 1. Upload file restrictions Fun...
JS achieves five-star praise effect
Use JS to implement object-oriented methods to ac...
CSS Sticky Footer Implementation Code
This article introduces the CSS Sticky Footer imp...