通过echarts.graphic.extendShape方法实现立方体图表

1.效果图

2.echarts.graphic.extendShape

    echarts.graphic.extendShape是ECharts中用于扩展自定义图形形状的方法。通过调用echarts.graphic.extendShape方法，您可以定义并创建新的自定义图形形状，以满足特定的数据可视化需求。

1. 参数：

   • 传入一个对象作为参数，对象包含了自定义图形形状的属性和方法。
   • 在对象中，通常包含shape属性用于定义图形的形状属性，以及buildPath方法用于定义绘制图形路径的逻辑。

2. 使用方法：

   • 在调用echarts.graphic.extendShape时，传入一个对象，对象中包含了自定义图形形状的属性和方法。
   • 在定义自定义图形形状时，通常需要指定图形的形状属性（如坐标、大小等）和绘制路径的逻辑。

3.代码

<template>
  <div class="main">
    <div ref="echarts1" id="echarts1"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    inheritAttrs: false,
    mounted() {
      let x = [0,1,2,3]
      let y= [100,200,300,200]
      this.getEcharts(x,y);
    },
    methods: {
      getEcharts(xData, yData) {
        let line = this.$refs.echarts1;
        let echarts = this.$echarts.init(line);
        let fontSize = (window.innerHeight / 1080) * 100 * 0.12;
        // 绘制左侧面
        const wid = 15;
        const w1 = Math.sin(Math.PI / 6) * wid; //4
        const w2 = Math.sin(Math.PI / 3) * wid; // 6.8
        const snapHeight = wid / 2;
        const CubeLeft = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - w2, shape.y];
            const c2 = [shape.x - w2, xAxisPoint[1]];
            const c3 = [shape.x, 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 = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x, xAxisPoint[1]];
            const c3 = [shape.x + w1, xAxisPoint[1] - w2 + snapHeight];
            const c4 = [shape.x + w1, shape.y - w2 + snapHeight];
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
          },
        });
        // 绘制顶面
        const CubeTop = this.$echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            //
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + w1, shape.y - w2 + snapHeight]; //右点
            const c3 = [shape.x - w2 + w1, shape.y - w2 + snapHeight];
            const c4 = [shape.x - w2, shape.y];
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath();
          },
        });
        // 三个面图形
        this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
        this.$echarts.graphic.registerShape("CubeRight", CubeRight);
        this.$echarts.graphic.registerShape("CubeTop", CubeTop);
        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(9, 24, 48, 0.5)",
            borderColor: "rgba(75, 253, 238, 0.4)",
            textStyle: {
              color: "#CFE3FC",
            },
            borderWidth: 1,
          },
          grid: {
            top: "10%",
            left: "5%",
            bottom: "5%",
            right: "5%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3e6f8e",
                width: 1,
              },
            },
            axisTick: {
              show: false,
              length: 9,
              alignWithLabel: false,
              lineStyle: {
                color: "#AAA",
              },
            },
            axisLabel: {
              fontSize: fontSize,
              margin: 10,
              color: "white",
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#ffffff",
                opacity: 0.2,
                width: 1,
              },
            },
          },
          yAxis: {
            type: "value",
            nameTextStyle: {
              color: "white",
              fontSize: fontSize,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3e6f8e",
                width: 1,
              },
            },
            axiosTick: {
              show: false,
            },
            axisLabel: {
              color: "white",
              fontSize: fontSize,
              margin: 10,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#ffffff",
                opacity: 0.2,
                width: 1,
              },
            },
            nameGap: 20,
          },
          series: [
            {
              type: "bar",
              tooltip: {
                show: false,
              },
              itemStyle: {
                color: "transparent",
              },
              data: yData,
            },
            {
              type: "custom",
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)]);
                location[0] = location[0] + wid * 0;
                const xlocation = api.coord([api.value(0), 0]);
                xlocation[0] = xlocation[0] + wid * 0;
                return {
                  type: "group",
                  children: [
                    {
                      type: "CubeLeft",
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: xlocation,
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#059de6",
                          },
                          {
                            offset: 1,
                            color: "#059de6",
                          },
                        ]),
                      },
                    },
                    {
                      type: "CubeRight",
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: xlocation,
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#254193",
                          },
                          {
                            offset: 1,
                            color: "#254193",
                          },
                        ]),
                      },
                    },
                    {
                      type: "CubeTop",
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: xlocation,
                      },
                      style: {
                        fill: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: "#17e0fe",
                          },
                          {
                            offset: 1,
                            color: "#17e0fe",
                          },
                        ]),
                      },
                    },
                  ],
                };
              },
              color: "blue",
              data: yData,
            },
          ],
        };
        echarts.setOption(option);
        window.addEventListener("resize", function () {
          echarts.resize();
        });
      },
    },
  };
</script>
<style lang="less">
  #echarts1 {
  width: 100%;
  height: 21vh;
}
.main{
  width: 100%;
  height: 100%;
}
</style>