前言

记录一下，耗时两天

一、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() {// let xx = Math.atan2((y1 - y2), (x1 - x2))// return xx * 180 / Math.PIlet x = x2 - x1let y = y2 - y1let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))let cos = y / zlet radina = Math.acos(cos)let angle = 180 / (Math.PI / radina)     // 这个角度是360度的// let x2 = this.info.D0145// let x1 = this.info.D0147// let y2 = this.info.D0146// let y1 = this.info.D0148// if (x2 > x1 && y2 === y1) {//   // 在x轴正方向上//   angle = 0;// }// if (x2 > x1 && y2 < y1) {//   console.log(angle)//   // 在第一象限;//   angle = angle - 90;// }// if (x2 === x1 && y1 > y2) {//   // 在y轴正方向上//   angle = -90;// }// if (x2 < x1 && y2 < y1) {//   // 在第二象限//   angle = 270 - angle;// }// if (x2 < x1 && y2 === y1) {//   // 在x轴负方向//   angle = 180;// }// if (x2 < x1 && y2 > y1) {//   // 在第三象限//   angle = 270 - angle;// }// if (x2 === x1 && y2 > y1) {//   // 在y轴负方向上//   angle = 90;// }// if (x2 > x1 && y2 > y1) {//   // 在四象限//   angle = angle - 90;// }return angle;},arrowWidth() {// 这是两点之间的长度let xx = Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)return Math.sqrt(xx)}

2.读入数据

代码如下（示例）：

option = {xAxis: {type: 'value',min:-150,max:150},yAxis: {type: 'value',min:-150,max:150},series: [{data: [],type: 'line'}]
};let sData = [[0,5.3],[75,-60]]
for(var k=0;k<sData.length;k++){//主要实现改变特定点样式代码let obj ={};if(k==1){obj = {value:sData[k],symbolSize:10,//拐点大小symbol: 'circle',//拐点样式                            itemStyle : { normal: {color: "#35B65A", //拐点颜色borderColor:'#eee',borderWidth:2},}},option.series[0].data.push(obj)}else if(k==0){obj = {value:sData[k],symbolSize:10,//拐点大小symbol: 'circle',itemStyle : { normal: {color: "#FF494A ", //拐点颜色borderColor:'#eee',borderWidth:2},}},option.series[0].data.push(obj)}}setTimeout(() => {myChart.setOption(option); //设置optionmyChart.resize(); //防止越界，重绘canvas}, 300);

三、highcharts编写坐标系（包含圆形间隔）

<div style="width:100%;height:100%" ref="coordinate" id="coordinate"></div>
let option = {title: {text: '',},credits: {enabled: false},legend: {enabled: false},// 这里offset是移动坐标轴的xAxis: {gridLineWidth: 1,min: -150,max: 150,tickInterval: 10,lineColor: 'black',offset: -270},yAxis: {min: -150,max: 150,tickInterval: 10,lineWidth: 1,lineColor: 'black',offset: -455,title: {text: null}},tooltip: {headerFormat: 'x: {point.x} <br>',pointFormat: 'y: {point.y} ',shared: true},// 这是正方形的间隔（红黄蓝）series:[{data:[// 这里是设置线的两端不同颜色{ x: x1, y: y1,marker:{fillColor:'red'}},{ x: x2, y: y2, marker: { fillColor: '#2A8CEA' } }],color:'#000',type: 'line',},{data: [[-50, -50], [-50, 50], [50, 50], [50, -50], [-50, -50]],color: '#2A8CEA',type: 'line',},{data: [[-70, -70], [-70, 70], [70, 70], [70, -70], [-70, -70]],color: 'goldenrod',type: 'line',},{data: [[-100, -100], [-100, 100], [100, 100], [100, -100], [-100, -100]],color: 'red',type: 'line',},]// 这是圆圈的间隔（红黄蓝）
series:[{data:[{ x: x1, y: y1,marker:{fillColor:'red'}},{ x: x2, y: y2, marker: { fillColor: '#2A8CEA' } }],color:'#000',name:'x',type: 'line',},{type:'pie',data: [// 这里的x不会在上面的point.x中显示。这里对于画圆没有太大的用处，只有颜色有用{x:50,y:50,name:'y',color:'#2A8CEA'}],center: ['50%', '50%'],innerSize: '97%',   // 圆的宽度size: '33%',        // 圆在哪个位置，固定之后，如果最大最小值改变或者画布改变都需要改变dataLabels:{enabled:false}},{type: 'pie',data: [{x: 70,y: 70,name: 'y',color: 'goldenrod'}],center: ['50%', '50%'],innerSize: '97.5%',size: '47.5%',dataLabels: {enabled: false}},{type: 'pie',data: [{x: 100,y: 100,name: 'y',color: 'red'}],center: ['50%', '50%'],innerSize: '98.5%',size: '69%',dataLabels: {enabled: false}}]}let xx = self.$refs['coordinate'] ? HighCharts.chart('coordinate', option) : null;

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

Echarts数据可视化radar雷达坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化parallel平行坐标系，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
在Vue项目中使用echarts完成迁徙图（Map组件）
在Vue项目中使用echarts完成迁徙图此章个人理解:参考原有的代码基础上,完成了一个地图迁徙的组件先了解一下整体代码, 有能力的可以参照整体完成, 下面也会列出详细步骤解答代码我放在了gith ...
不同坐标系下角速度_坐标系统及常见坐标系
测绘学习点击上方蓝字关注小白 01 坐标系统 1 坐标系统分类 2 2.椭球相关定义 (1)地球椭球--代表地球形状和大小的数学曲面,一般只旋转椭球.参考椭球--有确定椭球参数,经局部定位和定向,并同 ...
Java黑皮书课后题第6章：6.12（显示字符）使用下面的方法头，编写一个打印字符的方法。编写一个测试程序、打印从‘1‘到‘Z‘的字符，每行打印10个，字符之间使用一个空格字符隔开
6.12(显示字符)使用下面的方法头,编写一个打印字符的方法.编写一个测试程序.打印从'1'到'Z'的字符,每行打印10个,字符之间使用一个空格字符隔开题目题目描述破题补充:从生成随机字符窥探 ...
多态部分作业 1.按要求编写Java程序：（1）编写一个接口：InterfaceA，只含有一个方法int method(int n)；
1.按要求编写Java程序: (1)编写一个接口:InterfaceA,只含有一个方法int method(int n): (2)编写一个类:ClassA来实现接口InterfaceA,实现int m ...
[基础题] 6．（*）按如下要求编写Java程序：（1）编写一个接口：OneToN，只含有一个方法int dispose(int n)
package HomeWork_10;public class Test_06 { /*6．(*)按如下要求编写Java程序: (1)编写一个接口:OneToN,只含有一个方法int dispose ...
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
一步步编写操作系统 71 直接操作显卡，编写自己的打印函数71-74
一直以来,我们在往屏幕上输出文本时,要么利用bios中断,要么利用系统调用,这些都是依赖别人的方法.咱们还用过一个稍微有点独立的方法,就是直接写显存,但这貌似又没什么含量.如今我们要写一个打印函数了, ...

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

文章目录

前言

一、vue编写坐标系

2.读入数据

三、highcharts编写坐标系（包含圆形间隔）

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

最新文章

热门文章