vue2+iview3+echarts+wordcloud
2019-04-01 本文已影响781人
灵兮澹忘
使用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
