Springboot は、vue+echarts のフロントエンドとバックエンドのインタラクションを使用して、動的なドーナツ チャートを実現します。

Springboot は、vue+echarts のフロントエンドとバックエンドのインタラクションを使用して、動的なドーナツ チャートを実現します。

序文

プロジェクトに取り組んでいるとき、データを表示するために統計グラフが必要になることがよくあります。Web 開発者として、統計グラフを実装できることは必須のスキルです。動的な円グラフを実装する方法を紹介します。

1. 環境設定

1.1 achartsをインストールする

//npmは同じです cnpm install echarts --save

1.2 グローバル参照

main.js での設定

//echarts の紹介
'echarts' から echarts をインポートします
//コンポーネントを登録する Vue.prototype.$echarts = echarts

コンポーネントをグローバルに登録したら、実際に作業に取り掛かりましょう。最初のステップはドーナツ チャートを描くことです。まず結果の写真です:

ここに画像の説明を挿入

2. ドーナツチャートのフロントエンド実装

2.1 まずVueページにレンダリングボックスを追加する

<テンプレート>
  <div class="test2" style="width:600px;height:400px;">
      <div id="myChart" style="width:100%;height:278px;float:left;"></div>
  </div>
</テンプレート>

2.2 フロントエンドロジックの実装

echartの紹介

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

注意: ここには大きな落とし穴があります。echarts のより高いバージョンをインストールする場合は、私の指示に従う必要があります。 'echarts' から echarts をインポートします。インターネット上の多くの人がこれを共有していますが、これにより init 関数の初期化でエラーが発生します。

<スクリプト>
     'echarts' から * を echarts としてインポートします
     エクスポートデフォルト{
       名前: 'test2',
       データ () {
         戻る {
         クエリ情報: {
         クエリ: "",
         ページ番号: 1,
         pageSize: 4, //バックエンドは4つのデータカテゴリを要求します。複数ある場合は、このパラメータを変更します},
       クエリ情報: {
         クエリ: "",
         ページ番号: 1,
         ページサイズ: 100,
       },
           マイチャート: ''、
           意見データ2:
           
           {"itemStyle":"#3F8FFF","name":"脅威攻撃ログ","value":200},
           {"itemStyle":"#6DC8EC","name":"監査 URL 例外","value":388},  
           {"itemStyle":"#1FC48D","name":"通常のネットワークログ","value":5287},         
           {"itemStyle":"red","name":"トラフィックログ異常","value":320}      
           ]
         }
       },
       マウント: 関数 () {
          この.drawLine();

       },
     
       メソッド: {
          非同期描画ライン() {
              // 投稿リクエストを呼び出す /* const { data: res } = await this.$http.get("alldate", {
        パラメータ: this.queryInfo
      });
      res.flag != "成功" の場合 {
        これを返してください。$message.error("データの取得に失敗しました!!!");
      }

      コンソール.log(res.フラグ)
       this.opinionData2 = res.opinionData2; // 返されたデータを割り当てる*/
           this.myChart = echarts.init(document.getElementById('myChart'))
           this.myChart.setOption({
             タイトル:
               text: 'ネットワーク ログ異常トラフィック分析', // メイン タイトル subtext: '', // サブタイトル x: 'left' // x 軸の配置},
             グリッド: { ラベルを含む: true },
             ツールチップ: {
               トリガー: 'アイテム',
               フォーマッタ: '{a} <br/>{b} : {d}%'
             },
             // 色: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             色: ['#1FC48D', '赤', '#6DC8EC', '#3F8FFF'],
             // 背景色: '#ffffff',
             伝説: {
               方向: '垂直'、
               アイコン: '円'、
               配置: '左'、
               x: '右'、
               y: '下'、
               データ: ['監査URL異常'、'通常ネットワークログ'、'トラフィックログ異常'、'脅威攻撃ログ']
             },
             シリーズ: [
               {
                 名前: 'ネットワーク ログ ステータス'、
                 タイプ: 'パイ'、
                 半径: ['50%', '70%'],
                 ラベルの重複を避ける: false,
                 中央: ['40%', '50%'],
                 アイテムスタイル: {
                   強調:
                     影ぼかし: 10,
                     シャドウオフセットX: 0,
                     影の色: 'rgba(0, 0, 0, 0.5)'
                   },
                   色: 関数 (パラメータ) {
                     // カスタムカラー var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     colorList[params.dataIndex]を返す
                   }
                 },
                 データ: this.opinionData2
               }
             ]
           })
         },
       }
     }
     </スクリプト>

2.3 表示(必要に応じてフロントエンドのスタイルを変更できます)

ここに画像の説明を挿入

3. フロントエンドとバックエンドのデータインタラクションの実装

3.1 データベースを作成する

テーブル構造: (ビジネスニーズに応じて作成)

ここに画像の説明を挿入

テーブルデータ

ここに画像の説明を挿入

3.2 バックグラウンドコードの作成

3.2.1 beanパッケージの下にQueryInfoクラスを作成する

このクラスは、フロントエンドから要求されたデータの数を取得することを実装します。ページング機能と同等です。

パブリッククラスQueryInfo{
    プライベート文字列クエリ;
    プライベート int ページ番号 = 1;
    プライベート int ページサイズ = 1;

    パブリッククエリ情報() {
    }

    パブリックQueryInfo(文字列クエリ、intページ番号、intページサイズ) {
        this.query = クエリ;
        this.pageNum = ページ番号;
        ページサイズ = ページサイズ;
    }

    パブリック文字列getQuery() {
        クエリを返します。
    }

    パブリック int getPageNum() {
        ページ番号を返します。
    }

    パブリック int getPageSize() {
        pageSize を返します。
    }

    パブリック void setQuery(文字列クエリ) {
        this.query = クエリ;
    }

    パブリック void setPageNum(int pageNum) {
        this.pageNum = ページ番号;
    }

    パブリック void setPageSize(int pageSize) {
        ページサイズ = ページサイズ;
    }

    @オーバーライド
    パブリック文字列toString() {
        "QueryInfo{" を返す +
                "クエリ='" + クエリ + '\'' +
                ", ページ番号=" + ページ番号 +
                ", ページサイズ=" + ページサイズ +
                '}';
    }
}

3.2.2 beanパッケージの下にShowdateクラスを作成する

パブリッククラスShowdate{
    プライベート文字列名;
    プライベート文字列 itemStyle;
    プライベート int 値;


    パブリックShowdate() {

    }

    パブリック Showdate(String name, String itemStyle, int value) {
        this.name = 名前;
        this.itemStyle = アイテムスタイル;
        this.value = 値;
    }

    パブリック文字列getName() {
        名前を返します。
    }

    パブリック void setName1(文字列名) {
        this.name=名前;
    }

    パブリック文字列 getItemStyle() {
        itemStyle を返します。
    }

    パブリック void setItemStyle(String itemStyle) {
        this.itemStyle = アイテムスタイル;
    }

    パブリック int getValue() {
        戻り値;
    }

    パブリック void setValue(int 値) {
        this.value = 値;
    }

    @オーバーライド
    パブリック文字列toString() {
        戻り値 "Showdate{" +
                "名前='" + 名前 + '\'' +
                ", アイテムスタイル='" + アイテムスタイル + '\'' +
                ", 値=" + 値 +
                '}';
    }
}

3.2.3 リソースの下にマッパーを作成する

1. MapperでShowDataMapper.xmlを作成する

<?xml バージョン="1.0" エンコーディング="UTF-8" ?>
<!DOCTYPE マッパー PUBLIC "-//mybatis.org//DTD マッパー 3.0//EN"
        「http://mybatis.org/dtd/mybatis-3-mapper.dtd」 を参照してください。

<マッパー名前空間="com.naughty.userlogin02.dao.ShowdateDao">


    <select id="getAlldate" resultType="com.naughty.userlogin02.bean.Showdate">
        日付1から*を選択
        <if テスト="name!=null">
            WHERE 名が #{name} のような名前である
        </if>
        制限 #{pageStart},#{pageSize}
    </選択>

    <更新 id="更新new">
        UPDATE date1 SET value = #{count} WHERE name = #{name}
    </更新>


</マッパー>

2. データベースとポート番号を設定するために、リソースの下に application.yml を作成します。

#mysql
春:
  データソース:
    #MySQL 構成ドライバークラス名: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/weblog?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=UTC
    ユーザー名: root
    パスワード: root

マイバティス:
  マッパーの場所: クラスパス:mapper/*.xml
  タイプエイリアスパッケージ: com.example.demo.model
サーバ:
  ポート: 9000

3.2.4 Daoの下にShowdateDaoを作成する

そこには 2 つのインターフェースがあります。データベースを操作する必要があるときは、ShowdateDao にインターフェース メソッドを記述する必要があります。
ShowDataMapper.xml に SQL ステートメントを記述します。
ここで変更と検索を実装しました。

com.naughty.userlogin02.bean.Showdate をインポートします。
org.apache.ibatis.annotations.Param をインポートします。
org.springframework.stereotype.Repository をインポートします。

java.util.List をインポートします。
@リポジトリ
パブリックインターフェースShowdateDao{

    public List<Showdate> getAlldate(@Param("name") String name、@Param("pageStart") int pageStart、@Param("pageSize") int pageSize);

    public int updatenew(文字列名、int カウント);
}

3.2.5 コントローラーの下にShowdateControllerを作成する

ShowdateControllerでは、スペースの使用を注釈する必要があります

   オートワイヤード
    ShowdateDao showdateDao; //フロントエンドデータベーステーブル@Autowiredに渡す必要があります
    FlowDao flowDao; //データソースのエフェクトデータベーステーブル
パッケージ com.naughty.userlogin02.controller;

com.alibaba.fastjson.JSON をインポートします。
com.naughty.userlogin02.bean.* をインポートします。
com.naughty.userlogin02.dao.CheckDao をインポートします。
com.naughty.userlogin02.dao.FlowDao をインポートします。
com.naughty.userlogin02.dao.SafeDao をインポートします。
com.naughty.userlogin02.dao.ShowdateDao をインポートします。
org.springframework.beans.factory.annotation.Autowired をインポートします。
org.springframework.web.bind.annotation.* をインポートします。

java.util.HashMap をインポートします。
java.util.List をインポートします。
java.util.Stack をインポートします。

@レストコントローラ
パブリッククラスShowdateController{

    オートワイヤード
    日付を表示
    オートワイヤード
    フローダオ フローダオ;
//フロントデスクでログデータを更新 @CrossOrigin
    @RequestMapping("/alldate")//フロントエンドリクエストチャネル public String getAlldateList(QueryInfo queryInfo){
        System.out.println(クエリ情報);
        int ページ開始 = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        リスト<Showdate> dates = showdateDao.getAlldate("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
   
      for(int i =0;i<dates.size();i++){
          System.out.println(dates.get(i).toString());
      }
        //検証//検証されたトラフィック ログをカプセル化します。HashMap<String, Object> res = new HashMap<>();
        res.put("フラグ","成功");
        res.put("opinionData2",日付);
        文字列 date_json = JSON.toJSONString(res);
        System.out.println(date_json.toString());
        date_json を返します。
    }

//データベースデータソースの実装方法は、データベーステーブル Date1 のデータを変更することです @RequestMapping("/getupdata")
    パブリック文字列 updateDate(QueryInfo queryInfo){

        文字列 s = "トラフィック ログ例外";
        文字列 s1 = "監査 URL 例外";
        文字列 s2 = "脅威攻撃ログ";
        文字列 s3 = "通常のネットワーク ログ";
        /*int count = getUserList(queryInfo);
        int count1 =getChickList(queryInfo); // 4 つのメソッドは、特定のビジネスに応じて実装する必要があります int count2 =getSafeDate(queryInfo);
        int count3 =allBlognum(クエリ情報)-(count+count1+count2);*/
        showdateDao.updatenew(s,count);
        showdateDao.updatenew(s1、count1);
        showdateDao.updatenew(s2、count2);
        int i = showdateDao.updatenew(s3,count3);
        System.out.println("例外タイプ: "+s);
        System.out.println("異常ログの数:"+count);
        文字列 str = i >0?"成功":"エラー";
        str を返します。
    }

}

3.2.6 フロントエンドインターフェースの変更

Js の完全なコード:

   <スクリプト>
     'echarts' から * を echarts としてインポートします
     エクスポートデフォルト{
       名前: 'test2',
       データ () {
         戻る {
         クエリ情報: {
         クエリ: "",
         ページ番号: 1,
         ページサイズ: 4,
       },
       クエリ情報: {
         クエリ: "",
         ページ番号: 1,
         ページサイズ: 100,
       },
           マイチャート: ''、
           意見データ2:
     
// フロントエンドテストデータをクリア]
         }
       },
       マウント: 関数 () {
          この.drawLine();

       },
       作成された() {
         this.getdateList(); // ページに入るたびにデータベースデータを更新して、動的なデータバインディングを実現します},
       メソッド: {
          非同期描画ライン() {
              // バックエンドデータベースの値を取得するためにポストリクエストを呼び出します const { data: res } = await this.$http.get("alldate", {
        パラメータ: this.queryInfo
      });
      res.flag != "成功" の場合 {
        これを返してください。$message.error("データの取得に失敗しました!!!");
      }

      コンソールログ(res.フラグ)
       this.opinionData2 = res.opinionData2; // 返されたデータを割り当てる this.myChart = echarts.init(document.getElementById('myChart'))
           this.myChart.setOption({
             タイトル:
               text: 'ネットワーク ログ異常トラフィック分析', // メイン タイトル subtext: '', // サブタイトル x: 'left' // x 軸の配置},
             グリッド: { ラベルを含む: true },
             ツールチップ: {
               トリガー: 'アイテム',
               フォーマッタ: '{a} <br/>{b} : {d}%'
             },
             // 色: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
             色: ['#1FC48D', '赤', '#6DC8EC', '#3F8FFF'],
             // 背景色: '#ffffff',
             伝説: {
               方向: '垂直'、
               アイコン: '円'、
               配置: '左'、
               x: '右'、
               y: '下'、
               データ: ['監査URL異常'、'通常ネットワークログ'、'トラフィックログ異常'、'脅威攻撃ログ']
             },
             シリーズ: [
               {
                 名前: 'ネットワーク ログ ステータス'、
                 タイプ: 'パイ'、
                 半径: ['50%', '70%'],
                 ラベルの重複を避ける: false,
                 中央: ['40%', '50%'],
                 アイテムスタイル: {
                   強調:
                     影ぼかし: 10,
                     シャドウオフセットX: 0,
                     影の色: 'rgba(0, 0, 0, 0.5)'
                   },
                   色: 関数 (パラメータ) {
                     // カスタムカラー var colorList = ['#1FC48D', 'red', '#6DC8EC', '#3F8FFF']
                     colorList[params.dataIndex]を返す
                   }
                 },
                 データ: this.opinionData2
               }
             ]
           })
         },
         非同期getdateList() {
      // POSTリクエストを呼び出す const { data: res } = await this.$http.get("getupdata", {
        パラメータ: this.queryInfof
      });
      if (res != "成功") {
        これを返してください。$message.error("データの取得に失敗しました!!!");
      }
      コンソール.log(res)
        },
       }
     }
     </スクリプト>
     

ここに画像の説明を挿入

バックエンドの戻りデータ:

ここに画像の説明を挿入

これで、Springboot で vue+echarts フロントエンドとバックエンドのインタラクションを使用して動的な円グラフを実装する方法についての説明は終わりです。Springboot vue 動的な円グラフに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue は動的な円形のパーセンテージ進捗バーを実装します
  • vue+ElementUI+echarts フロントエンドとバックエンドのインタラクションを使用して、Springboot プロジェクトで動的なドーナツ チャートを実現する (推奨)
  • Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装
  • Vue で円形プログレスバーを実装する例
  • Vueは3/4ドーナツチャートの効果を動的に描画します
  • echarts を使用して Vue でドーナツ チャートを作成するサンプル コード
  • Vueはキャンバスを使用して円を描画します

<<:  MySQL 5.6 ルートパスワード変更チュートリアル

>>:  Linux での Firewalld の高度な設定の使用に関する詳細な説明

推薦する

MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ

目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

MySQL並列レプリケーションの簡単な説明

1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。

トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自...

8桁の割引コードをランダムに生成し、MySQLデータベースに保存します。

現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...

重複データの処理に関するMySQL学習ノート

MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...

Sublime Text - ブラウザのショートカットキーを設定するための推奨方法

コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...

Vscode が Ubuntu にリモート接続する際のエラー問題の解決方法

1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...

MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

JavaScript データ型変換の例 (他の型を文字列、数値型、ブール型に変換する)

序文データ型変換とは何ですか?フォームまたはプロンプトを使用して取得されるデフォルトのデータ型は文字...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

SpringBoot を MySQL に接続してデータを取得し、バックエンド インターフェースに書き込む方法

目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...

5分でWebRTCビデオチャットを構築する

前回の記事では、Ubuntu 上の webrtc ベースの多人数ビデオチャット サービスの詳細なコー...