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

白白李媛媛2024-01-26 15:52

echarts如何绘制三维折线图

一、相关依赖包

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

1、下载依赖

javascript 复制代码 
1、echarts版本号为5.2.0
echarts-gl版本号为2.0.8

2、echarts版本号为 4.9.0,   
  echarts-gl版本号为 1.1.2,
  这两种版本号都可以
javascript 复制代码 
二者都需要下载，使用npm下载
  npm install [email protected]
  npm install [email protected]

2、引入依赖

javascript 复制代码 
import * as echarts from 'echarts';
import 'echarts-gl';

二、创建图表盒子

1、创建盒子

javascript 复制代码 
 <div id="main" style="width: 900px; height: 600px"></div>

2、定义数据

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

javascript 复制代码 
 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、初始化盒子
javascript 复制代码 
let chart = echarts.init(document.getElementById('main'));
2、设置配置项
javascript 复制代码 
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]这样的，所以需要更改我的数据格式

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

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

javascript 复制代码 
 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时需要的

javascript 复制代码 
 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提示，折现三维的话没有，只能使用点三维，所以一条数据中，需要同时设置一个点三维和线三维，循环数据获得

javascript 复制代码 
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、添加配置项
javascript 复制代码 
 option.series = series;

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

4、调用方法

javascript 复制代码 
  mounted() {
    this.drewLine();
  },

三、整体代码

javascript 复制代码 
<!-- 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>

四、效果

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

相关推荐
繁依Fanyi8 分钟前
项目记录：「五秒反应挑战」小游戏的开发全过程
前端·codebuddy首席试玩官
肥肠可耐的西西公主29 分钟前
前端（vue）学习笔记（CLASS 6）：路由进阶
前端·vue.js·学习
*小雪30 分钟前
uniapp打包H5，输入网址空白情况
前端·uni-app
李梨与狸1 小时前
vue中excel文件 打包后不展示问题
前端·vue.js·excel
前端达人1 小时前
React 播客专栏 Vol.13｜样式不难搞，Tailwind CSS 与 SVG 实战入门
前端·javascript·css·react.js·前端框架
xcs194051 小时前
开发 前端搭建npm v11.4.0 is known not to run on Node.js v14.18.1.
前端·npm·node.js
等等5431 小时前
CSS高级技巧
前端·css
web_小码农2 小时前
前端实现流式输出《后端返回Markdown格式文本，前端输出类似于打字的那种》
前端
群联云防护小杜2 小时前
物联网僵尸网络防御：从设备认证到流量染色
运维·服务器·前端·网络·物联网·安全·ddos
YD12182 小时前
如何在 AWS 上构建支持 AVIF 的前端图片优化方案
前端·云计算·aws
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06Coze扣子平台完整体验和实践（附国内和国际版对比）07Ubuntu24.04安装中文输入法08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09DeepSeek各版本说明与优缺点分析10深度学习基础--ResNet网络的讲解，ResNet50的复现(pytorch)以及用复现的ResNet50做鸟类图像分类