VueはEchartsを使用して3次元棒グラフを実装します

<テンプレート>
  <div class="roadnum-all" ref="roadnumall">
    <div id="道路番号" ref="dom"></div>
  </div>
</テンプレート>

.roadnum-all {
  幅: 100%;
  height: 100%; /*親コンテナを埋める*/
}

import echarts from 'echarts' // Echarts をインポート

エクスポートデフォルト{
  名前: "ltzzt",
  データ（） {
    戻る {
      データ： []、
      DOM: ヌル
    }
  },
  マウント() {
    this.$nextTick(() => { // コンテナーを埋めるようにアイコンの幅と高さを指定します document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
      これを描画します。
    })
  },
  メソッド: {
    // 描く（） {
      // ネットワークリクエストはバックエンドからデータを取得するふりをする this.data = [
        { 名前: '京哈高速', 値: 10 },
        { 名前: '京哈高速1', 値: 20 },
        { 名前: '京哈高速2', 値: 30 },
        { 名前: '京哈高速3', 値: 40 },
        { 名前: '京哈高速4', 値: 50 },
        { 名前: '京哈高速5', 値: 60 },
        { 名前: '京哈高速6', 値: 70 },
        { 名前: '京哈高速7', 値: 80 },
        { 名前: '京哈高速8', 値: 90 },
        { 名前: '京哈高速9', 値: 100 },
        { 名前: '京哈高速10', 値: 110 },
        { 名前: '京哈高速11'、値: 120 }
      ];
      // 軸表示とデータの配列 let xAxisText = [];
      データリストを [] にします。
      this.data.forEach(item => {
        xAxisText.push(アイテム名);
        dataList.push(アイテム.値)
      })
      // ここからカスタムグラフィックの作成を開始します - 直方体の前面 var MyCubeRect = echarts.graphic.extendShape({
        形：
          x: 0,
          y: 0,
          width: 180, // 直方体の幅 zWidth: 8, // 影の角の幅 zHeight: 4 // 影の角の高さ },
        ビルドパス: 関数 (ctx, シェイプ) {
          console.log(ctx, 形状);
          定数 api = shape.api;
          xAxisPoint を api.coord([shape.xValue, 0]) に設定します。
          定数 p0 = [shape.x, shape.y];
          定数 p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          定数 p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          定数p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
          定数p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];

          ctx.moveTo(p0[0], p0[1]); //0
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p2[0], p2[1]); //2
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.lineTo(p0[0], p0[1]); //0
          ctx.closePath();
        }
      })

      // 2 番目のカスタム シェイプ (直方体の上面と側面) を作成します var MyCubeShadow = echarts.graphic.extendShape({
        形：
          x: 0,
          y: 0,
          幅: 180,
          z幅: 8,
          高さ: 4
        },
        ビルドパス: 関数 (ctx, シェイプ) {
          定数 api = shape.api;
          xAxisPoint を api.coord([shape.xValue, 0]) に設定します。
          定数 p0 = [shape.x, shape.y];
          定数 p1 = [shape.x - shape.width / xAxisText.length, shape.y];
          定数 p4 = [shape.x + shape.width / xAxisText.length, shape.y];
          定数 p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth、shape.y - shape.zHeight];
          定数 p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth、shape.y - shape.zHeight];
          定数p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
          定数p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth、xAxisPoint[1] - shape.zHeight];

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p3[0], p3[1]); //3
          ctx.lineTo(p5[0], p5[1]); //5
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p4[0], p4[1]); //4

          ctx.moveTo(p4[0], p4[1]); //4
          ctx.lineTo(p6[0], p6[1]); //6
          ctx.lineTo(p7[0], p7[1]); //7
          ctx.lineTo(p1[0], p1[1]); //1
          ctx.lineTo(p4[0], p4[1]); //4
          ctx.closePath();
        }
      });
      echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
      echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
      const オプション = {
        色: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
        タイトル：
          テキスト: 「検証ルートランキング」
          残り: 20,
          トップ: 20
        },
        伝説： {
          表示: true、
          トップ: 25
        },
        グリッド: {
          左: '3%'、
          右: '4%'、
          上: '15%'、
          下: '3%'、
          ラベルを含む: true
        },
        x軸:
          タイプ: 'カテゴリ',
          データ: xAxisText、
          境界ギャップ: true、
          間隔: 0,
          軸ラベル: {
            色: '#333',
            // x軸のテキスト方向の垂直間隔を0にする
            フォーマッタ: 関数 (値) {
              戻り値.split('').join('\n')
            }
          }
        },
        y軸: {
          タイプ: '値'
        },
        ツールチップ: {
          トリガー: '軸'、
          軸ポインタ:
            タイプ: '影'
          },
        },
        シリーズ： [{
          名前: '回数'、
          タイプ: 'カスタム'、
          レンダリングアイテム: (パラメータ、API) => {
            location = api.coord([api.value(0), api.value(1)]); とします。
            戻る {
              タイプ: 'グループ'、
              子供たち： [{
                タイプ: 'MyCubeRect',
                形：
                  アピ、
                  x値: api.value(0)、
                  y値: api.value(1)、
                  x: 場所[0],
                  y: 場所[1]
                },
                style: api.style(), // api.style()——元のスタイルを継承します}, {
                タイプ: 'MyCubeShadow',
                形：
                  アピ、
                  x値: api.value(0)、
                  y値: api.value(1)、
                  x: 場所[0],
                  y: 場所[1]
                },
                スタイル: {
                  塗りつぶし: api.style(),
                  text: '' // 元のスタイルを継承し、ラベルをクリアします。クリアしないと、生成されたグラフに 2 つの重なり合ったラベルが表示されます。
                }
              }]
            }
          },
          スタック: '合計金額'、
          ラベル: {
            表示: true、
            位置: 'トップ'、
            色: '#333',
            フォーマッタ: `{c} 回`、
            フォントサイズ: 16,
            距離: 15
          },
          アイテムスタイル: {
            普通： {
              色: (パラメータ) => {
                // 各列の色を異なるものにする let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'];
                （params.dataIndex + 1 <= colorList.length）の場合{
                  colorList[params.dataIndex]を返す
                } それ以外 {
                  // 列数がカラー配列を超える場合は最初からやり直します。return colorList[params.dataIndex - colorList.length]
                }
              }
            }
          },
          データ: データリスト
        }]
      };
      this.dom = echarts.init(this.$refs.dom);
      this.dom.setOption(オプション、true)
      window.addEventListener("サイズ変更", () => {
        document.getElementById('roadnum') の場合、 this.$refs.roadnumall になります。
          document.getElementById('roadnum').removeAttribute('_echarts_instance_');
          document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
          document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
          DOM のサイズを変更します。
        }
      });
    }
  }
}