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"
方法总结如下:
- 给容器,容器得有高度
- 给数据
- 初始化
- 绘图表
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