使用vue2.x，iview3.x 以及echarts搭建前端框架。

1 安裝nodejs

1.1 下載nodejs，

下載地址：https://nodejs.org/en/download/。選擇對應(yīng)的版本下載并進(jìn)行安裝。

1.2 修改默認(rèn)配置

nodejs需要下載大量的js插件庫，如果C盤容量不夠大的話，可以修改默認(rèn)的下載以及緩存位置。

1.2.1 修改config

    npm config set prefix "E:\nodejs\node_global"
    npm config set cache "E:\nodejs\node_cache"

1.2.2 修改環(huán)境變量

“我的電腦”-右鍵-“屬性”-“高級系統(tǒng)設(shè)置”-“高級”-“環(huán)境變量”。
進(jìn)入環(huán)境變量對話框，在

    【系統(tǒng)變量】下新建【NODE_PATH】，輸入   E:\nodejs\node_global\node_modules
    【用戶變量】下的【Path】添加   E:\nodejs\node_global

1.3 nodejs鏡像

nodejs需要下載js庫，很多是國外的，容易被墻或者下載慢，可以設(shè)置國內(nèi)的鏡像。

1.3.1 臨時(shí)使用

    npm --registry https://registry.npm.taobao.org install express

1.3.2 長時(shí)間使用

    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 創(chuàng)建項(xiàng)目

3.1 啟動vue項(xiàng)目管理工具。在cmd中輸入

    vue ui

3.2 創(chuàng)建項(xiàng)目

3.2.1

image.png

選擇好路徑后， 點(diǎn)擊【在此創(chuàng)建項(xiàng)目】按鈕。

3.2.2

image.png

輸入項(xiàng)目名稱，包管理器按需選擇。

3.2.3

image.png

根據(jù)需求，選擇預(yù)設(shè)好的模板。也可以手動配置。

3.2.4

選擇好模板后，點(diǎn)擊【創(chuàng)建項(xiàng)目】，等待一段時(shí)間就創(chuàng)建好vue項(xiàng)目了。

3.2.5

image.png

項(xiàng)目創(chuàng)建成功后，會進(jìn)入該頁面，左側(cè)菜單可以添加插件，依賴以及進(jìn)行各種配置。
右上角的【自定義】可以自定義儀表盤顯示的內(nèi)容。

3.2.6

image.png

在【任務(wù)】菜單欄下，選中【serve】，點(diǎn)擊【運(yùn)行】，運(yùn)行vue項(xiàng)目管理。編譯成功后，點(diǎn)擊【啟動app】，
就可以看到項(xiàng)目首頁了。

3.2.7

image.png

在【插件】菜單欄下，點(diǎn)擊【添加插件】。輸入iview進(jìn)行過濾。選中“vue-cli-plugin-iview” 然后點(diǎn)擊【安裝】完成iview插件的安裝

4 添加echarts和echarts-wordcloud

4.1 package.json添加echarts和echarts-wordcloud

  devDependencies 屬性中添加：
  "echarts": "^4.1.0",
  "echarts-wordcloud": "^1.1.3"

然后在項(xiàng)目根路徑下執(zhí)行：

  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節(jié)點(diǎn) -->
    <!-- echart容器div必須設(shè)置高度，否則不顯示 -->
    <div ref="keyWords" style="height:300px;"></div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      indicators: [
        { name: "生活", max: 16000 },
        { name: "學(xué)習(xí)", 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節(jié)點(diǎn)并初始化
      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
              }
            ]
          }
        ]
      };

      //設(shè)置圖表的參數(shù)
      myChart.setOption(option);
    }
  }
};
</script>

圖表如下：

image.png

4.4 使用echarts-worldcloud

<template>
  <div class="content-box">
    <!-- vue的ref可以通過this.$refs.獲取到DOM節(jié)點(diǎn) -->
    <!-- echart容器div必須設(shè)置高度，否則不顯示 -->
    <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節(jié)點(diǎn)并初始化
      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
          }
        ]
      };

      //設(shè)置圖表的參數(shù)
      myChart.setOption(option);
    }
  }
};
</script>

圖標(biāo)如下：

image.png