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

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>

四、效果

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【脑电信号处理与特征提取】P2-夏晓磊：脑电的神经起源与测量

【脑电信号处理与特征提取】P2-夏晓磊：脑电的神经起源与测量

夏晓磊&#xff1a;脑电的神经起源与测量 专业术语 electroencephalography(EEG) 脑电图 Excitatory Postsynaptic Potential(EPSP) 兴奋性突触后电位 Electrocorticography(ECoG) 皮层脑电图 什么是脑电/脑电图&#xff08;EEG&#xff09;&#xff1f; Electroencephalograp…
阅读更多...
C++ 关于静态成员对象、函数学习整理：

C++ 关于静态成员对象、函数学习整理：

类的静态成员为类创建的所有对象所共有的成员&#xff0c;不单独属于某一对象&#xff0c;而属于整个类&#xff0c;而静态成员分为静态成员变量、静态成员函数。 静态成员变量&#xff08;静态数据成员&#xff09;&#xff1a; 引入及解决问题的优势&#xff1a; 类创建了…
阅读更多...
Java中SimpleDateFormat时YYYY与yyyy以及HH和hh的区别注意踩坑

Java中SimpleDateFormat时YYYY与yyyy以及HH和hh的区别注意踩坑

场景 Java开发手册中为什么要求SimpleDateFormat时用y表示年&#xff0c;而不能用Y&#xff1a; Java开发手册中为什么要求SimpleDateFormat时用y表示年&#xff0c;而不能用Y_simpledateformat 怎么确定y就是年-CSDN博客 在使用SimpleDateFormat在获取当前日期时因使用了YY…
阅读更多...
[极客大挑战 2019]Secret File1

[极客大挑战 2019]Secret File1

上来就说看不到&#xff0c;先看看源码&#xff0c;发现./Archive_room.php 点secret直接跳到了end&#xff0c;抓包看看&#xff0c;找到了secr3t.php 过滤了很少的关键词&#xff0c;提示flag在flag.php&#xff0c;过去发现还是看不到 尝试用php伪协议读取flag.php的源码 …
阅读更多...
creo草绘3个实例学习笔记

creo草绘3个实例学习笔记

creo草绘3个实例 文章目录 creo草绘3个实例草绘01草绘02草绘03 草绘01 草绘02 草绘03
阅读更多...
Web08--JavaScript高级

Web08--JavaScript高级

1、BOM对象 BOM&#xff1a;browser object model 浏览器对象模型 BOM对象包括window对象、screen对象、history对象、location对象、navigator对象。 1.1 window对象 所有的浏览器都支持window对象。它表示的浏览器窗口 window对象是js中的顶层对象&#xff0c;所有的j…
阅读更多...
直播引流到微信，如何才算合规？-数灵通

直播引流到微信，如何才算合规？-数灵通

抖音直播如今越来越受到大众的关注&#xff0c;许多朋友都会准时守在直播前。不少人被直播带来的收益所吸引&#xff0c;纷纷加入到创作者的行列中。直播间巨大的流量背后&#xff0c;蕴藏着无法估量的经济效益和赚钱机会。 确实有人考虑将部分抖音直播的流量引入微信&#xff…
阅读更多...
TS基础知识点快速回顾(上)

TS基础知识点快速回顾(上)

基础介绍 什么是 TypeScript&#xff1f; TypeScript&#xff0c;简称 ts&#xff0c;是微软开发的一种静态的编程语言&#xff0c;它是 JavaScript 的超集。 那么它有什么特别之处呢? js 有的 ts 都有&#xff0c;所有js 代码都可以在 ts 里面运行。ts 支持类型支持&#…
阅读更多...
退货通知单下推销售退货单，无法下推问题排查

退货通知单下推销售退货单，无法下推问题排查

文章目录 退货通知单下推销售退货单&#xff0c;无法下推问题排查报错界面排查原因 退货通知单下推销售退货单&#xff0c;无法下推问题排查 报错界面 排查 检验单已做。 原因 合格未勾选判退。
阅读更多...
antv/g6绘制数据流向图

antv/g6绘制数据流向图

antv/g6绘制数据流向图 前言接口模拟数据htmlts页面效果 前言 在业务开发中需要绘制数据流向图&#xff0c;由于echarts关系图的限制以及需求的特殊要求&#xff0c;转而使用antv/g6实现&#xff0c;本文以代码的方式实现数据流向需求以及节点分组,版本"antv/g6": “…
阅读更多...
爬虫js逆向分析——x平台（前置知识：python执行js代码）

爬虫js逆向分析——x平台（前置知识：python执行js代码）

import execjs# 读取到js字符串 with open(v1.js, moderb) as f:js_string f.read().decode(utf-8)JSCode execjs.compile(js_string)# 调用js代码&#xff0c;如果有参数则依次往后逗号&#xff0c;写 res JSCode.call(test, eric)print(res)js文件中正常写代码即可。
阅读更多...
前端vue集成echarts图形报表样例

前端vue集成echarts图形报表样例

文章目录 &#x1f412;个人主页&#x1f3c5;Vue项目常用组件模板仓库&#x1f4d6;前言&#xff1a;&#x1f415;1.在项目终端下载echarts依赖包&#x1f3e8;2.在main.js中导入echarts资源包并使用&#x1f380;3.在.vue文件中直接使用echarts&#xff0c;下面是一个样例&a…
阅读更多...
Unity 组合模式（实例详解）

Unity 组合模式（实例详解）

文章目录 示例1&#xff1a;Unity中的图形界面元素组合示例2&#xff1a;Unity中的游戏对象层级组合示例3&#xff1a;Unity中的场景图节点组合 在Unity中&#xff0c;组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成…
阅读更多...
构建未来的数字世界：创新开放API接口认证解决方案

构建未来的数字世界：创新开放API接口认证解决方案

目录 1、引言 1.1 数字世界的发展 1.2 API接口的重要性 1.3 API接口认证的挑战 2、现有的API接口认证解决方案 2.1 基于令牌的认证方法 2.2 OAuth认证 2.3 OpenID认证 2.4 API密钥认证 3、创新开放API接口认证解决方案 3.1 双因素认证 3.2 生物特征认证 3.3 区块链…
阅读更多...
Information Symmetry Matters

Information Symmetry Matters

RG means ‘Relation Guidance’ 辅助信息 作者未提供代码
阅读更多...
MySQL 初识MySQL

MySQL 初识MySQL

目录 1 数据库1.1 前言1.2 数据库分类1.2.1 关系型数据库&#xff08;RDBMS&#xff09;1.2.2 非关系型数据库1.2.3 关系型数据库与非关系型数据库的区别 2 链接数据库3 SQL分类4 存储引擎 1 数据库 1.1 前言 到底什么是MySQL? 大家都知道MySQL叫做数据库。那么什么是数据库…
阅读更多...
系统架构15 - 软件工程（3）

系统架构15 - 软件工程（3）

软件过程模型 瀑布模型特点缺点 原型化模型特点两个阶段不同类型注意 螺旋模型V 模型特点 增量模型特点 喷泉模型基于构件的开发模型(CBSD)形式化方法模型敏捷模型特点“适应性” (adaptive) 而非“预设性” (predictive)“面向人的” (People-oriented) 而非“面向过程的” (P…
阅读更多...
vue2、vue3，生命周期详解

vue2、vue3，生命周期详解

一、Vue2.x Vue2的生命周期 是指Vue实例从创建到销毁的整个过程中&#xff0c;会经历一系列的阶段和回调函数。它分为8个阶段&#xff0c;包括了组件的创建、挂载、更新和销毁等过程。 1、beforeCreate: 在实例初始化之后&#xff0c;但在数据观测和事件配置之前被调用。此…
阅读更多...
【Linux编译器-gcc/g++使用】

【Linux编译器-gcc/g++使用】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 设计样例&#xff0c;先见一下 方案一&#xff1a; 方案二&#xff1a; 在企业里面一般维护软件的源代码的话&#xff0c;要维护几份&#xff1f; 方案一&…
阅读更多...
如何在短时间内制作出专业的产品说明书模板

如何在短时间内制作出专业的产品说明书模板

产品说明书是企业向客户介绍产品的重要工具&#xff0c;能够直观地展示产品特点、功能以及使用方法。一个好的产品说明书模板可以帮助企业在短时间内制作出专业的产品说明书。那么怎样去做这个产品说明书模板呢&#xff1f;其实主要关注以下几个关键要素。 | 一、明确产品需求和…
阅读更多...
最新文章

Copyright @ 2022~2023