echarts使用自定义图形实现3D柱状图

最新推荐文章于 2024-11-25 08:03:02 发布

Li_na_na01

最新推荐文章于 2024-11-25 08:03:02 发布

阅读量1.1k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： echarts 3d 前端

本文链接：https://blog.csdn.net/Li_na_na01/article/details/140322042

先看下效果吧

custom3dBar

实现思路

使用graphic创建并注册自定义图形。根据每组的数据值，得到一个对应的点，从点出发用canvas绘制一组图形，分别为
顶部的菱形
top

const CubeTop = echarts.graphic.extendShape({
     
     
  buildPath: function (ctx, shape) {
     
     
     const c1 = [shape.x, shape.y]; // 下
     const c2 = [shape.x + 9, shape.y - 7]; // 右
     const c3 = [shape.x, shape.y - 12]; // 上
     const c4 = [shape.x - 9, shape.y - 7]; // 左
     ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
  }
});

左侧的四边形

const CubeLeft = echarts.graphic.extendShape({
     
     
   buildPath: function (ctx, shape) {
     
     
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y]; // 右上
      const c1 = [shape.x - 9, shape.y - 7]; //左上
      const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 6]; // 左下
      const c3 = [xAxisPoint[0], xAxisPoint[1]]; // 右下
      ctx
          .moveTo(c0[0], c0[1])
          .lineTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .closePath();
   }
});

右侧的四边形

const CubeRight = echarts.graphic.extendShape({
     
     
   buildPath: function (ctx, shape) {
     
     
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y]; // 左上
      const c2 = [xAxisPoint