使用vue2.x，iview3.x 以及echarts搭建前端框架。
1 安裝nodejs
1.1 下載nodejs，
下載地址：https://nodejs.org/en/download/。選擇對應的版本下載并進行安裝。
1.2 修改默認配置
nodejs需要下載大量的js插件庫，如果C盤容量不夠大的話，可以修改默認的下載以及緩存位置。
1.2.1 修改config
npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
1.2.2 修改環境變量
“我的電腦”-右鍵-“屬性”-“高級系統設置”-“高級”-“環境變量”。
進入環境變量對話框，在
【系統變量】下新建【NODE_PATH】，輸入 E:\nodejs\node_global\node_modules
【用戶變量】下的【Path】添加 E:\nodejs\node_global
1.3 nodejs鏡像
nodejs需要下載js庫，很多是國外的，容易被墻或者下載慢，可以設置國內的鏡像。
1.3.1 臨時使用
npm --registry https://registry.npm.taobao.org install express
1.3.2 長時間使用
npm config set registry https://registry.npm.taobao.org
1.3.3 使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2 安裝vue和iview
2.1 安裝vue
npm install -g @vue/cli
2.2 安裝iview
npm install -g iview
2.3 安裝echarts
npm install -g echarts
2.4 安裝echart-wordcloud（如需要）
npm install -g echarts-wordcloud
3 創建項目
3.1 啟動vue項目管理工具。在cmd中輸入
vue ui
3.2 創建項目
3.2.1
image.png
選擇好路徑后， 點擊【在此創建項目】按鈕。
3.2.2
image.png
輸入項目名稱，包管理器按需選擇。
3.2.3
image.png
根據需求，選擇預設好的模板。也可以手動配置。
3.2.4
選擇好模板后，點擊【創建項目】，等待一段時間就創建好vue項目了。
3.2.5
image.png
項目創建成功后，會進入該頁面，左側菜單可以添加插件，依賴以及進行各種配置。
右上角的【自定義】可以自定義儀表盤顯示的內容。
3.2.6
image.png
在【任務】菜單欄下，選中【serve】，點擊【運行】，運行vue項目管理。編譯成功后，點擊【啟動app】，
就可以看到項目首頁了。
3.2.7
image.png
在【插件】菜單欄下，點擊【添加插件】。輸入iview進行過濾。選中“vue-cli-plugin-iview” 然后點擊【安裝】完成iview插件的安裝
4 添加echarts和echarts-wordcloud
4.1 package.json添加echarts和echarts-wordcloud
devDependencies 屬性中添加：
"echarts": "^4.1.0",
"echarts-wordcloud": "^1.1.3"
然后在項目根路徑下執行：
npm install
4.2 添加echarts和echarts-wordcloud
src/main.js中添加：
import echarts from 'echarts'
import echartswordcloud from 'echarts-wordcloud'
//增加全局屬性，在其他vue文件中，可以通過this.$echarts引用
Vue.prototype.$echarts = echarts;
4.3 使用echarts
<template>
<div class="content-box">
<!-- vue的ref可以通過this.$refs.獲取到DOM節點 -->
<!-- echart容器div必須設置高度，否則不顯示 -->
<div ref="keyWords" style="height:300px;"></div>
</div>
</template>
<script>
export default {
data: function() {
return {
indicators: [
{ name: "生活", max: 16000 },
{ name: "學習", max: 30000 },
{ name: "兼職", max: 38000 },
{ name: "租房", max: 52000 },
{ name: "娛樂", max: 25000 },
{ name: "八卦", max: 25000 }
],
datas: [4300, 10000, 28000, 35000, 5000, 19000]
};
},
mounted() {
this.$nextTick(() => {
this.initEchart();
});
},
methods: {
initEchart() {
//獲取DOM節點并初始化
let myChart = this.$echarts.init(this.$refs.keyWords);
let option = {
tooltip: {},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: "#fff",
backgroundColor: "#999",
borderRadius: 3,
padding: [3, 5]
}
},
indicator: this.indicators
},
series: [
{
type: "radar",
data: [
{
value: this.datas
}
]
}
]
};
//設置圖表的參數
myChart.setOption(option);
}
}
};
</script>
圖表如下：
image.png
4.4 使用echarts-worldcloud
<template>
<div class="content-box">
<!-- vue的ref可以通過this.$refs.獲取到DOM節點 -->
<!-- echart容器div必須設置高度，否則不顯示 -->
<div ref="keyWords" style="height:300px;"></div>
</div>
</template>
<script>
export default {
data: function() {
return {
words: [
{
name: "考研",
value: 10000
},
{
name: "兼職",
value: 6181
},
{
name: "食堂",
value: 4386
},
{
name: "家教",
value: 4055
},
{
name: "大四",
value: 2467
},
{
name: "研友",
value: 2244
},
{
name: "論文",
value: 1898
},
{
name: "專接本",
value: 1484
},
{
name: "招聘",
value: 1112
},
{
name: "講座",
value: 965
},
{
name: "圖書館",
value: 847
},
{
name: "租房",
value: 582
}
]
};
},
mounted() {
this.$nextTick(() => {
this.initEchart();
});
},
methods: {
initEchart() {
//獲取DOM節點并初始化
let myChart = this.$echarts.init(this.$refs.keyWords);
let option = {
tooltip: {
show: true
},
series: [
{
name: "",
type: "wordCloud",
size: ["95%", "95%"],
textRotation: [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
textStyle: {
normal: {
color: function() {
return (
"rgb(" +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
", " +
Math.round(Math.random() * 255) +
")"
);
}
}
},
data: this.words
}
]
};
//設置圖表的參數
myChart.setOption(option);
}
}
};
</script>
圖標如下：
image.png
