vue2+iview3+echarts+wordcloud

使用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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,171評論 0 1
  • 第一章 Vue概述 what? Vue是實現UI層的漸進式js框架,核心庫關注視圖層,簡單的ui構建,復雜的路由控...
    fastwe閱讀 742評論 0 0
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數內部變量的函數。在本質上,閉包就 是將函數內部和函數外...
    xuguibin閱讀 9,719評論 1 52
  • 2.4 Bower——js依賴管理的工具 2.4.1 bower介紹 Bower是 twitter 推出的一款包管...
    Kevin_Junbaozi閱讀 1,145評論 0 2
  • 如何清除浮動,有哪幾種方法,區別是什么 1、移動端你遇到過什么兼容問題? 1、如果在input設置邊框顏色在ios...
    崽崽不哭閱讀 796評論 0 1