摘 要
（OF作品展示）
OF之前介紹了用Python實現數據可視化、數據分析及一些小項目，但基本都是后端的知識。想要做一個好看的可視化大屏，我們還要學一些前端的知識（vue），網上有很多比較復雜（需要執行各種各樣的命令）還不完整的教程，今天OF將完整地講解如何用vue做一張好看的可視化大屏。只要大家按照步驟操作下來，你也能實現自己的可視化項目。
主要內容：Vue編寫可視化大屏
適用人群：Python初學者，前端/Vue初學者
準備軟件：pycharm
- 安裝準備
在編寫大屏前，我們需要先安裝2個內容：vue插件和node.js。
在pycharm內安裝vue插件；（用pycharm安裝vue非常簡單，不需要一堆命令）
1.1 打開pycharm，點擊文件-設置-插件，在搜索欄中搜索“vue”，點擊install。等待安裝完成就可以了。
安裝node.js是為了使用npm指令的，下載地址：https://nodejs.org/en/
1.2 下載后按默認安裝即可（安裝路徑可自行修改）。
初識VUE
準備工作完成后，我們可以開始創建VUE項目。
2.1 點擊文件-新建項目，在彈出的窗口中選擇vue.js，然后在Location欄修改路徑地址，點擊右下角“creat”
2.2 我們可以看到剛創建好的vue項目，目錄是空白的，在pycharm的Terminal窗口下執行npm init，才能生成package.json文件，這步很重要。（注：若執行時報權限錯誤，我們就先刪除npmrc文件（C:Users{賬戶}下的.npmrc文件））
2.3 初始化一個完整版的項目：在pycharm的Terminal窗口下執行vue init webpack myscreen命令，然后可以參考如下的一步步選擇和輸入，等待自動安裝。
2.4 安裝成功：出現以下內容，就是安裝成功了。
我們來說明下這個目錄各文件夾/文件的作用，我們主要用的是src文件夾下的內容。
Typescript
在vue中編寫代碼的方式和html比較類似，總體上就是3部分：
1）template：與HTML中的body一樣編寫需要展現的內容；
2）script：HTML常用JAVAscript，；
3）style：與HTML中的style基本是一樣的。
編寫圖表前，為了便于初學者理解，我們用Typescript對script部分的屬性進行簡要說明。
TypeScript 程序由以下幾個部分組成：模塊（兩個模塊之間的關系是通過使用 import和export 建立的）、函數、變量、語句和表達式、注釋。
<script>
var [變量名] = 值 //變量
export default{ //模塊
name:'Percentage',
props:{}, //props是子組件訪問父組件數據的唯一接口
data(){
return {}
}, //存儲數據的函數
mounted(){}, //鉤子函數，html加載完成后執行,執行順序：子組件-父組件
computed:{}, //計算屬性，也就是依賴其它的屬性計算所得出最后的值
watch:{}, //監聽屬性，監聽一個值的變化，然后執行相對應的函數
methods:{}, //事件方法執行
}
</script>
注：有引入sass樣式的，需要在terminal中執行以下命令（安裝低一些的版本），否則運行不會成功。
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
可視化實現
通過以上3部分的準備工作，我們可以正式進入圖表內容的編寫，Vue強大的地方莫過于component組件應用的便利性。
4.1 OF以圓環圖為例，圖表要用的地方比較多，所以先新建了一個charts的文件夾，來存放各種圖表的vue文件，然后在charts文件夾中新建一個Vue Component文件，如下圖：
4.2 編寫圓環圖的初始化代碼，此次我們做3張圓環圖，那么我們的這個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張圓環圖賦值，我們可以直接在Percentage.vue中寫，但是為了便于重復使用，我們再增加一個子組件：新建一個views文件夾，再在views文件夾下新建一個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">公司人數</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">出差人數</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 配置路由，點擊router文件夾-進入index.js，將代碼修改成如下：
4.5 運行vue，有兩種方式：
1）點擊pycharm下方的terminal，執行運行命令npm run dev
2）在右上角設置npm運行配置，好處是設置后，以后我們就可以直接點擊運行，如下圖
運行結果：
點擊鏈接，會自動打開瀏覽器
我們可以看到有個V的標志，我們可以去App.vue文件中，刪掉以下的圖片內容就可以了
刪掉這段代碼后，不需要重新點擊運行，剛打開的瀏覽器會自動更新結果
這個呢要感謝在Man.vue中的以下這段代碼，：
mounted(){
this.chartInit()
}, //mounted(){}鉤子函數，html加載完成后執行,執行順序：子組件-父組件
總結
同學們有沒有看暈啊，來回的各文件里一頓操作，其實挺簡單的，OF總結下需要編寫代碼的文件結構。
快新的一年了，提前祝大家新年快樂，總結下自己，看今年有沒有學到新技能，完成自己的目標！
