02-echarts如何画轴心轨迹图

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量811 收藏 8
点赞数 15
分类专栏： Echarts画图 文章标签： echarts javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiuliangliang/article/details/135815662
版权

echarts如何画轴心轨迹图

一、创建图表盒子

1、创建盒子

<div
    id="PolarId"
    class="echart-container"
    style="width: 400px; height: 400px; margin: 0 auto; border: 1px solid red"
  ></div>

2、定义数据

1、定义x，y点数据

因为我数据比较多，所以我建立了一个x.js和y.js用来存放x点和y点的数据，因为我的数据有20多万条，所以我就写前几个，告诉一下你们格式是如何写的

// x.js文件
let x = [0.000000000000000000e+00,
-7.514304310856519740e-11,
-3.005721724342607896e-10·····]
export default x 

// y.js文件
let y = [  0.000000000000000000e+00,
  4.702124137616826465e-12,
  1.880849655046730586e-11,
  4.231911723855144707e-11,·····]
export default x

2、集合x,y点数据

将x和y数据集合在一个数组里面，类似这样的格式，[[x,y],[x,y]····]，因为x,y单个js数据太大了，所以我单个新建了一个dataXY.js文件来集合二者，集合完成以后将这个集合完成的数据抛出

import x from './x'
import y from './y.js'
let datalist = []
for (let i = 0; i < x.length; i++) {
  datalist.push([x[i], y[i]])
}

export default datalist

3、组件使用

1、引入
import datalist from './dataXY';
2、编写获取半径方法

传入x,y轴坐标，然后调用Math.sqrt方法，这个方法就是利用勾股定理
在这里插入图片描述

 getDistanceToOrigin(x, y) {
      return Math.sqrt(x ** 2 + y ** 2);
    },
2、编写获取角度方法
 // 获取角度
    getAngal(x, y) {
      var angle = Math.atan2(y, x);
      var degrees = angle * (180 / Math.PI); // 将弧度转换为角度
      return degrees;
    },
3、转换角度，半径数组

将获取到了x,y数组转换为[[半径，角度]，[半径，角度]···]这样的数据格式

// 在data中定义arr
arr: [],
// 在mounted钩子函数中转换数据格式
datalist.forEach((item) => {
      let r = this.getDistanceToOrigin(item[0], item[1]);
      let a = this.getAngal(item[0], item[1]);
      this.arr.push([r, a]);
    });
3、初始化图表方法
 drawscatter(List) {
      // 初始化echarts
      echarts.dispose(document.getElementById('PolarId'));
      let PolarEcharts = echarts.init(document.getElementById('PolarId'));
      PolarEcharts.setOption({
        title: {
          // text: '轴心轨迹图',
          // left: '50%',
          // textAlign: 'center',
        },
        legend: {},
        gird: {
          width: '100%',
          height: '100%',
        },
        polar: {
          //极坐标
          radius: ['0%', '85%'], //=半径大小
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          // formatter: function (params) {
          //   console.log(3333, params[0].data);
          //   let value = params[0].data;
          //   let angle = value[1] - 360;
          //   // if (angle < 0) {
          //   //   angle = 360 + angle; // 将负值角度转换为对应的正值
          //   // } else {
          //   //   angle = value[1];
          //   // }
          //   return `角度 : ${angle}<br/>幅度 : ${value[0]}`;
          // },
          axisPointer: {
            type: 'cross',
          },
        },
        angleAxis: {
          type: 'value',
          minInterval: 45,
          splitNumber: 10,
          clockwise: false,
          min: 0,
          max: 360,
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            formatter: '{value}°',
          },
          axisLine: {
            show: true,
            lineStyle: {
              opacity: 1,
            },
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     opacity: 0.1,
          //   },
          // },
        },
        radiusAxis: {
          type: 'value',
          startAngle: 90,
          axisLine: {
            show: true,
          },
          splitLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            margin: 8,
            align: 'right',
            padding: [5, 0, 5, 0],
            verticalAlign: 'middle',
          },
        },
        series: [
          {
            coordinateSystem: 'polar',
            // name: 'Vibration',
            showSymbol: false,

            type: 'line',
            data: List,
          },
        ],
      });
      this.$nextTick(() => {
        PolarEcharts.resize();
      });
    },
4、调用方法

在mounted钩子函数中调用初始化图例的方法，然后传入角度，半径数组

   this.drawscatter(this.arr);

二、全部代码

因为x.js和y.js里面数据量太大，我就不展示了，我就直接贴其他两个文件

1、dataXY.js

import x from './x'
import y from './y.js'
let datalist = []
for (let i = 0; i < x.length; i++) {
  datalist.push([x[i], y[i]])
}

export default datalist

2、组件中代码

<template>
  <div
    id="PolarId"
    class="echart-container"
    style="width: 400px; height: 400px; margin: 0 auto; border: 1px solid red"
  ></div>
</template>
<script>
import datalist from './dataXY';
import * as echarts from 'echarts';
export default {
  data() {
    return {
      data3: [
        [20, 25],
        [19, 28.9],
        [18, 31],
        [16.75, 33.8],
        [15.73, 31],
        [15.999, 25],
        [17.46, 25],
        [18.56, 26.5],

        [19.36, 33.8],
        [18.8, 38],
        [17.54, 44],
        [16.24, 48],
        [14.46, 52],
        [12.12, 56],
        [9.93, 60],
        [8.53, 56],
        [8.13, 44],
        [9.22, 33],
        [11.02, 38],
        [11.92, 44],
        [12.86, 48],
        [12.96, 52],
        [13.3, 60],
        [13.3, -60],

        // [16.63, 40],
      ],

      arr: [],
    };
  },
  created() {},
  mounted() {
    datalist.forEach((item) => {
      let r = this.getDistanceToOrigin(item[0], item[1]);
      let a = this.getAngal(item[0], item[1]);
      this.arr.push([r, a]);
    });
    console.log('item', this.arr, this.data3);
    this.drawscatter(this.arr);
  },
  methods: {
    // 获取半径的
    getDistanceToOrigin(x, y) {
      return Math.sqrt(x ** 2 + y ** 2);
    },
    // 获取角度
    getAngal(x, y) {
      var angle = Math.atan2(y, x);
      var degrees = angle * (180 / Math.PI); // 将弧度转换为角度
      return degrees;
    },
    drawscatter(List) {
      // 初始化echarts
      echarts.dispose(document.getElementById('PolarId'));
      let PolarEcharts = echarts.init(document.getElementById('PolarId'));
      PolarEcharts.setOption({
        title: {
          // text: '轴心轨迹图',
          // left: '50%',
          // textAlign: 'center',
        },
        legend: {},
        gird: {
          width: '100%',
          height: '100%',
        },
        polar: {
          //极坐标
          radius: ['0%', '85%'], //=半径大小
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          // formatter: function (params) {
          //   console.log(3333, params[0].data);
          //   let value = params[0].data;
          //   let angle = value[1] - 360;
          //   // if (angle < 0) {
          //   //   angle = 360 + angle; // 将负值角度转换为对应的正值
          //   // } else {
          //   //   angle = value[1];
          //   // }
          //   return `角度 : ${angle}<br/>幅度 : ${value[0]}`;
          // },
          axisPointer: {
            type: 'cross',
          },
        },
        angleAxis: {
          type: 'value',
          minInterval: 45,
          splitNumber: 10,
          clockwise: false,
          min: 0,
          max: 360,
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            formatter: '{value}°',
          },
          axisLine: {
            show: true,
            lineStyle: {
              opacity: 1,
            },
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     opacity: 0.1,
          //   },
          // },
        },
        radiusAxis: {
          type: 'value',
          startAngle: 90,
          axisLine: {
            show: true,
          },
          splitLine: {
            show: true,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            show: true,
            margin: 8,
            align: 'right',
            padding: [5, 0, 5, 0],
            verticalAlign: 'middle',
          },
        },
        series: [
          {
            coordinateSystem: 'polar',
            // name: 'Vibration',
            showSymbol: false,

            type: 'line',
            data: List,
          },
        ],
      });
      this.$nextTick(() => {
        PolarEcharts.resize();
      });
    },
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.echart-container {
  width: 1500px;
  height: 1500px;
  border: 1px solid red;
  margin: 0 auto;
}
</style>

三、效果图

在这里插入图片描述

李析鸢
关注
  • 15
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
book-CD.rar_fault _matlab轴心轨迹_故障诊断_轴心轨迹代码_轴心轨迹图
09-21
全息故障诊断中的时频谱图，轴心轨迹等matlab程序代码，故诊断必学
eCharts折线图画模拟类似心电图动态往左压的过程
zuoxiaoku的博客
12-22 8964
echarts
使用echarts实现简单的疾病知识图谱
zyw0929的博客
09-10 6287
var size = 60; var size1 = 30; var yy = 200; var yy1 = 250; var listdata = []; var links = []; var med = "药品"; var ope = "操作"; var che = "检查"; //著需要设定一下四个参数 //设定疾病名称 var diease = "diease"; //设定传入的...
时域、频域、轴心轨迹、瀑布图等功能
07-03
说明：??轴系测试程序，多通道输入输出，实现时域、频域、轴心轨迹、瀑布图等功能。 (Shafting test program, multi-channel input and output, to achieve time domain, frequency domain, orbit, waterfall and other functions.)
心跳图-echarts-2.0版.zip
04-20
echarts模拟cpu等资源监控,也可用作心跳/心电图，升级版2.0
Echarts实现心电图走势
02-22
Echarts实现心电图走势，实时刷新数据，非常实用！
构建轴心轨迹
梁警威的博客
07-26 2105
轴心轨迹 假设一主轴产生了偏心旋转运动，对两个垂直安装的传感器采集到的信息进行处理，可得到主轴的轴心轨迹。 本次用CAD技术，使轴心轨迹产生椭圆偏心运动，同时记录轴外缘到传感器的距离变化，对六个坐标值进行椭圆拟合，得到的轨迹和实际轨迹几乎相同。 ...
echarts画轨迹图
热门推荐
runningman_7012的博客
01-13 1万+
这几天在忙的项目中需要绘制节点轨迹图，变顺手用了百度的echarts。不得不吐槽一下，echarts的官方文档写的太简洁了，好多问题都没有处理方案，对于我这种小白来说，分分钟崩溃。。。
vue中使用echarts完成行程轨迹图
wzj12345545646的博客
12-04 5859
vue 中使用echarts 实现行程轨迹
Frequency-division-amplitude.zip_轴心轨迹_轴心轨迹Labview
09-20
labview旋转机械轴心轨迹的子程序。
matlab全面模拟汽轮机组的轴心轨迹图_方便研究使用_matlab
04-07
【达摩老生出品，必属精品，亲测校正，质量保证】 资源名：matlab全面模拟汽轮机组的轴心轨迹图_方便研究使用_matlab 资源类型：matlab项目全套源码 源码说明： 全部项目源码都是经过测试校正后百分百成功运行的，如果您下载后不能运行可联系我进行指导或者更换。 适合人群：新手及有一定经验的开发人员
心电图-echarts.zip
04-20
百分百还原医院心电图（包含真实音效）echarts实现，3.0版本
【公司代码】matlab全面模拟汽轮机组的轴心轨迹图，方便研究使用.rar
08-16
【公司代码】matlab全面模拟汽轮机组的轴心轨迹图，方便研究使用.rar
心跳图-echarts.zip
04-20
echarts 实现的心跳图表
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 919
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 990
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
echarts 轴心轨迹图
08-01
ECharts是一个基于JavaScript的开源可视化图表库，它提供了丰富的图表类型和交互功能。其中，轴心轨迹图是一种特殊的图表类型。 轴心轨迹图主要用于展示物体在二维平面上的运动轨迹。它由两条轴组成，通常是X轴和Y轴。X轴表示水平方向，Y轴表示垂直方向。通过在轴上描绘出的线条，可以清晰地展示物体运动的路径和轨迹。 轴心轨迹图通常用于以下方面： 1. 物体运动轨迹：例如，用于展示运动员在田径场上奔跑的轨迹，或者球员在足球场上的奔跑路径。 2. 数据趋势展示：通过在轴心轨迹图上绘制曲线，可以清晰地展示数据的变化趋势，例如股票的价格走势分析等。 3. 行为分析：将轴心轨迹图与交互功能结合使用，可以对物体的运动路径进行分析，例如研究车辆行驶轨迹、人员移动路径等。 轴心轨迹图在ECharts中实现相对简单，你只需在option配置项中指定具体的图表类型为"axis-flip"，然后根据数据的需求设置相应的X轴和Y轴的数据。 总的来说，轴心轨迹图是一种直观且易于理解的图表类型，用于展示物体在二维平面上的运动轨迹。在ECharts中，你可以轻松地创建和定制轴心轨迹图，帮助你展示和分析相关数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值