Vue+Echart 棒グラフで疫病データ統計を実現

npm インストール echarts --save

'vue' から Vue をインポートします
import echarts from 'echarts' //エラーが発生する可能性があるので注意が必要です。次のメソッドを使用できます。Vue.prototype.$echarts = echarts

'vue' から Vue をインポートします
import * as echarts from 'echarts' //違いはここにあります Vue.prototype.$echarts = echarts

 プラグイン: ['~plugins/echarts']
 //これを追加するためだけに書いたので、ここにこれだけがあるというわけではありません//「@/plugins/echarts」という形式も使用できますが、ほぼ同じです

<テンプレート>
  <div id="echarts">
    <div id="myChart"></div> 
  </div>
</テンプレート>
<script type="text/javascript">
エクスポートデフォルト{
  名前:「Echarts」、
  データ（） {
    戻る {};
  },
  メソッド: {
      echartsInit() { // チャートを作成するメソッドを定義します。let myChart = this.$echarts.init(document.getElementById("myChart"));
      
      myChart.setOption({
        タイトル：
          テキスト: 「echarts の棒グラフで伝染病の統計を理解」
          テキスト配置: "自動"、
          左: '中央'
        },
        ツールチップ: {},
        // 州（水平軸）
        x軸:
          データ: ['月', '火', '水', '木', '金', '土', '日']
          //データ: this.areaName, //これは最終データであり、このタイプを使用せずにテストを開始できることを示しています: "category",
          軸ラベル: {
            rotate: -45, // 30 度回転します。そうしないと、水平軸が完全に表示されません。show: true, // このコード行は、x 軸のテキストを表示するかどうかを制御します。},
        },
        y軸: {},
        // 確認された番号シリーズ: [
          {
            名前:「確認された症例の総数」、
            タイプ: "バー",
            //データ: this.areaConfirm, //これは最終データであり、このデータがなくてもテストを開始できることを示しています: [120, 200, 150, 80, 70, 110, 130],
          },
        ]、
      });
    },
  }
  //mounted はテンプレートが HTML にレンダリングされた後、通常は初期化ページが完了した後に呼び出され、その後 HTML DOM ノードに対していくつかの必要な操作が実行されます。mounted() {
  	this.echartsInit();
  },
  }
</スクリプト>
<スタイルスコープ>
	#myChart {
	  幅: 100%;
	  高さ: 300px;
	  左マージン: 自動;
	  右マージン: 自動;
	}
</スタイル>

npm で axios をインストールします。

モジュール.エクスポート = {
//すべてのモジュールではなく、追加する部分を示します: ["@nuxtjs/axios"],

  アクシオス:
    プロキシ: true
  },

  プロキシ： {
    '/api/': {
    target: 'https://view.inews.qq.com', //このウェブサイトはオープンソースであり、データをリクエストできます。pathRewrite: {
    '^/api/': '/',
    変更元: true
    }
   }
  },
}

    取得データ() {
      this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({データ}) => {
        //console.log(JSON.parse(data.data.replace('\\"', "'")));
        this.area = JSON.parse(
          data.data.replace('\\"', "'")
        ).areaTree[0].children;
        // エリア名 this.areaName = this.area.map((o) => {
          o.name を返します。
        });
        //確認された症例の総数 this.areaConfirm = this.area.map((o) => {
          o.total.confirm を返します。
        });
        console.log(this.areaConfirm);
        // 現在の感染者数 hh 結局使わなかったようです。必要なら参照してください this.areaNowConfirm = this.area.map((o) => {
          o.total.nowConfirm を返します。
        });
        this.echartsInit();
      });
    },

<テンプレート>
  <div id="echarts">
    <div id="myChart"></div>
  </div>
</テンプレート>
<script type="text/javascript">
エクスポートデフォルト{
  名前:「Echarts」、
  データ（） {
    戻る {
      エリア： []、
      エリア名: [],
      エリア確認: [],
      エリア現在確認: [],
    };
  },
  
  メソッド: {
    取得データ() {
      this.$axios.get(`/api/g2/getOnsInfo?name=disease_h5`).then(({データ}) => {
        console.log(JSON.parse(data.data.replace('\\"', "'")));
        this.area = JSON.parse(
          data.data.replace('\\"', "'")
        ).areaTree[0].children;
        // エリア名 this.areaName = this.area.map((o) => {
          o.name を返します。
        });
        //確認された症例の総数 this.areaConfirm = this.area.map((o) => {
          o.total.confirm を返します。
        });
        console.log(this.areaConfirm);
        // 現在確認されている症例 this.areaNowConfirm = this.area.map((o) => {
          o.total.nowConfirm を返します。
        });
        this.echartsInit();
      });
    },
    echartsInit() {
      myChart を this.$echarts.init(document.getElementById("myChart")) とします。
      myChart.setOption({
        タイトル：
          テキスト: 「echarts の棒グラフで伝染病の統計を理解」
          テキスト配置: "自動"、
          左: '中央'
        },
        ツールチップ: {},
        // 州 xAxis: {
          データ: this.areaName、
          タイプ:「カテゴリー」、
          軸ラベル: {
            rotate: -45, // 30 度回転 show: true, // このコード行は、x 軸上のテキストを表示するかどうかを制御します},
        },
        y軸: {},
        // 確認された番号シリーズ: [
          {
            名前:「確認された症例の総数」、
            タイプ: "バー",
            データ: this.areaConfirm、
          },
        ]、
      });
    },
  },
  マウント() {
    データの取得
    this.echartsInit();
  },
};
</スクリプト>
<スタイルスコープ>
#myChart {
  幅: 100%;
  高さ: 300px;
  左マージン: 自動;
  右マージン: 自動;
}
</スタイル>