首页 前端知识 2023年7月最新|大屏可视化项目、配置

2023年7月最新|大屏可视化项目、配置

2024-06-26 00:06:23 前端知识 前端哥 420 554 我要收藏

效果图
在这里插入图片描述

大屏可视化配置

运行环境:VScode
Vue使用

<!-- 从三方网站引入网上的vue。需要网络 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
<!-- 从vue官网下载vue.js文件,本地引入。不需要网络-->
<script src="./js/vue.js"></script>

(推荐)我们一般采用脚手架来完成开发
(不推荐)谷歌或Edge浏览器搜Vue devtools 点击扩展,获得扩展,搜索安装即可,但是这样开发效率不高。

Vue的脚手架使用

1、选中一个存放项目的文件夹,右键–>【在集成终端中打开】
在这里插入图片描述

2、安装工具类的包 一般是全局安装

在终端输入npm i -g @vue/cli

npm i -g @vue/cli 

注意当前vue脚手架是webpack打包的;当前 vue2 => vue-cli 5.0.8

3、构建项目

在终端输入【vue create 项目名称(不可以是中文),然后回车。
例如:vue create vue01 或 vue create vue02 或 vue create vue03 ...

在这里插入图片描述

(1)选择【> Manually select features 自定义安装】。然后按回车。

键盘的↑、↓、←、→可移动选择,空格键是确认键。下文同理,不再赘述)
在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset:  Default ([Vue 3] babel, eslint)  //**默认vue3 babel, eslint**
Default ([Vue 2] babel, eslint)  //**默认vue2 babel, eslint**
> Manually select features   //**自定义安装**

(2)选择下述带(*)的插件

键盘的↑、↓、←、→可移动选择,空格键是确认键。下文同理,不再赘述)
在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel> 转化器          //选择插件
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors    //css预处理器 sacc less 
 ( ) Linter / Formatter    //语法校验 先不用 校验比较严格
 ( ) Unit Testing
 ( ) E2E Testing

(3)vue3版本和2版本均可,这里作者选择用的是vue2版本。
在这里插入图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features? Check the features needed for your project: Babel, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  3.x  
> 2.x    //选择2版本

(4)选择预处理器Sass/SCSS (with dart-sass)
在这里插入图片描述

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)   
  Less 
  Stylus

(5)这里我们选择独立配置文件【In dedicated config files】
在这里插入图片描述

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  
> In dedicated config files
  In package.json

(6)是否保存(随便啦,y是yes保存,)
在这里插入图片描述

? Save this as a preset for future projects? Yes
? Save preset as: vue01 //vue01是我取的保存名称哦,随便取

(7)记得切换到要项目文件夹。通过输入cd 项目名切换,例如cd vue01
在这里插入图片描述

🎉  Successfully created project vue02.
👉  Get started with the following commands:

 $ cd vue02
 $ npm run serve

最后,介绍一下生成的Vue02的文件结构
image-20230509220141540

过了几天继续写,上述环境配置好了,文件不见了,重新新建一个。

vue02文件不重要,重要的是按照上述步骤配置好了环境就行。

接下来,我们开始大屏可视化项目。

一、可视化适配

大屏下显示一般都是16:9尺寸 1920*1080 ,做适配也就是在这个比例的基础上进行的

1、打开VScode,新建一个文件夹,任意命一个名称,例如:bigscreen。
在这里插入图片描述

2、右键【bigscrean】文件夹,选择【在集成终端中打开】,页面下方弹出终端窗口。
在这里插入图片描述

3、在终端输入【vue create big-screan】 ,即创建一个名为big-screan的文件夹。

vue create big-screan

在这里插入图片描述
4、输入cd .\big-screan\ 后,回车。

cd .\big-screan\

再输入npm i lib-flexible 然后回车。

npm i lib-flexible

在这里插入图片描述

文件目录自动生成一系列文件。介绍一下生成的Vue的文件结构
image-20230509220141540
5、打开文件目录中的【node_modules】文件夹;然后,找到小L开头的【lib-flexible】文件夹并打开,再打开【flexible.js】文件夹
在这里插入图片描述

【设置适配】修改flexible.js文件里的源码

修改第71行、72行、74行代码,源代码文件lefxible设计稿默认按540计算,这里我们需要把设计稿宽度改成 1920。
改之前
在这里插入图片描述

改之后
在这里插入图片描述
开发的时候使用单位:rem,即可;切记 1rem = 80px哦(1920 / 24 == 80px),其它源码部分 千万不要乱修改哦。

6、配置插件

①点击1处,
②在2处搜索【px to rem & rpx & vw(cssrem)】
③点击插件右下角的安装(下图圈③处)
在这里插入图片描述
安装完插件后,插件右下角会有一个圆形齿轮,点击【齿轮】——>点击【Extension Settings扩展设置】
在这里插入图片描述
鼠标向下滑动找到Cssrem:Root Font Size选项,将值改成80(如下图)
在这里插入图片描述

7、vue中使用echarts

右键点击【big-screan】文件夹,点击【在集成终端中打开】;
在这里插入图片描述

在终端下载echarts,在终端输入npm i echarts,并按回车。

npm i echarts

在这里插入图片描述

二、源文件

想拿到源文件直接运行,请移步至gzh【李桥桉】,s❤【可视化】。

首先按照上文配置好环境。
建议拿到源文件后。直接把以下框起来的几个文件,替换掉你按照上文配置过程中,系统自动生成的对应的文件。
对比下图框里的文件,把你那里没有的文件复制进去,已有的就直接替换掉。
在这里插入图片描述

三、运行

右键点击【big-screan】文件夹,点击【在集成终端中打开】;
在这里插入图片描述
在终端输入nmp run serve运行项目,并按回车。

nmp run serve

在这里插入图片描述
等待加载结束,会生成如下两个蓝色地址,单击并按住Ctrl键,即可打开项目。
在这里插入图片描述
在这里插入图片描述
效果图
在这里插入图片描述

想拿到源文件直接运行,请移步至gzh【李桥桉】,s❤【可视化】。

附:常见的echarts

更改TestView.vue中的echart表格代码,可以更改任意图表,下面是一些其他图的代码


```css
折线图
option = {
  xAxis: { // echarts配置x轴
    type: 'category', 
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x轴显示数据
  },
  yAxis: { // y轴配置
    type: 'value'
  },
  series: [ // 配置数据
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line' // 数据的显示方式 line折线
    }
  ]
};
柱形图
 {
    tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
     },
     grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
     },
     xAxis: [
          {
            type: "category",
            data: ["张三", "李四", "王五", "赵六", "田七", "孙八", "钱九"],
            axisTick: {
              alignWithLabel: true,
            },
          },
     ],
     yAxis: [
          {
            type: "value",
          },
     ],
     series: [
          {
            name: "成交量",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 20, 33, 39, 33, 22],
          },
     ],
}
饼图
{
   legend: {
      top: "bottom",
      textStyle: {
            color: "#fff",
      },
   },
  series: [
      {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
       },
       data: [
              { value: 40, name: "成华区" },
              { value: 38, name: "金牛区" },
              { value: 32, name: "武侯区" },
              { value: 30, name: "青羊区" },
              { value: 28, name: "双流区" },
              { value: 26, name: "锦江区" },
            ],
        },
    ],
}
echarts关键属性

title 配置标题
legend 图示配置
textStyle 对象是配置颜色的
xAxis 折线图配置x轴
yAxis 折线图配置y轴
tooltip 鼠标悬停 显示图表信息
series 数据信息
color 图标颜色

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13596.html
评论
发布的文章

JSON、Ajax

2024-07-27 22:07:31

JsonNode、ObjectNode和ArrayNode

2024-07-27 22:07:30

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!