文章只是写建项目,如安装啥的,找找别的大佬。
目录
Vue建项目
简单介绍:
Vue的生命周期:
创建前 创建
挂载前 挂载
更新前 更新
销毁前 销毁
如何创建Vue项目
在电脑中创建一个文件夹(Vue项目的存放位置),地址栏最前面输入cmd加一个空格进入文件夹
输入命令 vue create book-vue
会弹出选择界面,按如下选(空格是选择该项,回车则是确定,进入下一流程)
选择完毕后Vue 项目就创建完成了。
使用idea直接打开就可。
Vue的导入
在Vue中导入element-ui,axios等的命令
使用idea打开Vue后导入可以直接点击下面的Terminal,然后直接输入
如果使用npm的话
npm install element-ui -S
npm install axios -S
如果使用yarn的话
yarn add element-ui
yarn add echarts
大概写法如上图,往上套吧。
安装之后导入main.js中
// 生成图表
import * as echarts from 'echarts'
Vue.prototype.$echarts=echarts
//导入moment
import moment from 'moment'
Vue.prototype.$moment = moment;
//ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//axios
import axios from 'axios'
Vue.prototype.$http = axios
axios.defaults.baseURL='http://localhost:9090'
axios.defaults.timeout = 5000;
Vue 如何修改端口号
在Vue中如何显示日期
第一种直接使用方法如下图
第二种在Vue安装moment
如何安装套上面的,main.js中的写法,在那个代码示例中有
首先在Vue组件中引入
使用时如此写
简单提到一下js
补充一下echarts如何动态画饼图和线型图
在Vue <template> 中定义一个div 用于我们画图
<template>
<div>
<div id="main" style="width: 800px;height: 600px;margin: auto;"></div>
</div>
</template>
填东西
<script>
import moment from 'moment';
export default {
name: "Tu",
data(){
return{
msg: '视图列表',
formInline: {
jid: '',
gid: ''
},
guo:[],
// 饼状图信息
Pie:'',
jidList:[],
//线型图
Line:'',
TimeList:[],
}
},
methods:{
drawLines(){
let getLDataT = [];
let getLDataO = [];
for (let i = 0;i < this.TimeList.length;i++){
let objL = new Object();
objL.name = moment(this.TimeList[i].time).format('yyyy-MM-DD');
objL.data = this.TimeList[i].mon;
getLDataT[i] = objL.name;
getLDataO[i] = objL.data;
}
this.Line = this.$echarts.init(document.getElementById("main"));
this.Line.setOption({
title: {
text: '利润线性表',
x: 'center'
},
xAxis: {
name:'时间',
data: getLDataT
},
tooltip: {
formatter: "{a} <br/>{b} : {c}"
},
yAxis: {
name:'销量',
},
series: {
name: '销量',
type: 'line',
data: getLDataO
}
})
},
drawPies(){
let getData = [];
for (let i=0;i < this.jidList.length; i++){
let obj = new Object();
obj.name = this.jidList[i].jname;
obj.value = this.jidList[i].jcun;
getData[i] = obj;
}
this.Pie = this.$echarts.init(document.getElementById("main"));
this.Pie.setOption({
title: {
text: '展示图',
x: 'center'
},
tooltip: {
trigger: 'item',
//{a}->series.name,{b}->data.name,{c}->data.value,{d}->所占的百分比
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
//左上方的条形
legend: {
orient: 'vertical',
left: 'left',
data: getData
},
series: {
name: '库存',
type: 'pie',
data: getData,
}
});
},
findGuo(){
this.$http.get("/findGuo")
.then(resp=>{
this.guo = resp.data.data;
})
},
gChange(val){
let gid = val;
this.$http.get("/jidList/"+gid).then(resp=>{
if (resp.data.flag){
this.jidList=resp.data.data;
this.drawPies();
}else{
alert("名称获取失败");
}
})
},
jChange(val){
let jid = val;
this.$http.get("/jidTime/"+jid).then(resp=>{
if (resp.data.flag){
this.TimeList = resp.data.data;
this.drawLines();
}else{
alert("种类获取失败");
}
})
},
},
created() {
this.findGuo();
}
}
</script>