序文プロジェクトに取り組んでいるとき、データを表示するために統計グラフが必要になることがよくあります。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 にインターフェース メソッドを記述する必要があります。 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6 ルートパスワード変更チュートリアル
>>: Linux での Firewalld の高度な設定の使用に関する詳細な説明
目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自...
現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...
MySQLは重複データを処理します一部の MySQL テーブルには重複レコードが含まれている場合があ...
コード効果を異なるブラウザで表示することはよくあることなので、異なるショートカットキーを使用して対応...
1. 事件の背景:仕事上、Ubuntu への vscode リモート接続を使用する必要があります。 ...
この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...
Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...
序文データ型変換とは何ですか?フォームまたはプロンプトを使用して取得されるデフォルトのデータ型は文字...
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...
前回の記事では、Ubuntu 上の webrtc ベースの多人数ビデオチャット サービスの詳細なコー...