フロントエンドビジュアルデータ大画面(1)

レンダリング

技術アーキテクチャ: datav、vue2、echarts

視覚化されたデータの単純な大画面を段階的に実装してみましょう。始めましょう! ！

1. Vue足場施工プロジェクト

簡単すぎます。Baidu で検索できます。ここでは多くは言いません。ルーターをインストールするだけです。

2. datav のインストールと構成

2.1 コンソールでコマンドを入力して datav をダウンロードします

npm install @jiaminghi/data-view

2.2 datav コンポーネントをグローバルコンポーネントとして登録する

min.js ファイルで、datav をグローバルコンポーネントとして登録します。コードは次のとおりです。

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

3、echartのインストールと設定

3.1. コンソールでコマンドを入力して echart をダウンロードします

npm install echarts --save

4. ルーティング設定

4.1 vue プロジェクトで src/views フォルダーを見つけ、そのフォルダーの下に新しいインデックスフォルダーを作成し、インデックス内に新しい InDex.vue ファイルを作成します。

4.2 新しく作成した InDex.vue ファイルに次の内容を記述して保存します

<template>
  <div>
    <h1>我是主屏幕</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

4.3 vue プロジェクトの src/router/index.js で js ファイルを見つけて、このファイルで、前の手順で作成した vue コンポーネントをルートにバインドします。コードは以下のように表示されます

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component:()=> import('../views/index/InDex.vue') // 路由懒加载，括号里的路径是要绑定的路由的路径
  }
]

const router = new VueRouter({
  routes
})

export default router

4.4. コンソール上で npm runserve を実行し、リンクを開くと以下のページが表示されれば設定成功です

5. 本体構造

コンポーネントをルーティングしてバインドしたら、大画面のデザインを開始できます。まず、vue プロジェクトファイルの下にある src/views/index/InDex.vue ファイルを見つけます。ファイルを入力したら、まず公式Webサイトを開きます。datavの紹介 | DataV

公式 Web サイトでは、必要なコンポーネントフレームワークがいくつか見つかります。注目すべき点の 1 つは、ビッグデータ画面には画面サイズに適応できる特別な機能があることです。datav はフルスクリーンコンテナーを提供します。最初のステップフルスクリーンコンテナコンポーネントを使用することです。後続の HTML コードはこのフルスクリーンコンテナ内に記述されます。

vue プロジェクトの InDex.vue ファイル内のコード

<template>
  <div>
    <dv-full-screen-container>全屏组件</dv-full-screen-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

全画面コンポーネントでは、大画面コンポーネントを作成できます。まず、最も外側の境界線を作成します。

datav は外側の境界線のオプションを多数提供します。ランダムに 1 つ選択しましょう

vue プロジェクトの InDex.vue ファイル内のコード

<template>
  <div >
    <dv-full-screen-container class=box>
      <dv-border-box-11 title="测试">

      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.box{
  background-color: black;
}
</style>

実際の効果

datav コンポーネントを大画面に追加し、ページを美しくし、

まずは datav が公式に提供するコンポーネントを見てみましょう

ここでは、デモンストレーション用の 1 つを見つけます。vue プロジェクトの InDex.vue ファイル内のコードは次のように書かれています。

<template>
  <div>
    <dv-full-screen-container class="box">
      <dv-border-box-11 title="测试">
        <!-- 小图表的外边框组件 -->
        <dv-border-box-1 class="box1">
          <!-- 小图表图标组件 -->
          <dv-capsule-chart
            :config="config"
            style="width: 400px; height: 300px;margin-left:10px;margin-top:10px"
        /></dv-border-box-1>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {//组件的配置数据
        data: [
          {
            name: '南阳',
            value: 167
          },
          {
            name: '周口',
            value: 67
          },
          {
            name: '漯河',
            value: 123
          },
          {
            name: '郑州',
            value: 55
          },
          {
            name: '西峡',
            value: 98
          },
        ]
      },
      unit: '单位'
    }
  }
}


</script>

<style>
/* 根据具体的情况对图表进整体的布局以及css的修改 */
.box {
  background-color: black;
}
.box1{
  margin-left:20px;
  padding-top:40px;
  height:320px;
  width:420px
}
</style>

効果

このような大画面の簡易バージョンを設計しました. 将来的には、実際の状況に応じて大画面を変更し、コンテンツを強化することができます. 次回は、大画面にいくつかの echart のチャートを追加する予定です.ソースコードが必要な場合は、プライベートにチャットできます。！