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 の高度な設定の使用に関する詳細な説明

推薦する

CSS シャドウ効果の比較: ドロップシャドウとボックスシャドウ

Drop-shadow と box-shadow はどちらも影効果(ハロー効果)のための CSS プ...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

ccs3に基づくタイムライン実装方法

Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...

MySQL インデックスに関するヒントのまとめ

目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

上部の固定divは半透明効果に設定できます

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

2つのNode.jsプロセスがどのように通信するかの詳細な説明

目次序文異なるコンピュータ上の 2 つの Node.js プロセス間の通信TCPソケットの使用HTT...

分散監視システムZabbixはSNMPとJMXチャネルを使用してデータを収集します

前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...

Vue における LocalStorage と SessionStorage の違いと使い方

目次LocalStorageとはSessionStorageとはLocalStorage と Ses...

DockerはMysql、.Net6、Sqlserverなどのコンテナをデプロイします

目次CentOS 8にDockerをインストールする1. yumを更新する2. containerd...

Docker で Tomcat を使用して Web アプリケーションを迅速にデプロイする方法の例

Docker の基本的な操作を学習した後、コンテナにいくつかの基本的なアプリケーションをデプロイして...

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

目次導入実装手順キャンバス環境を作成するライティングボールBallクラスを継承するMoveBallク...

Windows 10 Home Edition に Docker をインストールする方法

最近、プロジェクトをアップグレードするために Docker を使用しました。これまで使用したことがな...

Nginx サーバーの https 設定方法の例

Linux: Linux バージョン 3.10.0-123.9.3.el7.x86_64 ngin...