一、項目描述

一個基于 vue、datav、Echart 架構的大資料可視化（大屏展示）模闆，提供資料動态重新整理渲染、螢幕适應、内部圖表自由替換、Mixins注入等功能。

主要檔案介紹

檔案作用/功能main.js主目錄檔案，引入 Echart/DataV 等檔案utils工具函數與 mixins 函數等views/ index.vue項目主結構views/其餘檔案界面各個區域元件（按照位置來命名）assets靜态資源目錄，放置 logo 與背景圖檔assets / style.scss通用 CSS 檔案，全局項目快捷樣式調節assets / index.scssIndex 界面的 CSS 檔案components/echart所有 echart 圖表（按照位置來命名）common/...全局封裝的 ECharts 和 flexible 插件代碼（适配螢幕尺寸，可定制化修改）

項目動态展示

使用介紹

動态渲染圖表

動态渲染圖表案例為 components 目錄下各個圖表元件，index 檔案負責資料擷取和處理，chart 檔案負責監聽和資料渲染。

chart 檔案的主要邏輯為：

<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script>
  // 引入封裝元件
import Echart from '@/common/echart'
export default {
  // 定義配置資料
  data(){ return { options: {}}},
  // 聲明元件
  components: { Echart},
  // 接收資料
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // 進行監聽，也可以使用 computed 計算屬性實作此功能
  watch: {
    cdata: {
      handler (newData) {
        this.options ={
          // 這裡編寫 ECharts 配置
        }
      },
      // 立即監聽
      immediate: true,
      // 深度監聽
      deep: true
    }
  }
};
</script>

複用圖表元件

複用圖表元件案例為中間部分的任務通過率與任務達标率子產品，兩個圖表類似，差別在于顔色和主要渲染資料。隻需要傳入對應的唯一 id 和樣式，然後在複用的元件 components/echart/center/centerChartRate 裡進行接收并在對應位置指派即可。

如：在調用處 views/center.vue 裡去定義好資料并傳入元件

//元件調用
<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: {
          ...
        }
      }
    ]
  }
}

請求資料

現在的項目未使用前後端資料請求，建議使用 axios 進行資料請求，在 main.js 位置進行全局配置。

axios 的 main.js 配置參考範例（因人而異）

import axios from 'axios';

//把方法放到vue的原型上，這樣就可以全局使用了
Vue.prototype.$http = axios.create({
  //設定20秒逾時時間
  timeout: 20000,
  baseURL: 'http://172.0.0.1:80080', //這裡寫後端位址
});

基于本項目的二開案例

支援地圖下鑽：

https://gitee.com/memeda520/IofTV-Screen

重寫結構，支援響應式布局：

https://gitee.com/BigCatHome/koi-screen

開源位址

https://gitee.com/MTrun/big-screen-vue-datav

8.7k star，一款超炫酷的動态可視化大屏項目