这张图还是我们老板亲自画出来的（nb），完了老板让我尝试把后面的面积图变成3D的效果。本来想看看网上有没有现成的结果一个都没有，甚至连参考模板都没有。花了差不多3个小时做出来了一个demo。其中思路还是得到老板给的这张图的启发：坐标轴偏移！！！
大家应该不难看出，上面三个坐标轴就是靠坐标轴偏移做出了伪3D的效果。那我的思路就是在面积图背后再新建一个坐标轴画出和前面一样的面积图，右侧再新建两个坐标轴当作侧面（可能
有些麻烦了，但思路也只能这样了）。这样就能达到伪3D图的效果。
以下就是option代码的各种配置项。
let option = {
grid: [
//正面坐标轴
{
bottom: 20,
left: 40,
right: "4.4%",
z: 3,
top: 70,
},
//背面坐标轴
{
bottom: 30,
left: 80,
right: 0,
z: 3,
top: 60,
},
//侧面坐标轴
{
bottom: 20,
left: "86.9%",
right: "4.3%",
z: 3,
top: 70,
},
],
xAxis: [
//正面x轴
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
gridIndex: 0,
},
//侧面x轴
{
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
gridIndex: 1,
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
//侧面x轴
{
type: "category",
data: ["Mon", "Tue"],
gridIndex: 2,
//隐藏坐标轴，文字，刻度
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick:{
show:false
}
},
],
yAxis: [
//正面y轴
{
type: "value",
gridIndex: 0,
splitLine: {
show: false,
},
},
//背面y轴
{
type: "value",
gridIndex: 1,
splitLine: {
show: false, //去掉网格线
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
},
axisLabel: {
show: false,
},
},
//侧面y轴
{
type: "value",
gridIndex: 2,
max: 6000,
splitLine: {
show: false, //去掉网格线
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
//正面面积图
{
name: "gao",
silent:true,
type: "line",
xAxisIndex: 0,
yAxisIndex: 0,
animation: false,
smooth: true, //面积图改成弧形状
lineStyle: {
width: 1, //外边线宽度
color: "#82E547", //外边线颜色
},
triggerLineEvent: false,
showSymbol: false, //去除面积图节点圆
areaStyle: {
//区域填充渐变颜色
opacity: 1,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#82E547", // 渐变顶部色
},
{
offset: 1,
color: "#2FE8E8", // 渐变底部色
},
],
global: false, // 缺省为 false
},
},
z: 1,
data: [2100, 2500, 3300, 3500, 4600, 4800, 4800],
},
//背面面积图
{
type: "line",
silent:true,
z: 1,
xAxisIndex: 1,
yAxisIndex: 1,
smooth: true, //面积图改成弧形状
lineStyle: {
width: 1, //外边线宽度
color: "#82E547", //外边线颜色
},
showSymbol: false, //去除面积图节点圆
areaStyle: {
//区域填充渐变颜色
opacity: 0.9,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#82E547", // 渐变顶部色
},
{
offset: 1,
color: "#2FE8E8", // 渐变底部色
},
],
global: false, // 缺省为 false
},
},
data: [2100, 2500, 3300, 3500, 4600, 4800, 4800],
},
//侧面面积图
{
type: "line",
z: 1,
silent:true,
xAxisIndex: 2,
yAxisIndex: 2,
smooth: true, //面积图改成弧形状
lineStyle: {
width: 1, //外边线宽度
color: "#82E547", //外边线颜色
},
showSymbol: false, //去除面积图节点圆
areaStyle: {
//区域填充渐变颜色
opacity: 1,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#31e9e6", // 渐变顶部色
},
{
offset: 1,
color: "#79e659", // 渐变底部色
},
],
global: false, // 缺省为 false
},
},
data: [5750, 5900],
},
//侧面面积图，因为如果光只有上面一个的画，面积图会一直延伸到x轴，这个面积图形成一个斜角以达到3d效果
{
type: "line",
z: 1,
xAxisIndex: 2,
yAxisIndex: 2,
smooth: true, //面积图改成弧形状
lineStyle: {
width: 1, //外边线宽度
color: "#82E547", //外边线颜色
},
showSymbol: false, //去除面积图节点圆
areaStyle: {
//区域填充渐变颜色
opacity: 0.9,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#ffff", // 渐变顶部色
},
{
offset: 1,
color: "#ffff", // 渐变底部色
},
],
global: false, // 缺省为 false
},
},
data: [0, 150],
},
],
};为何要第四个坐标轴？作用如下图所示
未设置：
设置了：
这个坐标轴还是很关键的。
在这次研究过程中我还发现了一个非常重要的配置项：silent：true。！！！
配置了这个鼠标移入面积图就不会有高亮和层级提高（本来鼠标移入时候，背面的面积图会单独显示到前面来，这不就暴露了嘛）。其实画图没多久，找这个属性给我找了半天，网上各种曲线方法，还没有效果（大无语）。
其实我这个方法还是比较麻烦的，毕竟为了一个面积图要画出4个坐标轴，而且坐标轴的位置还要微调到正好互相拼接的效果，这还只是静态效果，如果后期加入动态数据，还要计算各个坐标轴的值。
我也只是给大家提供思路，希望可以帮到大家。
如果大家有啥现成的方法，或者讨论、思路。欢迎在评论区留言。