关于Vue建项目和echarts画饼图线型图

文章只是写建项目，如安装啥的，找找别的大佬。

目录

Vue建项目

简单介绍：

如何创建Vue项目

Vue的导入 

 Vue 如何修改端口号

 在Vue中如何显示日期

补充一下echarts如何动态画饼图和线型图

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>