# dist部署大屏数据可视化

**Repository Path**: javafdx/dist-big-screen-vue-echart

## Basic Information

- **Project Name**: dist部署大屏数据可视化
- **Description**: 练习vue和echarts
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://javafdx.gitee.io/dist-big-screen-vue-echart
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-21
- **Last Updated**: 2023-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 安装依赖
node版本
 14.15.0 (Currently using 64-bit executable)
##### 创建大屏可视化
vue2--->升级到vue3

npm install -g @vue/cli
(无法安装https://www.jianshu.com/p/97f4dd529513)
npm install -g @vue/cli@4.4.0

vue create fu-datav-screen-dev


? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM


#### 升级vue3
首先的升级vue.cli > 4.2.3版本

vue add vue-next


#### 解决浏览器12像素往下，不缩小问题

transform: scale(0.5)
#### 缩放问题
  window.addEventListener('resize', function(e) {
      
    })

#### 动画数据
vue count to插件

npm i -S vue-count-to
import VueCountTo from 'vue-count-to'
    .component('CountTo', VueCountTo)


#### 安装vue-echarts
// 引入echarts
import Echarts from 'vue-echarts'
2. 安装echarts
npm i -S echarts

3. 暂时不用"vue-echarts": "^5.0.0-beta.0",



#### 主项目安装loadsh
npm i -S lodash


#### 模板
`
<template>
  
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>
`

#### 安装echarts-gl
npm i - S echarts-gl
import 'echarts-gl'
"echarts-gl": "^1.1.1",
npm i - S echarts-gl@"^1.1.1"



        "fu-datav-libs-dev": "1.0.0",

          // #fu-container {
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  //   width: 100%;
  //   height: 100%;
    
  // }