vue数据可视化界面，智慧图表。Echarts，以及git

news/2024/7/10 3:05:55 标签: git, 数据可视化, Eacharts, vue, github

一、数据图表

一张图表胜过千万句话

1.1HighChart

  • 概念
兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库
  • 下载
一、通过CDN
https://code.highcharts.com.cn/index.html
二、通过NPM下载（用的比较多）
npm install highcharts
三、通过官网下载
https://www.highcharts.com.cn/download
通过引入库的方式引入到本地
  • 基本应用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 第一步引入核心库 -->
    <script src="./node_modules/highcharts/highcharts.js"></script>
    <style>
      #box {
        width: 600px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <!-- 第二步 创建一个容器 用来承载你的数据图表 指定当前图表库的大小 -->
    <div id="box"></div>
    <!-- 第三步  逻辑交互 -->
    <script>
      //创建图表的配置项
      let options = {
        chart: {
          type: "bar", //指定图表的类型，默认是折线图（line）
        },
        credits: {
          //版权信息 （去除）
          enabled: false,
        },
        title: {
          text: "学习天数", // 标题
        },
        xAxis: {
          categories: ["vue", "angualr", "React", "node"], // x 轴分类
        },
        yAxis: {
          title: {
            text: "学习的时长", // y 轴标题
          },
        },
        series: [
          //如果数据图表的数据是来自于后端，替换这个数组即可
          {
            // 数据列
            name: "小王", // 数据列名
            data: [15, 0, 4, 1], // 数据
          },
          {
            // 数据列
            name: "小李", // 数据列名
            data: [25, 0, 4, 100], // 数据
          },
          {
            // 数据列
            name: "小张", // 数据列名
            data: [45, 0, 4, 10], // 数据
          },
        ],
      };
      console.log(Highcharts, "核心库");
      //chart 默认需要三个参数，我只填两个。第一个，你需要渲染的容器位置，第二个就是配置项
      let charts = Highcharts.chart("box", options);
    </script>
  </body>
</html>

1.2Echarts（用的更多一些）

  • 官网地址
https://echarts.apache.org/zh/index.html
  • 概念
一个基于 JavaScript 的开源可视化图表库
  • 下载方式
一、通过CDN 
jsdelivr.com/package/npm/echarts
二、通过NPM(通过NPM)
npm install echarts
三、通过官网
https://echarts.apache.org/zh/download.html
四、通过github
https://github.com/apache/echarts/releases

vueEcharts_125">1.3如何在vue脚手架中引入Echarts

  • 局部引入
vue"><template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
// 引入echarts
//es5引入方式
// let echarts = require("echarts");
//echarts 5.x版本 引入方式发生了变更 所有引入方式都是基于暴露的方式
// import 变量 from '位置'
// import {变量} from 'weizhi'
 import * as echarts from 'echarts';
// import echarts from 'echarts'
export default {
  data() {
    return {};
  },
  mounted() {
    //当组件一加载就渲染 数据图表（数据可视化）
    let mycahrt = echarts.init(document.getElementById("container"));
    let options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    //设置配置项
    mycahrt.setOption(options)
  },
};
</script>

<style lang="stylus" scoped>
#container
    width 800px
    height 700px
</style>
  • 全局引入

main.js

//全局引入echart
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

home.vue

vue"><template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //当组件一加载就渲染 数据图表（数据可视化）
    let mycahrt = this.$echarts.init(document.getElementById("container"));
    let options = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    //设置配置项
    mycahrt.setOption(options)
  },
};
</script>

<style lang="stylus" scoped>
#container
    width 800px
    height 700px
</style>

git_237">二、git代码管理

2.1代码管理工具

  • svn (小乌龟)
https://tortoisesvn.net/
  • github(所有开源项目的归属地)
https://github.com/
  • 码云
https://gitee.com/

https://git-scm.com/

注意点：

无论是gihub还是码云，他们都是用git命令去操作的。所以命令都一样

git软件的安装，下一步，下一步，傻瓜式安装即可

装成功的状态： 鼠标右键看到 git Bash Here 就OK

git_281">2.2 git基本命令

  • 打开git软件
鼠标右键看到 git Bash Here
  • 查看当前目录
pwd
  • 进入到某一个目录
cd 文件夹
  • 查看文件 和 文件详情
ls  和 ll

git init 
这个时候会创建一个隐藏的.git文件
  • 设置git的用户名和 email
git config --global user.name '你的名字'
git config --global user.email '你的邮箱'
  • 查看所有配置列表
git config --list
  • 文件的添加
git add . 添加当前目录下的所有文件以及文件夹
git add * 添加当前目录下的所有文件以及文件夹
git add *.txt  添加一类文件
git add 文件名称  添加某一个文件
  • 查看日志
git log
  • 查看详细日志
git reflog

查看到版本号 eg:2b07c3f
  • 回退版本
git reset 版本号  --hard

根据你指定的版本号进行回退
  • 删除文件
git rm 文件或者文件夹

记得删除之后 一定要提交 
add
commit
push
的整理流程
  • 分支
上线之前，做大量的测试工作，你也回修改N个Bug
之后的开发工作，就不能在这个版本进行
我们会封版。eg:master 封板不能用
领导会创建一个新的分支，这个新的分支在创建的时候，默认就把以前的内容全部带过来了。接下来的开发就这个分支做


git branch  查询分支
git branch 分支名 创建分支
git checkout 分支名   切换分支
  • 在新创建的分支下创建项目内容
git add 文件/文件夹
git commit -m '日志'
git push --set-upstream origin 分支名称

2.3创建一个远程仓库 （新项目）

先去GitHub/码云创建一个新的远程仓库，然后把本地暂缓区的内容提交到远程仓库

一、登录github/码云输入用户名密码
二、新建一个远程仓库，在官网右上角（点击+ ）
三、创建一个仓库名称，添加仓库描述，创建一个公有的仓库，不需要为仓库创建其他内容

在公司的创建一个新项目的骚操作

一般这一部分，轮不到大家去做。

一、在本地创建一个文件夹，创建相关的基本骨架
二、初始化当前文件夹变成本地仓库(会出现一个.git的隐藏文件)
git init
三、本地的所有内容上传到暂缓区
git add . 
四、提交的时候要做记录
git commit -m '尽量写英文，非要写写中文也可以'
五、链接远程仓库
git remote add origin https://gitee.com/zhangzhangzhangdada/shop-admin.git
六、把暂缓区的内容推送到远程仓库  (master 默认的分支名字)
git push -u origin master

2.4 进入一个公司第一天的骚操作

在自己电脑创建一个文件夹，把公司的项目克隆到本地

git clone https://gitee.com/zhangzhangzhangdada/shop-admin.git（仓库地址）

2.5 每天工作的骚操作

注意： 
上传之前！！！一定先更新！！！！不要全量提交！！！
修改什么提交什么！！！
  • 下载（拉取最新的内容到本地，早晨上班）
git pull   拉取（把远程仓库内容拉取到本地）
  • 下班之前一定要提交代码
git pull   拉取（把远程仓库内容拉取到本地）
git add 文件/文件夹 添加
git commit -m '备注信息'
git push
  • 解决冲突
一定要先拉取，然后解决版本冲突，然后重新提交

2.6 其他

git GUI

https://www.sourcetreeapp.com/

vscode步骤
克隆步骤（操作一次即可）
先创建一个空文件
源代码管理（左侧第三个），点击上方... 点击克隆，把远程仓库的内容克隆到本地的空文件中
=======================
上下班的工作
当当前目录下的文件以及文件夹发生变化的时候，源代码管理（左侧第三个）就跟着发生变化。你就可以点击+号（添加的过程），提交到暂缓区，需要你输入log赋值，回车。
...上选择推送，推送到远程仓库

三、项目的打包

上线之前，你的项目要进行打包

npm run bulid 
生成 dist 文件夹 

如果你有服务器，就把前端代码和后台一起部署
如果没有，没事，在工作中是运维或者后端人员去部署 Nginx服务器

四、SSR服务端渲染

4.1 官网地址

https://ssr.vuejs.org/zh/

4.2 概念

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

4.3优缺点

  • 优点
更利于SEO优化

运行速度更快
  • 缺点
开发条件有所限制
vue中一些自带的生命周期以及钩子函数有可能失效
运行环境有所限制
node 服务器

4.4 下载安装SSR和VUE

npm install vue-server-renderer

npm install vue

4.5 创建一个node服务器

//引入核心库
let express  = require('express')
let app = express()
//创建get方式
app.get('/',(req,res)=>{
    res.send('哈哈哈哈')
})
//创建监听
app.listen('4200',()=>{
    console.log('======服务器运行中，撒花。。。====');
})

4.6 实现服务端渲染（运行模板字符串）

//引入 vue核心库
let Vue = require("vue");
//引入核心库
let express = require("express");
let app = express();
//实例化Vue
let vm = new Vue({
  data: {
    msg: "服务端好好好用。。。",
    newslist:[
        {id:1,title:'111'},
        {id:2,title:'222'},
        {id:3,title:'333'}
    ]
  },
  template: "<div><h1>{{msg}}</h1><ul><li v-for='item in newslist' :key='item.id'>标题：{{item.title}}</li></ul></div>",
});
//创建渲染方法
let render = require("vue-server-renderer").createRenderer();

//创建模板字符串 renderToString这个函数有2个参数，默认是三个，一般只用两个，一、你要渲染的内容，2是回调函数
render.renderToString(vm, (err, html) => {
  console.log(html, "模板内容");
  //创建get方式
  app.get("/", (req, res) => {
    res.send(html);
  });
});

//创建监听
app.listen("4200", () => {
  console.log("======服务器运行中，撒花。。。====");
});

五、NUXT

5.1官网

https://zh.nuxtjs.org/
https://www.nuxtjs.cn/guide/installation(中文)

5.2 概念

使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架，让 Web 开发变得简单而强大。

5.3 安装

npx create-nuxt-app <项目名>

http://www.niftyadmin.cn/n/508982.html

相关文章

vue中TS的应用

vue中TS的应用

TS(typescript) ts: typescript ,它是js超集&#xff08;包含js所有的语法&#xff0c;在基础上增加了数据类型定义&#xff09; 它最主要做的一件事&#xff0c;就是数据类型验证。 js是弱类型语言&#xff0c;java是强类型语言 let a 123,a 就是number类型。let a 123,a就…
阅读更多...
react基础，脚手架，组件创建，组件通信

react基础，脚手架，组件创建，组件通信

React基本知识 react并不是框架&#xff0c;它只是一个类库。类似于jquery。它没有设计模式&#xff0c;它是单项数据流。它大部分都是原生js的写法。 如果一定非要把它跟MVC中V 是一样的。它更多的是操作视图&#xff08;view&#xff09; react是脸书&#xff08;Facebook&am…
阅读更多...
react生命周期，ref，表单，路由，路由传参接参，

react生命周期，ref，表单，路由，路由传参接参，

一、生命周期 初始化时期 constructor 初始化 render 渲染 componentDidMount 挂载完成 //大量的异步操作以及接口的调用&#xff0c;我们会在componentDidMount中完成更新期 首先判断是否含有shouldComponentUpdate. 如果有&#xff0c;根据返回值状态&#xff0c;return …
阅读更多...
react的UI框架Antd,axios,状态管理

react的UI框架Antd,axios,状态管理

UI框架&#xff08;pc和移动 Antd&#xff09; 5.1 设计体系官网 https://ant.design/index-cnhttps://ant.design/docs/react/introduce-cn5.2 概念 antd 是基于 Ant Design 设计体系的 React UI 组件库&#xff0c;主要用于研发企业级中后台产品。5.3✨ 特性# &#x1f3…
阅读更多...
微信小程序开发（详解）-保证学的明明白白的

微信小程序开发（详解）-保证学的明明白白的

微信开发简介 1.微信开发概述 概述 &#xff08;1&#xff09;微信开发即微信公众平台开发&#xff0c;将企业信息、服务、活动等内容通过微信网页的方式进行表现&#xff0c;用户通过简单的设置&#xff0c;就能生成微信网站。 &#xff08;2&#xff09;通俗的说&#xff…
阅读更多...
微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程

微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程

三、视图层概述 、 框架的视图层由 WXML 与 WXSS 编写&#xff0c;由组件来进行展示。将逻辑层的数据反映成视图&#xff0c;同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language) 用于描述页面的结构。WXS(WeiXin Script) 是小程序的一套脚本语言&#xff0c;结合 …
阅读更多...
轮距和轴距有什么区别_林肯冒险家怎么样？冒险家和锐际有什么区别？

轮距和轴距有什么区别_林肯冒险家怎么样？冒险家和锐际有什么区别？

近日&#xff0c;林肯旗下首款国产车型&#xff0c;全新林肯冒险家Corsair正式上市。与福特锐际一样&#xff0c;冒险家全系也标配高功率版2.0L涡轮增压发动机&#xff0c;官方指导价为24.68-34.58万元&#xff0c;其发动机型号与福特锐际完全相同&#xff0c;那么冒险家是精装…
阅读更多...
html背景音乐_游戏中的背景音乐-奇亿音乐

html背景音乐_游戏中的背景音乐-奇亿音乐

无论是复杂的大型游戏&#xff0c;还是简单的H5类游戏&#xff0c;游戏背景音乐总是一如既往的存在于游戏内&#xff0c;与游戏如胶似漆&#xff0c;那么游戏背景音乐存在于游戏内有什么特殊的含义呢&#xff1f;奇亿音乐认为&#xff0c;游戏背景音乐存在于游戏中大致可分为两…
阅读更多...
最新文章

Copyright @ 2022~2023