vue编写坐标系以及echarts编写坐标系、highcharts编写坐标系（包含圆形间隔）

最新推荐文章于 2024-01-27 23:39:37 发布

原创

最新推荐文章于 2024-01-27 23:39:37 发布 · 2.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #javascript

本文介绍如何使用Vue和Highcharts实现自定义坐标系的绘制，并详细展示了坐标轴样式设置、数据读取及圆形间隔的实现过程。

文章目录

前言
一、vue编写坐标系
- 2.读入数据
三、highcharts编写坐标系（包含圆形间隔）

前言

记录一下，耗时两天

一、vue编写坐标系

在这里插入图片描述

代码如下：

// 坐标轴的样式
.heng {
   
   
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  transform: translate(-50%, 0);
  background-color: #000;
}

.shu {
   
   
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #000;
}
.arrow {
   
   
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 1px;
  background-color: #000;
  /* transform: rotate(30deg) */
  transform-origin: 0 0;
}

.arrow-red {
   
   
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: red
}

.arrow-blue {
   
   
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(0, -50%);
  background-color: #2A8CEA
}

// 坐标轴
// x1+250是因为轴线是（250，250）。这里有个需要注意，rotate的转动是以线的一端进行转动，所以需要绝对定位去确定位置
<div class="heng"></div>
        <div class="shu"></div>
<div class="arrow" :style="{'transform': 'rotate('+angle+'deg)','width':arrowWidth+'px','left':x1+250+'px','top':-y1+250+'px'}">
          <div class="arrow-red" ></div>
          <div class="arrow-blue"></div>
        </div>



angle()