Vue中使用echarts以及项目部署Nginx

vue项目中使用echarts

原生js的话，需要引入cdn；vue开发的话，npm i echarts --save

main.js中引入echarts，和service、element-ui一样，先导入，再全局挂载

// main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

// 在特定文件中使用echarts
import echarts from "echarts"

方法总结如下：

• 给容器，容器得有高度
• 给数据
• 初始化
• 绘图表

<div class="main1" style="height:300px"></div>
<div class="main2" style="height:300px"></div>

let myChart1 = this.$echarts.init(document.getElementClassName("main1"))
myChart1.setOption({
    title:{
        text:"标题"
    },
    xAxis:{
        data:["广东","江苏","山东","陕西"]
    },
    yAxis:{},
    series:[{
      name:"资产情况",
      type:"bar",
      data:[34,23,54,56]
    }]
    
})

let myChart2 = this.$echarts.init(document.getElementClassName("main2"))
let option = {
     title:{
        text:"标题"
    },
    xAxis:{
        data:["广东","江苏","山东","陕西"]
    },
    legend:{
        data:["线条1","线条2","线条2","线条3"]
    },
    yAxis:{},
    series:[{
      name:"线条1",
      type:"line",
      data:[34,23,54,56]
    },
      name:"线条2",
      type:"line",
      data:[24,13,55,36]
    },{
      name:"线条3",
      type:"line",
      data:[31,86,25,86]
    },{
      name:"线条4",
      type:"line",
      data:[14,53,25,06]
    }]
}
myChart2.setOption(option);

express启动nodeJS后端服务

初始化，得到一个package.json文件

npm init -y

下载配置文件内文件

npm i express -S

这样后端环境就搭建好了

使用原生js写接口

// 文件是app.js
// 导入模块
let express = require("express");
// 创建实例
let app = express()

app.get('/',(req,res)=>{   // 第一个参数是url，第二参数是回调函数
    res.send("Hello,World")
})

app.litsen(3000,()=>{  // 监听3000端口,以及回调函数
    console.log("express start at export 3000")
})

跑项目node app.js

还可以写其他的接口

引入Json数据

使用geoJson包

import geoJson from "../../data.json"

路由导航守卫(没有验证的话一种强制跳转)

在登陆系统中，没有路由导航守卫的话，localhost:8080:/home，就可以跳过login界面，直接登陆到系统内。添加导航守卫的话，访问localhost:8080:/home就会跳到localhost:8080:/login

router.beforeEach((to,from,next)=>{
    let flag = localStorage.getItem("username"); //验证的话需要再LocalStorage里面删掉username
    if(!flag){
        if(to.path != '/login'){
            next("/login")
        }else{
            next();
        }
    }else{
        next();
    }
})

登陆之后，LocalStorage里面存储了username，再次访问/home就可以直接访问

打包项目

npm run build

部署项目

使用nginx。

brew config先查看自己的镜像源是不是国内的，然后下载nginx即可brew instal nginx

下载好nginx以后修改nginx配置，主要是端口和本地项目地址

// 查看nginx安装目录
open /usr/local/etc/nginx
// nginx.config 修改打包后的dist文件地址到 配置文件里的root
// 激活配置文件
nginx -t -c /opt/homebrew/etc/nginx/nginx.config
// 启动项目
brew service restart nginx
// 停止项目
nginx -s quit