vue编写坐标系以及echarts编写坐标系、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() {
      // let xx = Math.atan2((y1 - y2), (x1 - x2))
      // return xx * 180 / Math.PI
      let x = x2 - x1
      let y = y2 - y1
      let z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
      let cos = y / z
      let 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); //设置option
                myChart.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;