echarts3D柱状图

最新推荐文章于 2025-09-08 22:09:36 发布

原创最新推荐文章于 2025-09-08 22:09:36 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #3d #前端

文章分享了如何在Echarts官网没有3D柱状图案例的情况下，作者自行编写HTML和JavaScript代码实现了一个3D柱状图，并详细介绍了图形元素的定制和配置选项。

由于 echarts 官网并没有 3d柱状图的案例，所以我自己写了一个在项目中用到的

内容

由于 echarts 官网并没有 3d柱状图的案例，所以我自己写了一个在项目中用到的

效果图

在这里插入图片描述
颜色内容等都可以参考 echarts 官网进行自定义调整

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D柱状图</title>
  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
  <div style="width: 100%;height: 700px;background-color: black;" id="echart"></div>
</body>
<script type="text/javascript" src="index.js"></script>
</html>

js 代码

 var xData = ['柱子1','柱子2','柱子3','柱子4','柱子5'];
  var yData = [120,220,320,123,223];
  const echart = echarts.init(document.getElementById("echart"));
  
  function getOptionLtZzt(xData,yData,unit) {
    var option = {
        title: {
            text: '单位：'+unit,
            textStyle:{
                color: 'rgba(255,255,255,.8)',
                fontSize: 12
            }
        },
        toolbox: { // ！！！
            show: true,
            feature: {
                saveAsImage: {
                    name: name,
                    title: "保存为图片",
                    icon: 'path://M 384 448 V 110 h 230 v 310 h 180 l -300 324 l -324 -324 h 180 Z m -170 450 h 600 v 60 H 140 v -60 Z',
                    iconStyle: {
                        color: '#fff'
                    }
                }
            }
        },
        graphic: [
            {
                type: 'group',
                // rotation: Math.PI / 2,
                bounding: 'raw',
                right:"center",
                top: 20,
                z: 100,
                children: [
                    {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        z: 100,
                        style: {
                            fill: '#253042',
                            text: name,
                            font: 'bold 16px sans-serif'
                        }
                    }
                ]
            },
        ],
        tooltip: {
            show: true,
            trigger: "item",
            formatter:'{a} : {c}'
        },
        grid: {
            top: "40",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisTick: {
                show: false
            },
            axisLabel:{
                interval:0,
                rotate: 0,
                formatter: function (value) {
                    if (value.length > 3) {
                        return `${value.slice(0, 3)}...`;
                    }
                    return value;
                }
            },
            data: xData
        },
        // legend: {
        //     data: getlegendData(x),
        //     right: '15',
        //     top: '18',
        //     icon: 'rect',
        //     itemHeight: 10,
        //     itemWidth: 10,
        //     textStyle: {
        //         color: '#000'
        //     }
        // },
        yAxis: {
            type: 'value',
            //分格线
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,.2)'
                }
            }
        },
        series: getSeriesData(yData)
    };
    return option;
}

// 定义柱状图左侧图形元素
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();
  }
});

function getSeriesData(seriesData) {
  const data = [];
  seriesData.forEach((item, index) => {
      data.push(
              {
                  type: 'custom',
                  name: xData[index],
                  renderItem: function (params, api) {
                      return getRenderItem(params, api);
                  },
                  data: item.toString().split(),
                  itemStyle: {
                      color: () => {
                          return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
                      },
                  },
              }
      )
  })
  return data
}

function getRenderItem(params, api) {
  const index = params.seriesIndex;
  let location = api.coord([api.value(0) + index, api.value(1)]);
  var extent = api.size([0, 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: api.style()
          },
          {
              type: 'rightRect',
              shape: {
                  api,
                  xValue: api.value(0) + index,
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1]
              },
              style: api.style()
          }
      ]
  };
}

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


  const colors = [
    [
        { offset: 0, color: 'rgba(109, 213, 250, 1)' },
        { offset: 1, color: 'rgba(109, 213, 250, 0.58)' },
    ],
    [
        { offset: 0, color: 'rgba(34, 193, 195, 1)' },
        { offset: 1, color: 'rgba(34, 193, 195, 0.58)' },
    ],
    [
        { offset: 0, color: 'rgba(201, 214, 255, 1)' },
        { offset: 1, color: 'rgba(201, 214, 255, 0.58)' },
    ],
    [
      { offset: 0, color: 'rgba(174, 182, 255, 1)' },
      { offset: 1, color: 'rgba(174, 182, 255, 0.58)' },
    ],
    [
      { offset: 0, color: 'rgba(185,119, 255, 1)' },
      { offset: 1, color: 'rgba(185, 119, 255, 0.58)' },
    ]
  ];
  echart.setOption(getOptionLtZzt(xData,yData,"个"));