vue3.0+echarts は 3 次元の縦棒グラフを実現します

cnpm i --save echarts

<テンプレート>
  <div ref="echart" class="echartDiv"></div>
</テンプレート>

'echarts' から * を echarts としてインポートします。

<テンプレート>
  <div ref="echart" class="echartDiv"></div>
</テンプレート>
 
<スクリプト>
'echarts' から * を echarts としてインポートします。
'vue' から { onMounted、toRefs、ref、reactive } をインポートします。
エクスポートデフォルト{
  設定（）{
    状態をreactive({
      xAxisData:['Haoxing', 'Yanzi', 'ドラえもん', 'Li Qiang', 'Wang Ying', 'Lao Wang'],
      y軸データ:[4,22,1,11,23,11],
      y軸データ1:[1,1,1,1,1,1],
      echart: ref(),
    })
    定数echartInit = () => {
      var myChart = echarts.init(state.echart);
      //チャートの設定項目とデータを指定する var option = {
        ツールチップ: {
          トリガー: "軸",
          軸ポインタ:
            type: "shadow", // デフォルトは直線、オプション: 'line' | 'shadow'
          },
          フォーマッタ: function(parms) {
            var str =
              パラメータ[0].軸値 +
              "</br>" +
              パラメータ[0].マーカー +
              「今日ログイン:」+
              parms[0].value + 'times'
            str を返します。
          },
 
        },
        テキストスタイル: {
          色: "#333",
        },
        色: ["#7BA9FA", "#4690FA"],
        グリッド: {
          ラベルを含む: true、
          左:「10%」、
          上:「20%」、
          下部:「10%」、
          右：「10%」、
        },
        x軸:
          タイプ:「カテゴリー」、
          データ: state.xAxisData、
          軸線: {
            線のスタイル:
              色: "#333",
            },
          },
          軸目盛り: {
            表示: 偽、
          },
          軸ラベル: {
            margin: 20, //スケールラベルと軸線の間の距離。
            テキストスタイル: {
              色: "#000",
            },
          },
        },
        y軸: {
          タイプ: "値",
          軸線: {
            表示: true、
            線のスタイル:
              色: "#B5B5B5",
            },
          },
          分割行: {
            線のスタイル:
              // 明るい色と暗い色の間隔を使用します color: ["#B5B5B5"],
              タイプ:「破線」、
              不透明度: 0.5、
            },
          },
          軸ラベル: {},
        },
        シリーズ： [{
          データ: state.yAxisData、
          スタック: "zs",
          タイプ: "バー",
          バー最大幅: "自動",
          バー幅: 60,
          アイテムスタイル: {
            色：
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              タイプ: "線形"、
              グローバル: false、
              カラーストップ: [{
                オフセット: 0,
                色: "#5EA1FF",
              },
                {
                  オフセット: 1,
                  色: "#90BEFF",
                },
              ]、
            },
          },
        },
 
          //次の3次元制御色は最初の色です{
            データ: state.yAxisData1、
            タイプ: "pictorialBar",
            バー最大幅: "20",
            シンボル:「ダイヤモンド」、
            シンボルオフセット: [0, "50%"],
            シンボルサイズ: [60, 15],
            zレベル: 2,
          },
          //上記の3次元では、制御色は2番目の色です{
            データ: state.yAxisData、
            タイプ: "pictorialBar",
            バー最大幅: "20",
            シンボル位置: "end",
            シンボル:「ダイヤモンド」、
            シンボルオフセット: [0, "-50%"],
            シンボルサイズ: [60, 12],
            zレベル: 2,
          }
        ]、
      };
      // 指定した構成項目とデータを使用してグラフを表示します。
      myChart.setOption(オプション);
    }
 
    //マウントonMounted(()=>{
      echartInit()
    })
 
    戻る {
      ...toRefs(状態)、
      echartInit
    };
  }
}
</スクリプト>
 
<style lang='scss' スコープ>
  .echartDiv{
    幅: 100%;
    高さ: 400px;
  }
</スタイル>