Vue3.x+Echarts 5.x数据可视化小项目

目录

技术栈

flex布局 less rem屏幕适配

Vue3.x下载和使用echarts

 1.在App.vue中：

2.在homepage组件中

安装axios并用provide/inject进行全局使用  

后端cors支持跨域

在index.js设置跨域

组件内使用echarts

vue3使用axios进行获取数据

项目打包

1.如果想打包时设置路径在本机电脑观看

2.如果是history路由模式则改成hash模式

使用阿里云服务器部署上线

 1.阿里云服务器连接

2.部署上线（前台：前端代码）

3.部署上线（后台：服务器文件和node.js安装包）

4.测试

---

技术栈

vue3+router+axios+echarts

flex布局 less rem屏幕适配

后端：nodejs + express

flex布局 less rem屏幕适配

rem屏幕适配用到阿里开源库：lib-flexible

1.安装：npm i lib-flexible -S

2.引入

3.修改lib-flexible中的flexible.js的rem大小设置

4.安装vscode插件cssrem设计样式大小的时候会自动将px数值换算成rem

Vue3.x下载和使用echarts

npm i echarts -S

用provide和inject进行传值

 1.在App.vue中：

    import { provide } from 'vue'
    import * as echarts from 'echarts'
    export default {
      setup () {
        // provide('名字','传递内容')
        provide('echarts', echarts)
      }
    }

2.在homepage组件中

    import { inject } from 'vue'
    export default {
      name: 'HomPage',
      setup () {
        const $echarts = inject('echarts')
        console.log($echarts)

安装axios并用provide/inject进行全局使用  

npm i axios -S

后端cors支持跨域

在index.js设置跨域

    /* 设置跨域 */
  app.use(function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type,Content-Length,Authorization,Accept,X-Requested-with,yourHeaderFeild');
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
    next()
  })

组件内使用echarts

<template>
  <div>
    <h2>图表1</h2>
    <div class="chart" id=