echarts的伪3D波浪图

这张图还是我们老板亲自画出来的(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个坐标轴,而且坐标轴的位置还要微调到正好互相拼接的效果,这还只是静态效果,如果后期加入动态数据,还要计算各个坐标轴的值。

我也只是给大家提供思路,希望可以帮到大家。

如果大家有啥现成的方法,或者讨论、思路。欢迎在评论区留言。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 ECharts 实现顶部为波浪的柱状的 demo: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 柱状示例 - 顶部波浪</title> <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定表的配置项和数据 var option = { title: { text: '顶部为波浪的柱状' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10], itemStyle: { normal: { barBorderRadius: [5, 5, 0, 0] } }, markLine: { silent: true, symbol: 'none', label: { show: false }, data: [ { yAxis: 80 } ] }, markArea: { silent: true, itemStyle: { color: '#F2F6FC' }, data: [ [ { name: '波浪区域', xAxis: 'min', yAxis: 0 }, { xAxis: 'max', yAxis: 80 } ] ] }, markPoint: { symbol: 'circle', symbolSize: 10, label: { show: false }, data: [ { name: '波峰', xAxis: 'B', yAxis: 50 }, { name: '波谷', xAxis: 'D', yAxis: 30 } ] } }] }; // 使用刚指定的配置项和数据显示表。 myChart.setOption(option); </script> </body> </html> ``` 在这个 demo 中,我们使用了 ECharts 提供的 `markLine`、`markArea` 和 `markPoint` 等标注组件,通过配置这些组件的参数,实现了顶部为波浪的柱状效果。 其中,`markLine` 组件用来绘制表中的线条,`markArea` 组件用来绘制表中的区域,`markPoint` 组件用来绘制表中的点。通过这些组件的配合,我们可以实现各种复杂的表效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值