一、前言

最初需求中有需要做一个三维的折线图，用来展示时域频谱图等各种图。然而在echarts的示例中并未找到3D折线图的示例。后来简单实现了一个demo，结果需求变更了=。=

不需要这个三维图了==！

纪录一下，以防后续的版本中，需求再变回来吧=。=

二、实现

2.1 引库

import * as echarts from 'echarts';
import 'echarts-gl';
//三维的图 需要这个 'echarts-gl'

2.2 模拟数据

数据我们可以从二维图那边借鉴一份数据,略做修改一下...

function func(x) {
  x /= 10;
  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
}
function generateData() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, func(i)]);
  }
  return data;
}

修改:将二维数组,[x,y]变成[x,y,z],x坐标不变,将二维的y坐标值变为z坐标值,新增一个y坐标值

~~data.push([i, func(i)]);~~

data.push([i,'test',func(i)]);

function func(x) {
  x /= 10;
  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
}
function generateData() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i,'test',func(i)]);
  }
  return data;
}

2.3 、 option

option = {
  grid3D: {
    boxWidth: 300,
    boxHeight: 120,
    boxDepth: 200,
    axisLine: {
      show: true,
    },
    viewControl: {
      distance: 400
    }
  },
  xAxis3D: {
    type: 'category',
    name: 'X',
    // x的label 我隐藏了=.=,要是需要可以放出来
    axisLabel: {
      show: false
    },
    splitLine: {
      show: true
    }
  },
  yAxis3D: {
    type: 'category',
    name: 'Y',
    axisLabel: {
      show: true
    }
  },
  zAxis3D: {
    type: 'value'
  },
  series: [
    {
      type: 'line3D',
      name: 'test',
      data: generateData()
    }
  ]
};

2.4 、效果

一个简单的demo就实现啦~

三、多个折线图

现实情况下，一般会有多个折线图。

修改一下=。=

function func(x) {
  x /= 10;
  return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
}
function func2(x) {
  x /= 10;
  return Math.sin(x) * 50;
}
function generateData(funtype) {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i,funtype === 1?'test1':'test2',funtype === 1?func(i):func2(i)]);
  }
  return data;
}

option = {
  grid3D: {
    boxWidth: 300,
    boxHeight: 120,
    boxDepth: 200,
    axisLine: {
      show: true,
    },
    viewControl: {
      distance: 400,
    },
  },
  xAxis3D: {
    type: "category",
    name: "X",
    axisLabel: {
      show: false,
    },
    splitLine: {
      show: true,
    },
  },
  yAxis3D: {
    type: "category",
    name: "Y",
    axisLabel: {
      show: true,
    },
  },
  zAxis3D: {
    type: "value",
  },
  series: [
    {
      type: 'line3D',
      name:'test1',
      data:generateData(1)
    },
    {
      type: 'line3D',
      name:'test2',
      data:generateData(2)
    }
  ]
};

效果如下:

四、后言

纪录一下遇到的问题~

后续如果运用到实际项目中，肯定还要做修改调整~

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。

踩坑小结：Echarts三维折线图的简单实现

一 、前言

二 、实现