ehcarts立方柱体柱形图

最新推荐文章于 2024-04-08 10:29:56 发布

潘小盒

最新推荐文章于 2024-04-08 10:29:56 发布

阅读量327

点赞数

分类专栏： echarts图表集文章标签： echarts

本文链接：https://blog.csdn.net/weixin_52054631/article/details/112987001

版权

本文展示了如何使用ECharts库创建具有立方体效果的柱形图，通过代码示例详细解释了实现过程。

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

先上效果图：
预览效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #chart{
    
      width: 300px;
      height: 300px;
      background-color: #1a1a54;
    }
  </style>
</head>
<body>
  <div id="chart"></div>

  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
  <script>
    let chart = echarts.init(document.getElementById('chart'));
    const CubeLeft = echarts.graphic.extendShape({
    
        shape: {
    
            x: 0,
            y: 0
        },
        buildPath: function(ctx, shape) {
    
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x+1, shape.y]
            const c1 = [shape.x - 18, shape.y - 9]
            const c2 = [xAxisPoint[0] - 18, xAxisPoint[1] - 9]
            const c3 = [xAxisPoint[0]+1, xAxisPoint[1]]
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
        }
    }