vue中实现echarts三维散点图

这篇具有很好参考价值的文章主要介绍了vue中实现echarts三维散点图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue中实现echarts三维散点图,echarts,vue.js,echarts,前端

 vue中实现echarts三维散点图,echarts,vue.js,echarts,前端

 需要安装 echarts 同时引入 echarts-gl

我安装的版本:文章来源地址https://www.toymoban.com/news/detail-678505.html

"echarts": "^5.3.2",
"echarts-gl": "^2.0.9",

import Vue from "vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
 
import "echarts-gl";
          <div class="threeDCharts"></div>
    initThreeDCharts() {
      let option = {
        tooltip: {
          // trigger: 'item',
          // formatter: function(params) {
          //   let data = params.data;
          //   let formatted = `x: ${data[0]}<br>y: ${data[1]}<br>z: ${data[2]}`;
          //   if (data.length > 3) {
          //     formatted += `<br>其他信息: ${data[3]}`;
          //   }
          //   return formatted;
          // }
        },
        xAxis3D: {
          name: "x", //x轴显示为x
          type: "value",
          // min: 'dataMin',//获取数据中的最值
          // max: 'dataMax'
          // min: 0,
          // max: 80,
          // interval: 20, //坐标轴刻度标签的显示间隔,在类目轴中有效
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
          axisLine: {
            //x轴坐标轴,false为隐藏,true为显示
            show: true,
          },
          axisLabel: {
            show: false, 是否显示刻度 (刻度上的数字,或者类目), false为隐藏,true为显示
          },
          itemStyle: {
            borderColor: "#fff",
            backgroundColor: "#fff",
          },
        },
        yAxis3D: {
          name: "y", //y轴显示为y
          type: "value",
          splitNumber: 5,
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
          // min: 0,
          // max: 360,
          // interval: 90,
        },
        zAxis3D: {
          name: "zaa", //z轴显示为z
          type: "value",
          // min: -20,
          // max: 60,
          // interval: 20,
          axisTick: {
            show: false, //显示每个值对应的刻度
          },
        },
        grid3D: {
          axisLine: {
            lineStyle: {
              //坐标轴样式
              color: "#070707", //轴线颜色
              opacity: 0.8, //(单个刻度不会受影响)
              width: 1, //线条宽度
            },
          },
          axisPointer: {
            lineStyle: {
              color: "#666", //坐标轴指示线
            },
            show: true, //展示坐标轴指示线
          },
          viewControl: {
            // autoRotate: true,//旋转展示
            // projection: 'orthographic'
            // beta:0,
            distance: 300, //与视角的距离,值越大,图离视角越远,图越小
            alpha: 7, //绕x轴旋转的角度(上下旋转),增大,视角顺时针增大(向上)
            beta: 20, //绕y轴旋转的角度(左右旋转),增大,视角逆时针增大(向右)
            center: [-15, -5, -20], //第一个参数:增大,视角沿x轴正方向水平右移动(图向左);第二个参数:增大,视角沿y轴正方向垂直向上移动(图向下);第三个参数:增大,视角向z轴正方向移动(图变小)
          },
          boxWidth: 120,
          boxHeight: 70,
          boxDepth: 120,
          top: -100,
        },

        series: [
          {
            type: "scatter3D",
            dimensions: [
              "x",
              "y",
              "z",
              "时间",
            ], //悬浮到点时弹出的显示框信息
            // encode: {
            // x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
            // y: 1,              // 表示维度 2 映射到 y 轴。
            // z: 3,
            // tooltip:['a','c','b'], // 表示维度 3、2、4 会在 tooltip 中显示。
            // label: 'a'           // 表示 label 使用维度 3。
            // },
            data: [
              [0, 0, 0, '2023-10-6'],
              [1, 0, 0, '2023-10-7'],
              [0, 1, 0, '2023-10-8'],
              [0, 1, 1, '2023-10-9'],
              [21, 24, 25, '2023-10-10'],
              [22, 25, 26, '2023-10-11'],
              [50, 40, 70, '2023-10-12']
            ],
            symbolSize: 4, //点的大小
            // symbol: 'triangle',
            itemStyle: {
              // borderWidth: 1,
              color: "#87f0e5",
              // borderColor: 'rgba(255,255,255,0.8)'//边框样式
            },
            emphasis: {
              itemStyle: {
                color: "#ccc", //高亮
              },
            },
            // itemStyle: {
            //     color: "#87f0e5"
            // }
          },
        ],
        backgroundColor: "#fff",
      };

      this.myChart = this.$echarts.init(
        document.querySelector(".threeDCharts")
      );
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },



  mounted() {
    this.initThreeDCharts();
  },


 .threeDCharts {
      width: 100%;
      height: 600px;
    }

到了这里,关于vue中实现echarts三维散点图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Matplotlib在Python中绘制三维散点图

    什么是Matplotlib? Matplotlib是Python中的一个库,用于创建静态和动态动画,并使用其内置函数绘制。它有很多内置特性和内置分析工具,用于分析任何图形或图表。 如果我们想绘制任何三维图形,那么我们可以使用Matplotlib库。当我们有一个巨大的三维变量数据集,我们绘制它

    2024年02月12日
    浏览(45)
  • echarts散点图自定义tooltip,鼠标放上去展示多行数据

    先放效果图 如图,就是鼠标悬停在散点上(这里的散点我替换成了图片,具体做法参考这篇文章:echarts散点图的散点用自定义图片替代-CSDN博客)时,可以展示多行数据。之前查找资料的时候,很多用字符串模板的,即{a}{b}{c}之类的,但是经过实践之后发现这种方法对于散点

    2024年04月24日
    浏览(42)
  • echarts的series——折线图,饼图,柱状图,散点图的配置

    🙂博主:小猫娃来啦 🙂文章核心: echarts的series——折线图,饼图,柱状图,散点图的配置 Echarts是一款基于JavaScript的开源可视化图表库,它具有以下优点: 1. 易于使用 : Echarts提供了丰富的图表类型和各种交互方式,用户可以通过简单的配置和API调用来创建各种复杂的图

    2024年02月01日
    浏览(63)
  • python生成24bit全彩RGB立方体的三维散点图

    生成一个 RGB 立方体的三维散点图。在这个立方体中,每个点代表一个不同的颜色,其位置由红色、绿色和蓝色通道的值决定。点的颜色则直接反映了其在 RGB 空间中的位置。 X轴代表红色通道。Y轴代表绿色通道。 Z轴代表蓝色通道。 每个点的颜色是根据其在这三个颜色通道中

    2024年01月19日
    浏览(50)
  • 【Lidar】基于Python的三维点云数据转二维平面+散点图绘制

            最近一直在搞点云相关的操作,有时候在处理点云数据时需要查看处理后的数据是否满足需求,所以就想着写一套展示点云的代码。之前已经分享过如何可视化点云了,感兴趣的可以自己去看下:【Lidar】基于Python的Open3D库可视化点云数据。但是这个是3维展示,不满

    2024年02月21日
    浏览(48)
  • 数据可视化——用python绘制气泡图、三维散点图、多重柱形图案例

    目录 前言 一、气泡图的绘制 1、什么是气泡图?他适用于什么数据? 2、图形效果展示 3、导入需要用到的库 4、读取要分析的数据 5、检查数据是否有问题 6、将要对比数据提取出来 7、画图 二、三维散点图的绘制 1、什么是三维散点图? 2、导入需要用到的数据库 3、画图 三

    2024年02月06日
    浏览(63)
  • chatgpt赋能python:Python散点图介绍:如何用Python绘制散点图?

    Python是一门流行的编程语言,用于解决各种问题和编写各种应用程序。其中,数据可视化是Python应用程序中非常重要的组成部分。散点图是最常用的数据可视化图形之一,它能够清晰地展示多个变量之间的关系。在本文中,我们将介绍如何使用Python绘制散点图。 散点图可以很

    2024年02月06日
    浏览(55)
  • 【matplotlib 实战】--散点图

    散点图,又名点图、散布图、X-Y图,是将所有的数据以点的形式展现在平面直角坐标系上的统计图表。 散点图常被用于分析变量之间的相关性。 如果两个变量的散点看上去都在一条直线附近波动,则称变量之间是线性相关的; 如果所有点看上去都在某条曲线(非直线)附近

    2024年02月08日
    浏览(36)
  • Python散点图

    散点图是指在回归分析中,数据点在直角坐标系平面上的分布图,散点图表示因变量随自变量而变化的大致趋势,据此可以选择合适的函数对数据点进行拟合。用两组数据构成多个坐标点,考察坐标点的分布,判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点

    2024年02月09日
    浏览(33)
  • 描述性统计图表——散点图

    适用范围:当估计两个变量之间存在相关关系时,用散点图进行确认,并观察和确定两者的关系强度。还可以用散点图分析坐标点的分布模式,如“风险机遇评估矩阵”。 即便自变量为连续性变量,仍然可以使用散点图。也就是说散点图通过散点的疏密程度和变化趋势表示二

    2024年02月01日
    浏览(90)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包