《ECharts》伪立体柱状图

最新推荐文章于 2025-04-25 16:08:33 发布

一首弦曲献仙音

最新推荐文章于 2025-04-25 16:08:33 发布

阅读量996

点赞数

CC 4.0 BY-SA版权

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42660374/article/details/129589283

<div id="barEcharts" style="width: 500px;height:400px;"></div>

init() {
  this.charts = echarts.init(document.getElementById('barEcharts'));
  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint
      const c0 = [shape.x, shape.y]
      const c1 = [shape.x - 13, shape.y - 13]
      const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
      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({
    shape: {
      x: 0,
      y: 0
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint
      const c1 = [shape.x, shape.y]
      const c2 = [xAxisPoint[0], xAxisPoint[1]]
      const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
      const