Vueはechartsに基づいて3次元の縦棒グラフを実装します

レジストリ（）{
      MyCubeRect = this.$echarts.graphic.extendShape({
        形：
          x: 0,
          y: 0,
          幅: 20,
          z幅: 8,
          高さ: 4
        },
        ビルドパス: 関数 (ctx, シェイプ) {
          定数api = shape.api
          定数 xAxisPoint = api.coord([shape.xValue, 0])
          定数 p0 = [形状.x, 形状.y]
          定数 p1 = [shape.x - shape.width / 2, shape.y]
          定数 p4 = [shape.x + shape.width / 2, shape.y]
          定数p2 = [shape.x - shape.width / 2, xAxisPoint[1]]
          定数p3 = [shape.x + shape.width / 2, xAxisPoint[1]]

          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()
        }
      })
      MyCubeShadow = this.$echarts.graphic.extendShape({
        形：
          x: 0,
          y: 0,
          幅: 20,
          z幅: 8,
          高さ: 4
        },
        ビルドパス: 関数 (ctx, シェイプ) {
          定数api = shape.api
          定数 xAxisPoint = api.coord([shape.xValue, 0])
          定数 p1 = [shape.x - shape.width / 2, shape.y]
          定数 p4 = [shape.x + shape.width / 2, shape.y]
          定数 p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
          定数 p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
          定数p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
          定数 p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint[1] - 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()
        }
      })
      this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
      this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
    }

バーチャートオプション: {
        ツールチップ: {
          トリガー: '軸'、
          軸ポインタ:
            タイプ: 'クロス'、
            ラベル: {
              背景色: '#6a7985'
            }
          }
        },
        グリッド: {
          ラベルを含む: true、
          上: '30px'、
          下: '0px'、
          左: '0px'
        },
        x軸:
          タイプ: 'カテゴリ',
          軸ラベル: {
            間隔: 0,
            フォントサイズ: フォントサイズ(12)
          },
          軸線: {
            表示: 偽、
            線のスタイル:
              色: '#98b9c5'
            }
          },
          data: [] // バックエンド js を通じて渡されるデータ},
        y軸: {
          タイプ: '値',
          軸ラベル: {
            フォントサイズ: フォントサイズ(12)
          },
          軸線: {
            表示: 偽、
            線のスタイル:
              色: '#98b9c5'
            }
          },
          分割行: {
            線のスタイル:
              色: '#3a586a',
              タイプ: '破線'
            }
          }
        },
        シリーズ： [{
          名前:「単位面積あたりのエネルギー消費量」
          タイプ: 'カスタム'、
          レンダリングアイテム: (パラメータ、API) => {
            location = api.coord([api.value(0), api.value(1)]) とします。
            戻る {
              タイプ: 'グループ'、
              子供たち： [{
                タイプ: 'MyCubeRect',
                形：
                  アピ、
                  x値: api.value(0) - 0.5、
                  y値: api.value(1)、
                  x: 場所[0],
                  y: 場所[1]
                },
                スタイル: api.style()
              },
              {
                タイプ: 'MyCubeShadow',
                形：
                  アピ、
                  x値: api.value(0) - 0.5、
                  y値: api.value(1)、
                  x: 場所[0],
                  y: 場所[1]
                },
                スタイル: {
                  塗りつぶし: api.style(),
                  文章： ''
                }
              }]
            }
          },
          スタック: 「単位面積あたりのエネルギー消費量」、
          ラベル: {
            表示: true、
            位置: 'トップ'、
            フォーマッタ: '{c}',
            テキストスタイル: {
              フォントサイズ: フォントサイズ(12)
              色: '#fff',
              配置: '中央'
            }
          },
          アイテムスタイル: {
            色: 新しい this.$echarts.graphic.LinearGradient(
              0、0、0、1、
              [
                { オフセット: 0、色: '#b1950d' },
                { オフセット: 0.5、色: '#aea20d' },
                { オフセット: 1、色: '#a5aa12' }
              ]
            ）
          },
          data: [] //バックエンドから渡されるデータ}]
      }

バーチャートを生成する() {
      vm = this とします
      if (this.$refs['uintEnergyConsume']) { //this.$refs は生成されたグラフィック領域の参照値です this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)
        this.$echarts.graphic.registerShape('MyCubeShadow', this.MyCubeShadow)
        this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])
        this.barChart.setOption(this.barChartOption、false、true)
        $(window).resize(function () { //画面の適応 vm.handleResize()
        })
      }
    }

<div ref="uintEnergyConsume" id="uintEnergyConsume" class="chart-container" 
 style="width: 100%;" element-loading-text="読み込み中..."></div>
</div>