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

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

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

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

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

<スクリプト>
     '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
               }
             ]
           })
         },
       }
     }
     </スクリプト>

パブリッククラス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{" を返す +
                "クエリ='" + クエリ + '\'' +
                ", ページ番号=" + ページ番号 +
                ", ページサイズ=" + ページサイズ +
                '}';
    }
}

パブリッククラス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{" +
                "名前='" + 名前 + '\'' +
                ", アイテムスタイル='" + アイテムスタイル + '\'' +
                ", 値=" + 値 +
                '}';
    }
}

<?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}
    </更新>


</マッパー>

#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

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 カウント);
}

   オートワイヤード
    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 を返します。
    }

}

   <スクリプト>
     '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)
        },
       }
     }
     </スクリプト>