01-echarts如何绘制三维折线图

news2024/11/18 1:50:43

echarts如何绘制三维折线图

  • 一、相关依赖包
      • 1、下载依赖
      • 2、引入依赖
  • 二、创建图表盒子
      • 1、创建盒子
      • 2、定义数据
      • 3、编写方法
        • 1、初始化盒子
        • 2、设置配置项
        • 3、修改数据格式
        • 4、设置颜色数组
        • 4、设置name数组
        • 5、设置线三维和点三维
        • 6、添加配置项
        • 7、设置图表自适应
      • 4、调用方法
  • 三、整体代码
  • 四、效果

一、相关依赖包

注意点：版本号不一致会报错

1、下载依赖

1、echarts版本号为5.2.0
echarts-gl版本号为2.0.8

2、echarts版本号为 4.9.0,   
  echarts-gl版本号为 1.1.2,
  这两种版本号都可以

二者都需要下载，使用npm下载
  npm install echarts@5.2.0
  npm install echarts-gl@2.0.8

2、引入依赖

import * as echarts from 'echarts';
import 'echarts-gl';

二、创建图表盒子

1、创建盒子

 <div id="main" style="width: 900px; height: 600px"></div>

2、定义数据

我的数据格式是对象里有,x,y,z,和颜色，你们自己的数据格式根据后端返回的格式来修改就可以

 dataList: [
        [
          { x: 0.01, y: 1, z: 0, color: '#d19a66' },
          { x: 0.05, y: 1, z: 0.2, color: '#d19a66' },
          { x: 0.1, y: 1, z: 0.3, color: '#d19a66' },
          { x: 1, y: 1, z: 0.4, color: '#d19a66' },
          { x: 1, y: 1, z: 1, color: '#d19a66' },
          { x: 2, y: 1, z: 0, color: '#d19a66' },
          { x: 3, y: 1, z: 2, color: '#d19a66' },
          { x: 4, y: 1, z: 3, color: '#d19a66' },
          { x: 5, y: 1, z: 1, color: '#d19a66' },
          { x: 6, y: 1, z: 2, color: '#d19a66' },
          { x: 7, y: 1, z: 3, color: '#d19a66' },
          { x: 8, y: 1, z: 0, color: '#d19a66' },
          { x: 9, y: 1, z: 0, color: '#d19a66' },
          { x: 12, y: 1, z: 0, color: '#d19a66' },
          { x: 19, y: 1, z: 0, color: '#d19a66' },
        ],
        [
          { x: 0, y: 2, z: 0, color: '#d19a66' },
          { x: 1, y: 2, z: 0, color: '#d19a66' },
          { x: 1, y: 2, z: 1, color: '#d19a66' },
          { x: 2, y: 2, z: 0, color: '#d19a66' },
          { x: 3, y: 2, z: 2, color: '#d19a66' },
          { x: 4, y: 2, z: 3, color: '#d19a66' },
          { x: 5, y: 2, z: 1, color: '#d19a66' },
          { x: 6, y: 2, z: 2, color: '#d19a66' },
          { x: 7, y: 2, z: 3, color: '#d19a66' },
          { x: 8, y: 2, z: 0, color: '#d19a66' },
          { x: 9, y: 2, z: 0, color: '#d19a66' },
          { x: 12, y: 2, z: 0, color: '#d19a66' },
          { x: 19, y: 2, z: 0, color: '#d19a66' },
        ],
        [
          { x: 1, y: 3, z: 1, color: '#e06c75' },
          { x: 2, y: 3, z: 2, color: '#e06c75' },
          { x: 3, y: 3, z: 0, color: '#e06c75' },
          { x: 4, y: 3, z: 1, color: '#e06c75' },
          { x: 5, y: 3, z: 1, color: '#e06c75' },
          { x: 6, y: 3, z: 1, color: '#e06c75' },
          { x: 7, y: 3, z: 1, color: '#e06c75' },
          { x: 8, y: 3, z: 1, color: '#e06c75' },
          { x: 9, y: 3, z: 1, color: '#e06c75' },
        ],
      ],

3、编写方法

我个人的习惯是在methods里面写初始化图表的方法，在mounted钩子函数里面调用这个方法，你们也可以直接写在mounted函数里面

1、初始化盒子
let chart = echarts.init(document.getElementById('main'));
2、设置配置项
let option = {
        xAxis3D: {
          type: 'value',
          name: '',
          axisLabel: {
            show: true,
            interval: 0, //使x轴都显示
          },
        },
        yAxis3D: {
          type: 'category',
          name: '',
          data: [11, 22, 33, 44, 55, 66, 77, 88, 99],
          axisLabel: {
            show: true,
            interval: 0, //使y轴都显示
          },
        },
        zAxis3D: {
          type: 'value',
          name: '',
        },

        tooltip: {
          show: true,
          formatter: function (params) {
            let content = `
            X: ${params.value[0]}<br>
            Y: ${params.value[1]}<br>
            Z: ${params.value[2]}
        `;
            return content;
          },
        },
        grid3D: {
          boxWidth: 300,
          boxHeight: 140,
          boxDepth: 200,

          axisLine: {
            show: true,
            interval: 0,
            lineStyle: {
              color: '#2c3e50',
            },
          },
          // 控制灵敏度，数值越大越灵敏
          viewControl: {
            distance: 400,
            rotateSensitivity: 10, // 控制旋转的灵敏度
            zoomSensitivity: 10, // 控制缩放的灵敏度
            panSensitivity: 10, // 控制平移的灵敏度
          },
        },
      };
3、修改数据格式

因为所需要的格式是[x,y,z]这样的，所以需要更改我的数据格式

  const convertedDataList = this.dataList.map((series) =>
        series.map((point) => [point.x, point.y, point.z])
      );
4、设置颜色数组

因为颜色值是固定的，每一条线是一个颜色，而不是一个点一个颜色，所以需要将颜色单独拿出来

 let series = [];
      // 设置颜色数组
      //#region
      const uniqueColorsSet = new Set();
      this.dataList.forEach((series) => {
        // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个点的颜色
        if (series.length > 0) {
          uniqueColorsSet.add(series[0].color);
        }
      });
      const uniqueColorsArray = Array.from(uniqueColorsSet);
4、设置name数组

设置name数组就是所需要设置legend时需要的

 const uniqueName = new Set();
 this.dataList.forEach((series) => {
 // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个的Y轴
  if (series.length > 0) {
     uniqueName.add(series[0].y);
      }
   });
const uniquNameArray = Array.from(uniqueName);
5、设置线三维和点三维

因为需要鼠标放上去有 tooltip提示，折现三维的话没有，只能使用点三维，所以一条数据中，需要同时设置一个点三维和线三维，循环数据获得

convertedDataList.forEach((item, index) => {
        let series1 = {
          type: 'scatter3D',
          name: uniquNameArray[index],
          symbolSize: 3,
          itemStyle: {
            color: uniqueColorsArray[index],
          },
          label: {
            //当type为scatter3D时有label出现
            show: true,
            position: 'top', //标签的位置，也就是data中数据相对于线在哪个位置
            distance: 0,
            textStyle: {
              color: '#2c3e50',
              fontSize: 12,
              borderWidth: 0,
              borderColor: '#2c3e50',
              backgroundColor: 'transparent',
            },
          },
          data: item,
        };
        let series2 = {
          type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
          name: uniquNameArray[index],
          smooth: true,
          lineStyle: {
            width: 5, //线的宽度
            color: uniqueColorsArray[index], //线的颜色
          },
          data: item, //线数据和点数据所需要的格式一样
        };
        series.push(series1, series2);
      });
6、添加配置项
 option.series = series;

 option && chart.setOption(option);
7、设置图表自适应
 window.addEventListener('resize', function () {
        chart.resize();
      });

4、调用方法

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

三、整体代码

<!-- eslint-disable vue/no-multiple-template-root -->
<template>
  <div>
    <div id="main" style="width: 900px; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  data() {
    return {
      dataList: [
        [
          { x: 0.01, y: 1, z: 0, color: '#d19a66' },
          { x: 0.05, y: 1, z: 0.2, color: '#d19a66' },
          { x: 0.1, y: 1, z: 0.3, color: '#d19a66' },
          { x: 1, y: 1, z: 0.4, color: '#d19a66' },
          { x: 1, y: 1, z: 1, color: '#d19a66' },
          { x: 2, y: 1, z: 0, color: '#d19a66' },
          { x: 3, y: 1, z: 2, color: '#d19a66' },
          { x: 4, y: 1, z: 3, color: '#d19a66' },
          { x: 5, y: 1, z: 1, color: '#d19a66' },
          { x: 6, y: 1, z: 2, color: '#d19a66' },
          { x: 7, y: 1, z: 3, color: '#d19a66' },
          { x: 8, y: 1, z: 0, color: '#d19a66' },
          { x: 9, y: 1, z: 0, color: '#d19a66' },
          { x: 12, y: 1, z: 0, color: '#d19a66' },
          { x: 19, y: 1, z: 0, color: '#d19a66' },
        ],
        [
          { x: 0, y: 2, z: 0, color: '#d19a66' },
          { x: 1, y: 2, z: 0, color: '#d19a66' },
          { x: 1, y: 2, z: 1, color: '#d19a66' },
          { x: 2, y: 2, z: 0, color: '#d19a66' },
          { x: 3, y: 2, z: 2, color: '#d19a66' },
          { x: 4, y: 2, z: 3, color: '#d19a66' },
          { x: 5, y: 2, z: 1, color: '#d19a66' },
          { x: 6, y: 2, z: 2, color: '#d19a66' },
          { x: 7, y: 2, z: 3, color: '#d19a66' },
          { x: 8, y: 2, z: 0, color: '#d19a66' },
          { x: 9, y: 2, z: 0, color: '#d19a66' },
          { x: 12, y: 2, z: 0, color: '#d19a66' },
          { x: 19, y: 2, z: 0, color: '#d19a66' },
        ],
        [
          { x: 1, y: 3, z: 1, color: '#e06c75' },
          { x: 2, y: 3, z: 2, color: '#e06c75' },
          { x: 3, y: 3, z: 0, color: '#e06c75' },
          { x: 4, y: 3, z: 1, color: '#e06c75' },
          { x: 5, y: 3, z: 1, color: '#e06c75' },
          { x: 6, y: 3, z: 1, color: '#e06c75' },
          { x: 7, y: 3, z: 1, color: '#e06c75' },
          { x: 8, y: 3, z: 1, color: '#e06c75' },
          { x: 9, y: 3, z: 1, color: '#e06c75' },
        ],
      ],
      selectSpectrogram: null,
    };
  },
  mounted() {
    this.drewLine();
  },
  methods: {
    drewLine() {
      var chart = echarts.init(document.getElementById('main'));
      let option = {
        xAxis3D: {
          type: 'value',
          name: '',
          axisLabel: {
            show: true,
            interval: 0, //使x轴都显示
          },
        },
        yAxis3D: {
          type: 'category',
          name: '',
          data: [11, 22, 33, 44, 55, 66, 77, 88, 99],
          axisLabel: {
            show: true,
            interval: 0, //使y轴都显示
          },
        },
        zAxis3D: {
          type: 'value',
          name: '',
        },

        tooltip: {
          show: true,
          formatter: function (params) {
            let content = `
            X: ${params.value[0]}<br>
            Y: ${params.value[1]}<br>
            Z: ${params.value[2]}
        `;
            return content;
          },
        },
        grid3D: {
          boxWidth: 300,
          boxHeight: 140,
          boxDepth: 200,

          axisLine: {
            show: true,
            interval: 0,
            lineStyle: {
              color: '#2c3e50',
            },
          },
          // 控制灵敏度，数值越大越灵敏
          viewControl: {
            distance: 400,
            rotateSensitivity: 10, // 控制旋转的灵敏度
            zoomSensitivity: 10, // 控制缩放的灵敏度
            panSensitivity: 10, // 控制平移的灵敏度
          },
        },
      };

      const convertedDataList = this.dataList.map((series) =>
        series.map((point) => [point.x, point.y, point.z])
      );

      let series = [];
      // 设置颜色数组
      //#region
      const uniqueColorsSet = new Set();
      this.dataList.forEach((series) => {
        // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个点的颜色
        if (series.length > 0) {
          uniqueColorsSet.add(series[0].color);
        }
      });
      const uniqueColorsArray = Array.from(uniqueColorsSet);
      //#endregion

      //#region 设置name数组
      const uniqueName = new Set();
      this.dataList.forEach((series) => {
        // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个的Y轴
        if (series.length > 0) {
          uniqueName.add(series[0].y);
        }
      });
      const uniquNameArray = Array.from(uniqueName);
      //#endregion
      convertedDataList.forEach((item, index) => {
        let series1 = {
          type: 'scatter3D',
          name: uniquNameArray[index],
          symbolSize: 3,
          itemStyle: {
            color: uniqueColorsArray[index],
          },
          label: {
            //当type为scatter3D时有label出现
            show: true,
            position: 'top', //标签的位置，也就是data中数据相对于线在哪个位置
            distance: 0,
            textStyle: {
              color: '#2c3e50',
              fontSize: 12,
              borderWidth: 0,
              borderColor: '#2c3e50',
              backgroundColor: 'transparent',
            },
          },
          data: item,
        };
        let series2 = {
          type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
          name: uniquNameArray[index],
          smooth: true,
          lineStyle: {
            width: 5, //线的宽度
            color: uniqueColorsArray[index], //线的颜色
          },
          data: item, //线数据和点数据所需要的格式一样
        };
        series.push(series1, series2);
      });
      option.series = series;

      option && chart.setOption(option);

      window.addEventListener('resize', function () {
        chart.resize();
      });
    },
  },
};
</script>

<style scoped>
.div {
  background-color: #2c3e50;
}
#main {
  margin: 0 auto;
  border: 1px solid red;
}
</style>

四、效果

因为我的数据中就添加了三个数据，所以有三条折现，如果想要有更多折现，可以在数据中继续添加数据
请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1410810.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Oracle DG环境下的秘钥管理

Oracle DG环境下的秘钥管理

今天有朋友问到1&#xff09;DG环境下的秘钥管理需要注意什么&#xff0c;2&#xff09;秘钥管理对DG的日志同步有影响吗&#xff1f; 对于2&#xff09;的回答是明确的&#xff0c;没有影响。秘钥的管理和DG的redo log shipping完全是两套机制。在最新版的Oracle Key Vault常…
阅读更多...
线上版本升级 — — pg数据库备份

线上版本升级 — — pg数据库备份

线上版本升级 — — pg数据库备份 在版本升级之前&#xff0c;我们通常为了保险都需要将数据库里的数据结构备份一份&#xff0c;防止升级失败之后数据丢失。&#xff08;根据业务而来&#xff0c;并非所有业务都需要备份&#xff09; 1 备份 1.1 pg_dump&#xff1a;备份指定…
阅读更多...
Linux常见的管理命令

Linux常见的管理命令

1. whoami 作用&#xff1a; 显示出当前有效的用户名称&#xff0c;Linux是多用户多任务 语法&#xff1a;whoami(选项) 选项&#xff1a; --help&#xff1a;在线帮助 --version&#xff1a;显示版本信息和退出 场景使用&#xff1a; 1. 当用户想要查看当前登录系统的用户…
阅读更多...
04 约数

04 约数

定义&#xff1a; 若整数n除以整数d的余数为0&#xff0c;即d能够整除n&#xff0c;n是d的倍数&#xff0c;记作d|n. 通过质因子求一个数的约数 如果n可以表示成 其中均为n的质因子 因为对于任意一个质因子都有选0个 选1个 选2个....选个共种可能&#xff0c; n的约数个数…
阅读更多...
C++ STL库详解：list

C++ STL库详解：list

目录 一、list简介 二、list的使用 2.1list的构造 2.2list iterator迭代器的使用 2.3list element access 2.4list 常见接口 2.5迭代器失效 三、list与vector的对比 一、list简介 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器…
阅读更多...
腾讯云轻量应用服务器Docker如何一键搭建属于自己的幻兽帕鲁服务器？

腾讯云轻量应用服务器Docker如何一键搭建属于自己的幻兽帕鲁服务器？

幻兽帕鲁/Palworld是一款2024年Pocketpair开发的开放世界生存制作游戏&#xff0c;在帕鲁的世界&#xff0c;玩家可以选择与神奇的生物“帕鲁”一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。而帕鲁可以进行战斗、繁殖、协助玩家做农活&#xff0c;也…
阅读更多...
【机器学习300问】19、深度学习和机器学习什么关系？

【机器学习300问】19、深度学习和机器学习什么关系？

之前的文章都聚焦在传统的机器学习上&#xff0c;作为入门&#xff0c;学了许多机器学习的基础。往后的文章我会穿插着机器学习和深度学习的内容进行&#xff0c;所有有必要在这里先说下两者的关系。 一、从范围上讲 深度学习和机器学习都是人工智能的一个子领域&#xff0c;它…
阅读更多...
杰理-修改蓝牙版本5.4

杰理-修改蓝牙版本5.4

杰理-修改蓝牙版本5.4 #define BLUETOOTH_CORE_SPEC_54 0x0dextern void set_bt_version(u8 version); set_bt_version(BLUETOOTH_CORE_SPEC_54); //蓝牙版本5.4
阅读更多...
Vscode配置python代码开发

Vscode配置python代码开发

文章目录 1. 配置python运行环境2. 常用插件说明3. Vscode配置文件说明3.1 setting.json配置说明3.2 launch.json配置说明 4. 远程开发5. 其他配置 1. 配置python运行环境 安装python插件&#xff1a;点击VSCode左侧边栏中的扩展图标&#xff08;或按 CtrlShiftX&#xff09;&a…
阅读更多...
即时设计好用吗？即时设计都有什么优势？

即时设计好用吗？即时设计都有什么优势？

即时设计是否易于使用&#xff1f;即时设计有哪些易于使用的功能&#xff1f;假如你在寻找一个免费的Sketch 或者网页版本 PS&#xff0c;那么「即时设计」这是个不错的选择。这个云端 UI 设计工具允许您在不占用计算机内存的情况下使用任何设备。它可以快速存储您的设计文件&a…
阅读更多...
AI教我学编程之SQL Server常见指令以及数据类型

AI教我学编程之SQL Server常见指令以及数据类型

前言 今天在工作的过程中&#xff0c;遇到了许多常见的属性&#xff0c;在此做下记录&#xff0c;方便以后查询 目录 SQL Server 常见指令 对话AI 光有概念怎么行 阶段总结 SQL Server关键字 边学边练 数据类型 看图说话 对话AI 数据类型我知道 括号里的神秘数字 疑问 边练…
阅读更多...
Linux sudo与/etc/sudoers

Linux sudo与/etc/sudoers

sudo介绍 sudo命令可以让普通用户在执行需要超级用户权限的命令时&#xff0c;临时提升为超级用户。例如&#xff0c;普通用户可以使用sudo执行系统管理任务&#xff0c;如安装软件、修改系统配置等。访问控制&#xff1a;sudo命令通过sudoers文件中的配置&#xff0c;可以对用…
阅读更多...
企业软件项目成果-图像识别

企业软件项目成果-图像识别

下面图像识别仅仅使用了OpenCV库而已&#xff0c;并没有涉及深度学习、机器学习。 整盘样本的拍照识别结果&#xff08;识别准确率达100%&#xff09;&#xff1a; 宫颈刷图像识别的测试结果&#xff08;识别准确率达100%&#xff09;&#xff1a;
阅读更多...
基于51单片机的智能烘干机设计

基于51单片机的智能烘干机设计

基于51单片机的智能烘干机设计[proteus仿真] 温湿度检测系统这个题目算是课程设计和毕业设计中常见的题目了&#xff0c;本期是一个基于51单片机的智能烘干机设计 需要的源文件和程序的小伙伴可以关注公众号【阿目分享嵌入式】&#xff0c;赞赏任意文章 2&#xffe5;&#x…
阅读更多...
基于springboot在线学习平台源码和论文

基于springboot在线学习平台源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括学习平台的网络应用&#xff0c;在外国学习平台已经是很普遍的方式&#xff0c;不过国内的管理平台可能还处于起步阶段。学习平台具有学习信息管理功能的选择。学习平台采用ja…
阅读更多...
jetson-inference----docker内运行分类任务

jetson-inference----docker内运行分类任务

系列文章目录 jetson-inference入门 jetson-inference----docker内运行分类任务 文章目录 系列文章目录前言一、进入jetson-inference的docker二、分类任务总结 前言 继jetson-inference入门 一、进入jetson-inference的docker 官方运行命令 进入jetson-inference的docker d…
阅读更多...
C++PythonC# 三语言OpenCV从零开发(2):教程选择

C++PythonC# 三语言OpenCV从零开发(2):教程选择

文章目录 相关专栏前言视频教学和官方文档视频教程OpenCV 官方教程最终选择我的最终选择 相关专栏 C&Python&Csharp in OpenCV 前言 OpenCV 有官方的教程和简单的视频教程&#xff1a; OpenCV 官方教程 B站也有相关的视频教学 OpenCV4 C 快速入门视频30讲 - 系列合集 …
阅读更多...
使用Ollama本地部署大模型

使用Ollama本地部署大模型

Ollama 是一个简明易用的本地大模型运行框架&#xff0c;目前已经有 32 K star。随着围绕着 Ollama 的生态走向前台&#xff0c;更多用户也可以方便地在自己电脑上玩转大模型了&#xff0c;使用 Ollama 本地部署大模型在 mac 上尤其简单 GitHub地址&#xff1a;https://github…
阅读更多...
[每日一题] 01.25 - 子数整数

[每日一题] 01.25 - 子数整数

子数整数 k int(input()) flag False for i in range(10000,30001):a,b,c [int(str(i)[j:j 3]) for j in range(3)]if a % k 0 and b % k 0 and c % k 0:print(i)flag Trueif not flag:print(No)
阅读更多...
文旅AI交互数字人，提升景区数字化导览服务体验

文旅AI交互数字人，提升景区数字化导览服务体验

随着数字化的普及&#xff0c;文化旅游逐渐走向数字化&#xff0c;通过数字人技术手段对文化旅游资源进行整合与开发。 AI交互数字人可以部署于交互式终端设备和移动端&#xff0c;可以为游客提供“面对面”的语音交互&#xff0c;提供路径规划、游览路线推荐、景点讲解等服务&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023