2021データ大画面-語群-ソース共有(VUE+DataV+Echarts,バックエンドSpringBoot)

16384 ワード
データスクリーン データセンター 語雲 vue ジエば
データ・スクリーン-実装
現在、会社は政務プロジェクトをしていて、2週間ぐらいで大きなスクリーンプロジェクトをしました.ここで前、バックエンドのコードを共有して、下のブログを見てすぐに上手になって、みんなはコレクションの関心を覚えていて、もしみんなを助けることができたらとても光栄です.
くだらないことを言わないで直接効果図に行きます:住所とブログをダウンロードします:フロントエンド
  • コード:フロントエンドコードダウンロード(V 1.0)、フロントエンドコードダウンロード(V 2.0)
  • ブログ:データ大画面プロジェクトVue+DataV+Echarts
    • バックエンド
  • バックエンド:バックエンドコードダウンロード
  • ブログ:データ大画面+語群SpringBoot+Redis+Jieba
    • プレビュー(V 1.0)プレビュー(V 2.0)
    一、プロジェクトの説明
    1先端項目
    1.1プロジェクト概要
  • Vue、datav、Echartフレームワークに基づく「データ大画面プロジェクト」で、vueコンポーネントによってデータの動的リフレッシュレンダリングを実現し、内部グラフは自由に置き換えることができる.一部のグラフは、データV付属のコンポーネントを使用して変更できます.詳細は、下のデータVドキュメントをクリックしてください.
  • プロジェクトはフルスクリーン表示が必要です(F 11を押します).
  • プロジェクトの一部領域ではグローバル登録方式が使用され、パッケージ体積が増加していますので、実際の運用ではオンデマンドで導入してください.
  • プロジェクトを引き出した後、自分の機能領域に従ってファイルの名前を変更し、簡単な位置で区別することをお勧めします.
  • プロジェクト環境:vue-cli-3.0、webpack-4.0、npm-6.13、node-v 12.16.
  • masterブランチのコードを引き出してください.残りは開発ブランチです.

    • 友情リンク:
  • DataV公式文書(使用前に閲覧することを推奨)
  • echartsインスタンス、echarts公式ドキュメント
  • Vue公式文書
    • 1.2主要書類紹介
    ファイル
    機能
    main.js
    ホームディレクトリファイル、Echart/DataVなどのファイルを導入
    utils
    ツール関数やmixins関数など
    views/index.vue
    プロジェクトマスター
    views/残りのファイル
    インタフェースの各領域コンポーネント(位置に基づいて名前を付ける)ajaxインタフェース要求位置
    assets
    静的リソースディレクトリ、logoと背景ピクチャの配置
    assets/style.scss
    汎用CSSファイル、グローバルプロジェクトショートカットスタイル調整
    assets/index.scss
    IndexインタフェースのCSSファイル
    components/echart
    すべてのechartグラフ(位置に基づいて名前を付けます)
    common/flexible.js
    flexibleプラグインコード(スクリーンサイズ、カスタマイズ変更)
    1.3使用説明
  • どのようにプロジェクトを開始するには、nodejsとnpmを事前にインストールする必要があります.プロジェクトをダウンロードした後、プロジェクトのメインディレクトリの下でnpm/cnpm installを実行して依存パッケージを引き出し、vue-cliまたは直接コマンドnpm run serveを使用すれば、プロジェクトを開始することができます.プロジェクトを開始した後、手動でフルスクリーン(F 11)を押す必要があります.
  • データを要求する方法
    • バックエンドプロジェクト(後述)があり、axiosを使用してデータ要求を行うことをお勧めします.main.js位置はviews/xxでグローバルに構成する.vueファイルでは、前後のデータ要求が行われます.
  • axiosのmain.js構成の参考例(人それぞれ)
    • import axios from 'axios';

//     vue    ，          
Vue.prototype.$http = axios.create({
     
  //  20     
  timeout: 20000,
  baseURL: 'http://172.0.0.1:80080', //       
});
  • vueページでaxiosメソッドを呼び出し、propsを介してechartsグラフサブコンポーネント
    • に渡す.
    export default {
     
  data() {
     
  	ListDataSelf:[]
  },
  mounted() {
     
   this.fetchList(); //    
  },
  methods: {
     
	async fetchList(){
     
	  const {
      code,listData }= await this.$http.get("xx/xx/xx"x);
	  if(code === 200){
     
		 this.ListDataSelf= listData;
	  }
	}
  }
 }
  • は、components/echartの下にあるグラフのファイルをどのように動的にレンダリングするか、例えばdrawPie()はレンダリング関数であり、echartDataは動的にレンダリングする必要があるデータであり、外部からpropsを通じて新しいデータが入力されると、watch()の方法で傍受することができるが、データの変化はthis.drawPie()を呼び出し、内部の.setOption関数をトリガし、グラフを再レンダリングする.
    • //        

props: ["listData"],
watch: {
     
  listData(newValue) {
     
     this.echartData= newValue;
     this.drawPie();
   },
  },
methods: {
     
  drawPie() {
     
  	.....
  	'      '.setOption(option);
  }
 }
  • グラフコンポーネントをどのように多重化するかは、Emchartグラフがid/classに従ってDomノードを取得してレンダリングするため、一意のid値と必要なデータを入力すれば多重化できます.中間部の コンポーネントのように多重化されている.

    • 例えば、呼び出し先views/center.vueでデータを定義し、コンポーネントに転送する(プロジェクト内のすべてのidは重複できません!!)
    //    
<span>       </span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>       </span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
     
  return {
     
    rate: [
      {
     
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
     
        id: "centerRate2",
        tips: 40,
        colorData: {
     
          ...
        }
      }
    ]
  }
}

    次いで、多重化されたコンポーネントcomponents/echart/center/centerChartRateにおいて受信が行われ、使用される場所で値が付与される.
  • どのように縁取りの枠を交换するかはDataVが持っているコンポーネントを使って、viewsディレクトリに行って対応する位置を探して交换すればいいだけで、具体的な种类はDavaV公式サイトに行って见てください:
    • <dv-border-box-1>dv-border-box-1>
<dv-border-box-2>dv-border-box-2>
<dv-border-box-3>dv-border-box-3>
  • グラフをどのように変更するかcomponents/echartの下のファイルに直接入って、あなたが望むechartsの形に変更して、echartsの公式コミュニティに行ってケースを見ることができます.
  • Mixins注入の問題mixins注入を使用してグラフの繰り返し書き込み応答式の適切なコードを解決しました.グラフィックを交換(追加)するには、echarts.init()関数をthis.chartに割り当てる必要があります.mixinsは応答式機能を自動的に注入します.
  • スクリーンアダプティブ問題本プロジェクトはflexibleプラグインを借りてremの値を変えることでアダプティブ化され、1920 pxとして設計されていた.適合区間は:1366 px~2560 pxであり、本プロジェクトは実際の状況に応じてソースファイルの変更を行い、小画面(例えば:幅1366 px)は自分で一部のダイナミックコンポーネントを捨てて適合する必要がある.
    // flexible    : `common/flexible.js`,      
function refreshRem() {
     
  var width = docEl.getBoundingClientRect().width;
  //   1366px，    2560px
  if (width / dpr < 1366) {
     
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
     
    width = 2560 * dpr;
  }
  //     1920px    24  ，  1rem  80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

    四、更新状況
  • は、中間タスク達成率の2つのパーセンテージマップが同じコンポーネントを使用しているなど、Echartコンポーネントの多重化機能を追加した.
  • は、頭部右側のパターンバーが非対称であるという問題を修復した.
  • スクリーンアダプタの問題を修復し、すべての寸法単位を交換し、remを統一的に使用した.
  • Mixinsを使用してグラフ応答コードを注入します.
  • vue-awesomeは必要に応じて導入する方式
    • に変更された.
    五、その他
    フロントエンドフレームワークはプロジェクトgiteeアドレス(国内速度が速い)に基づいて開発され、水を食べて井戸を掘る人を忘れない!無私な奉仕に感謝します~
    バックエンドは自分でSpringBoot+Redisを構築するプロジェクトで、詳細はリンクデータの大画面+語雲SpringBoot+Redis+Jieba(バックエンドプロジェクト-ソースコード共有)を参照してください.
    [C++Primer]練習1.4
    EclipseでBeyondCompareプラグインを使用