【Echarts】实现长方体形状的立体柱状图

最新推荐文章于 2024-06-02 12:02:03 发布

月关不想加班

最新推荐文章于 2024-06-02 12:02:03 发布

阅读量301

点赞数 5

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/cn_jz9527/article/details/137045582

版权

本文详细介绍了如何使用ECharts库创建自定义图形，如长方体侧面，通过API控制位置和渐变填充，并展示了如何在图表中应用这些图形以展示数据。

摘要由CSDN通过智能技术生成

先上效果图

话不多说上参数

import * as echarts from 'echarts';

//长方体左侧面
const leftRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 19, //柱状图宽
      zWidth: 8, //阴影折角宽
      zHeight: 4 //阴影折角高
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
      const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
      const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
      const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2, shape.y];
      ctx.moveTo(p0[0], p0[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.lineTo(p0[0], p0[1]);
      ctx.closePath();
    }
  });

//长方体右侧面以及顶部图形
const rightRect = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
      width: 18,
      zWidth: 15,
      zHeight: 8
    },
    buildPath: function (ctx, shape) {
      const api = shape.api;
      const xAxisPoint = api.coord([shape.xValue, 0]);
      const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
      const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
      const p4 = [shape.x + shape.width / 2, shape.y];
      const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
      const p6 = [
        shape.x + shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight / 2
      ];
      const p7 = [
        shape.x - shape.width / 2 + shape.zWidth,
        shape.y - shape.zHeight
      ];
      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p5[0], p5[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.moveTo(p4[0], p4[1]);
      ctx.lineTo(p6[0], p6[1]);
      ctx.lineTo(p7[0], p7[1]);
      ctx.lineTo(p1[0], p1[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    }
  });


 // 注册图形元素
  echarts.graphic.registerShape("leftRect", leftRect);
  echarts.graphic.registerShape("rightRect", rightRect);


//最后定义options
const options = {
    xAxis: {
      type: "category",
      data: ['111', '222', '333'],
      axisLabel: {
        textStyle: {
          color: "#AEC3DC",
          fontSize: "14px",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#8FABBF",
          fontSize: "14px",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: ["rgba(255,255,255,0.1)"],
        },
        show: true,
      },
    },
    grid: {
      left: "40px", // 左侧内边距
      right: 0, // 右侧内边距
      bottom: "50px", // 底部内边距
      top: "30px",
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const index = 0;
          let location = api.coord([api.value(0) + index, api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "leftRect",
                shape: {
                  api,
                  xValue: api.value(0) + index,
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#2DAEFF",
                    },
                    {
                      offset: 1,
                      color: "rgba(1,219,243,0)",
                    },
                  ]),
                },
              },
              {
                type: "rightRect",
                shape: {
                  api,
                  xValue: api.value(0) + index,
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#1C4667",
                    },
                    {
                      offset: 1,
                      color: "rgba(1,219,243,0)",
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: [1,2,3],
      },
    ],
}