大屏數(shù)據(jù)展示模板（HTML）

理了，各個(gè)領(lǐng)域的大數(shù)據(jù)展示模板，全部都是HTML+js編寫，直接填充動(dòng)態(tài)數(shù)據(jù)，就可以展示出來！

大數(shù)據(jù)大屏顯示模板主要涵蓋智慧交通、智慧醫(yī)療、大數(shù)據(jù)醫(yī)療、智慧城市、智慧政務(wù)、智慧氣象及氣象大數(shù)據(jù)分析、智慧物流、智慧物聯(lián)、智慧電商、智慧運(yùn)維等領(lǐng)域，樣式可以調(diào)整優(yōu)化！

1、智慧交通-大數(shù)據(jù)監(jiān)控

2、智慧交通-旅游大數(shù)據(jù)監(jiān)控

3、智慧交通-高速交通大數(shù)據(jù)監(jiān)控

4、智慧醫(yī)療大數(shù)據(jù)

5、智慧社區(qū)大數(shù)據(jù)

6、輿情大數(shù)據(jù)分析平臺

7、智慧氣象大數(shù)據(jù)分析平臺

8、智慧物流大數(shù)據(jù)平臺

9、智慧電商運(yùn)營數(shù)據(jù)

10、智慧運(yùn)維數(shù)據(jù)監(jiān)控

文件所有的目錄展示

各位看官老爺，收集不易，有需要的趕緊收藏起來！

需要資料的，關(guān)注+私信回復(fù)【大數(shù)據(jù)】

有需要什么樣的軟件模板，可以聯(lián)系我！

要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識。想要做一個(gè)好看的可視化大屏，我們還要學(xué)一些前端的知識（vue），網(wǎng)上有很多比較復(fù)雜（需要執(zhí)行各種各樣的命令）還不完整的教程，今天OF將完整地講解如何用vue做一張好看的可視化大屏。只要大家按照步驟操作下來，你也能實(shí)現(xiàn)自己的可視化項(xiàng)目。

主要內(nèi)容：Vue編寫可視化大屏

適用人群：Python初學(xué)者，前端/Vue初學(xué)者

準(zhǔn)備軟件：pycharm

安裝準(zhǔn)備

在編寫大屏前，我們需要先安裝2個(gè)內(nèi)容：vue插件和node.js。

在pycharm內(nèi)安裝vue插件；（用pycharm安裝vue非常簡單，不需要一堆命令）

1.1 打開pycharm，點(diǎn)擊文件-設(shè)置-插件，在搜索欄中搜索“vue”，點(diǎn)擊install。等待安裝完成就可以了。

安裝node.js是為了使用npm指令的，下載地址：https://nodejs.org/en/

1.2 下載后按默認(rèn)安裝即可（安裝路徑可自行修改）。

初識VUE

準(zhǔn)備工作完成后，我們可以開始創(chuàng)建VUE項(xiàng)目。

2.1 點(diǎn)擊文件-新建項(xiàng)目，在彈出的窗口中選擇vue.js，然后在Location欄修改路徑地址，點(diǎn)擊右下角“creat”

2.2 我們可以看到剛創(chuàng)建好的vue項(xiàng)目，目錄是空白的，在pycharm的Terminal窗口下執(zhí)行npm init，才能生成package.json文件，這步很重要。（注：若執(zhí)行時(shí)報(bào)權(quán)限錯(cuò)誤，我們就先刪除npmrc文件（C:\Users\{賬戶}\下的.npmrc文件））

2.3 初始化一個(gè)完整版的項(xiàng)目：在pycharm的Terminal窗口下執(zhí)行vue init webpack myscreen命令，然后可以參考如下的一步步選擇和輸入，等待自動(dòng)安裝。

2.4 安裝成功：出現(xiàn)以下內(nèi)容，就是安裝成功了。

我們來說明下這個(gè)目錄各文件夾/文件的作用，我們主要用的是src文件夾下的內(nèi)容。

Typescript

在vue中編寫代碼的方式和HTML比較類似，總體上就是3部分：

1）template：與HTML中的body一樣編寫需要展現(xiàn)的內(nèi)容；

2）script：HTML常用javascript，；

3）style：與HTML中的style基本是一樣的。

編寫圖表前，為了便于初學(xué)者理解，我們用Typescript對script部分的屬性進(jìn)行簡要說明。

TypeScript 程序由以下幾個(gè)部分組成：模塊（兩個(gè)模塊之間的關(guān)系是通過使用 import和export 建立的）、函數(shù)、變量、語句和表達(dá)式、注釋。

<script>
var [變量名] = 值    //變量
export default{    //模塊  
    name:'Percentage',
    props:{},      //props是子組件訪問父組件數(shù)據(jù)的唯一接口
    data(){    
      return {}
    },             //存儲數(shù)據(jù)的函數(shù)
    mounted(){},   //鉤子函數(shù)，html加載完成后執(zhí)行,執(zhí)行順序：子組件-父組件
    computed:{},   //計(jì)算屬性，也就是依賴其它的屬性計(jì)算所得出最后的值
    watch:{},      //監(jiān)聽屬性，監(jiān)聽一個(gè)值的變化，然后執(zhí)行相對應(yīng)的函數(shù)
    methods:{},    //事件方法執(zhí)行
}
</script>

注：有引入sass樣式的，需要在terminal中執(zhí)行以下命令（安裝低一些的版本），否則運(yùn)行不會成功。

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev

可視化實(shí)現(xiàn)

通過以上3部分的準(zhǔn)備工作，我們可以正式進(jìn)入圖表內(nèi)容的編寫，Vue強(qiáng)大的地方莫過于component組件應(yīng)用的便利性。

4.1 OF以圓環(huán)圖為例，圖表要用的地方比較多，所以先新建了一個(gè)charts的文件夾，來存放各種圖表的vue文件，然后在charts文件夾中新建一個(gè)Vue Component文件，如下圖：

4.2 編寫圓環(huán)圖的初始化代碼，此次我們做3張圓環(huán)圖，那么我們的這個(gè)Percentage.vue就是父組件。

<template>
    <div class="percentage"> </div>
</template>
<script>
export default {
    name:'Percentage',
    props:{
        containerId:String,
        option:{}
    },
    data(){
        return {
            option1:{
                color:'#516c72',
                series: [{
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: false,
                    },
                    axisLine: {
                        lineStyle: {
                           color: [[1, '#464646']],
                            width: 10,
                        }
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 50,
                        backgroundColor:'red'
                    },
                    data: [{
                        value: 20,
                        detail: {
                            offsetCenter: ['0%', '0%']
                        }
                    },
                    ],
                    title: {
                        fontSize: 14
                    },
                    detail: {
                        width: 50,
                        height: 14,
                        fontSize: 14,
                        color: 'auto',
                        formatter: '{value}%'
                    }
                }]
            },
        }
    },
    methods:{
        initChart(newOption){
            if(newOption.series){
                this.option1.series[0].data[0].value = newOption.series[0].data[0].value ;
                this.option1.series[0].detail.formatter = newOption.series[0].detail.formatter;
                if(newOption.color){
                    this.option1.color = newOption.color
                }
            }
            let myChart = this.$echarts.init(
                document.getElementById(this.containerId)
            );
            //  console.log('this.option1',this.option1)
            myChart.setOption(this.option1);
        },
    }
}
</script>
<style scoped>
    .percentage{
        width: 100%;
        height: 100%;
    }
</style>

4.3 給3張圓環(huán)圖賦值，我們可以直接在Percentage.vue中寫，但是為了便于重復(fù)使用，我們再增加一個(gè)子組件：新建一個(gè)views文件夾，再在views文件夾下新建一個(gè)Man.vue的文件。(import Percentage from '../charts/Percentage')

<template>
  <div class="home">
   <div class="content_card">
       <div class="left_card">
            <div class="left_middle_card">
                <div class="left_middle_chart_card">
                        <div class="left_middle_left_chart_card">
                            <div class="safe_title_spec">人員信息總覽</div>
                            <div class="left_middle_left_chart_card_content">
                                <div class="tip">
                                    <h3 class="titletip">公司人數(shù)</h3>
                                    <div id="manchart" class="chart_card">
                                        <percentage ref="manpercentage" :containerId="'manchart'" :option="manoption"/>
                                    </div>
                                </div>
                                <div class="tip">
                                    <h3 class="titletip">出勤率</h3>
                                    <div id="man2chart" class="chart_card">
                                        <percentage ref="man2percentage" :containerId="'man2chart'" :option="man2option"/>
                                    </div>
                                </div>
                                <div class="tip">
                                    <h3 class="titletip">出差人數(shù)</h3>
                                    <div id="man3chart" class="chart_card">
                                        <percentage ref="man3percentage" :containerId="'man3chart'" :option="man3option"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
       </div>
   </div>
  </div>
</template>


<script>
// @ is an alias to /src
import Percentage from '../charts/Percentage'


export default {
  name: 'staff',
  components: {
    Percentage,
  },
  data(){
    return {
        manoption:{
            color:'#45e2f5',
            series: [{
                data: [
                    { name: 'itemA', value: 94}
                ],
                detail: {
                    formatter: '35人'
                }
            }]
        },
        man2option:{
            color:'#b7e8e4',
            series: [{
                data: [
                    { name: 'itemA', value: 50}
                ],
                detail: {
                    formatter: '{value}%'
                }
            }]
        },
        man3option:{
            color:'#7a9ae7',
            series: [{
                data: [
                    { name: 'itemA', value: 17 }
                ],
                detail: {
                    formatter: '17人'
                }
            }]
        },


    }
  },
  mounted(){
      this.chartInit()


  },
  methods:{
    chartInit(){
        this.$refs.manpercentage.initChart(this.manoption)
        this.$refs.man2percentage.initChart(this.man2option)
        this.$refs.man3percentage.initChart(this.man3option)


    },


  }
}
</script>
<style lang="scss" scoped>
.home{
    height: 100%;
    background-color: #111;
    padding: 1%;
    .content_card{
        width: 100%;
        height: 95%;
        display: flex;
        justify-content: flex-start;
        // margin-top: 2%;
        .safe_title_spec{
            height: 50%;
            background: url(data:image/png) no-repeat;
            background-size: contain;
            color: #fff;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            text-indent: 2rem;
        }


        div{
            width: 100%;
            //height: 100%;
            // border: 1px solid white;
        }
        >div.left_card{
            width: 60%;
            height: 100%;


            .left_middle_card{
                width: 100%;
                height:90%;


                .left_middle_chart_card{
                    height: 80%;
                    display: flex;


                    .tip{


                        .titletip{
                            font-size: 1.5rem;
                            color: #fff;
                        }
                    }


                    .left_middle_left_chart_card{
                        height: 100%;
                        width: 50%;
                        margin-top: 1%;


                        .left_middle_left_chart_card_content{
                            height: 100%;
                            display: flex;
                            .chart_card{
                                height: 150px;
                                width: 180px;
                            }
                        }
                    }


                }


            }
        }


    }
}
</style>

4.4 配置路由，點(diǎn)擊router文件夾-進(jìn)入index.js，將代碼修改成如下：

4.5 運(yùn)行vue，有兩種方式：

1）點(diǎn)擊pycharm下方的terminal，執(zhí)行運(yùn)行命令npm run dev

2）在右上角設(shè)置npm運(yùn)行配置，好處是設(shè)置后，以后我們就可以直接點(diǎn)擊運(yùn)行，如下圖

運(yùn)行結(jié)果：

點(diǎn)擊鏈接，會自動(dòng)打開瀏覽器

我們可以看到有個(gè)V的標(biāo)志，我們可以去App.vue文件中，刪掉以下的圖片內(nèi)容就可以了

刪掉這段代碼后，不需要重新點(diǎn)擊運(yùn)行，剛打開的瀏覽器會自動(dòng)更新結(jié)果

這個(gè)呢要感謝在Man.vue中的以下這段代碼，：

mounted(){
    this.chartInit()
},  //mounted(){}鉤子函數(shù)，html加載完成后執(zhí)行,執(zhí)行順序：子組件-父組件

總結(jié)

同學(xué)們有沒有看暈啊，來回的各文件里一頓操作，其實(shí)挺簡單的，OF總結(jié)下需要編寫代碼的文件結(jié)構(gòu)。

快新的一年了，提前祝大家新年快樂，總結(jié)下自己，看今年有沒有學(xué)到新技能，完成自己的目標(biāo)！

下是一些常用的HTML網(wǎng)頁源代碼示例，這些示例可用作HTML文檔的基礎(chǔ)：

1、創(chuàng)建一個(gè)簡單的HTML文檔結(jié)構(gòu)：

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Hello,World!</h1>

<p>This is a simple HTML webpage.</p>

</body>

</html>

2、插入圖片：

3、創(chuàng)建超鏈接：

<a href="https://www.example.com">Visit Example.com</a>

4、創(chuàng)建無序列表：

<ul>

</ul>

5、創(chuàng)建有序列表：

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

6、創(chuàng)建表格：

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

7、插入段落：

<p>This is a paragraph of text.</p>

8、插入換行符：

9、創(chuàng)建一個(gè)文本輸入框：

10、插入按鈕：

<button type="button">Click me</button>

這些示例代碼只是HTML的基礎(chǔ)，HTML具有更豐富的功能和標(biāo)記選項(xiàng)，可以根據(jù)需要進(jìn)行擴(kuò)展和定制。請根據(jù)您的具體需求，使用這些示例作為起點(diǎn)，構(gòu)建您自己的網(wǎng)頁。

【名揚(yáng)銀河企業(yè)網(wǎng)站系統(tǒng)】

【免費(fèi)】提供企業(yè)【網(wǎng)站源碼】，簡單易用，無須擁有代碼基礎(chǔ)。

歡迎留言或私信我們咨詢。

以上內(nèi)容由【名揚(yáng)銀河】企業(yè)網(wǎng)站系統(tǒng)原創(chuàng)發(fā)布，轉(zhuǎn)載請注明出處。

在線咨詢

上一篇：HTML基礎(chǔ)知識
下一篇：手機(jī)這樣設(shè)置，丟失后立馬找回！

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

大屏數(shù)據(jù)展示模板（HTML）

要

初識VUE

Typescript

可視化實(shí)現(xiàn)

總結(jié)

您的項(xiàng)目需求