# echart前端vue框架

**Repository Path**: javafdx/echart-front-end-vue-framework

## Basic Information

- **Project Name**: echart前端vue框架
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-12
- **Last Updated**: 2021-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### node版本在7.6以上
### 安装koa
    npm init -y
    npm install koa
    创建app.js
### 启动
node app.js    

http://localhost:3000/

打印
/
/favicon.ico

第一行是路径
第二行是标题图标

### 目录结构
--data/  保存文件，前端需要的数据
middleware  中间件
    --koa_response_data.js  业务逻辑中间件
    --koa_response_duration.js  总耗时中间件
    --koa_response_header.js  响应头中间件
utils/ 
    --file_utils.js  快速读取文件的工具类
### 总耗时中间件
    1.第一层中间件
    2.计算执行时间
        一进入时记录开始时间
        其他所有中间件执行完后记录结束时间
        两者相减
    3.设置响应头
        X-Response-Time:5ms    

### 响应头中间件
    1.第二层中间件
    2.获取mime类型
        application/json
    3.设置响应头
        Content-Type:application/json;charset=UTF-8        

### 业务逻辑中间件
    1. 第三层中间件
    2.读取文件内容
        获取请求的路径，拼接文件路径
        读取该路径对应文件的内容
    3.设置响应体
    ctx.response.body 
### 业务逻辑
http://localhost:3000/api/map 

### 允许跨域
    1.实际上是通过ajax访问服务器
    2.同源策略
        同协议/同域名/同端口
        当前页面的地址和ajax获取数据的地址（相对比）
    3.设置响应头
    app.use(async(ctx, next) => {
        ctx.set("Access-Control-Allow-Origin", "*")
        ctx.set("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE")
        await next()
    })


### 新建vue项目
npm install @vue/cli -g   // 如果安装过脚手架，不必再次安装
vue create vision
手动选择一些特性  > Manually select features
------------------
空格选择一些插件
 Check the features needed for your project:
 ( ) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
------------------- 
是否使用历史模式的路由
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
------------------
css预处理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus
----------------------
标准eslint
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier  
----------------------
保存文件的时候提示
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
------------------  
配置文件怎么处理--单独文件处理
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
-----------------  
以上的选择是否保存预设
 Save this as a preset for future projects? (y/N) n
--------------------
 npm run serve


 ### 本地配置文件(端口，热更新)
 vue.config.js
 ### 全局配置echarts
 index.html
 <!-- 一旦通过script标签引入echarts,全局window.echarts -->
    <script src="static/lib/echarts.min.js"></script>
main.js
    <!-- 挂载 -->
    Vue.prototype.$echarts = window.echarts;
    <!-- 使用 -->
    this.$echarts
### 下载axios
    npm install axios 
--main.js
    import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
Vue.prototype.$http = axios;

### 全局样式
--assets--css--global.less

### 配置 eslint
问题：
<!-- 
 12:26  error  Unexpected trailing comma                      comma-dangle
  26:1   error  Expected indentation of 6 spaces but found 8   indent      
  27:1   error  Expected indentation of 6 spaces but found 8   indent      
  28:1   error  Expected indentation of 6 spaces but found 8   indent    
 -->
### 配置本地跨域
问题
<!-- 
xhr.js?b50d:177 GET http://127.0.0.1:8888/api/seller net::ERR_CONNECTION_REFUSED
xhr.js?b50d:177 GET http://127.0.0.1:8888/api/seller net::ERR_CONNECTION_REFUSED
-->

---main.js---
axios.defaults.baseURL = '/api'

---vue.config.js----
proxy: { // 配置本地跨域
    //配置跨域
    "/api": {
        target: "http://127.0.0.1:8888/api/", //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
        "^/api": "" // 将请求地址中的'/api'替换掉
        }
    }
}

### 后台服务请求不到
问题
<!-- 
Proxy error: Could not proxy request /seller from localhost:8999 to http://127.0.0.1:8888/api/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
 -->

 检查后台的端口和地址是否和前端的一致
 

 #### 引入图表主题
 index.html---
  <script src="static/theme/chalk.js"></script>
  使用----
  初始化图表（第二个参数）
   this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk');
主背景圆角
  canvas {
    border-radius: 20px;
  }

###  分辨率适配
  mounted() {
    // 监听屏幕的大小
    window.addEventListener('resize', this.screenAdapter);
    // 初始化的时候也要调用一下适配
    this.screenAdapter();
  },
  destroyed() {
    // 销毁监听适配--防止内存泄漏
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods:{
    // 当浏览器的大小发生变化的时候，会调用的方法，来完成屏幕的适配
    screenAdapter() {
    // 获取div节点的大小this.$refs.seller_ref.offsetWidth
      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6 // 根据不同的图表自己设定
      <!-- 都是和分辨率相关的配置 -->
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize
            }
          }
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
            }
          }
        ]
      }
      <!-- 重新配置 -->
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize,才能产生效果
      this.chartInstance.resize();
    },
  }
### 图表数据整组切换
原理：进行数据的分页处理
定时器，循环分页数据

### 引入字体(图标)文件
main.js-----
// 引入字体文件
import './assets/font/iconfont.css'
使用----
 <span class="iconfont">&#xe6ed;</span>

### 引入地图中文转拼音
utils----
map_utils.js 

### 双击事件
@dblclick


### 图表平移增加
原理：
dataZoom区域缩放属性--平移动画效果（x轴滑块）
定时器--改变
startValue起始点、endValue的值

### WebSocket基本使用
----创建对象
const ws = new WebSocket('ws://localhost:9998')
注意：WebSocket是window对象就提供了的，因此不需要额外的包
----连接成功事件
ws.onopen
----接收数据事件
ws.onmessage
----关闭连接事件
ws.onclose
----发送数据
ws.send

### 创建 socket_service.js
多端联动---服务端主动推数据
---
在main.js中调用websocket

将websocket挂载到vue原型
Vue.prototype.$socket = SocketService.Instance

### 数据请求改为websocket
----回调函数的注册
created () {
  this.$socket.registerCallBack()
}
---销毁
  destroyed() {
    this.$socket.unRegisterCallBack("trendData");
  },

###  主页面
ScreenPage.vue
路由重定向
{
    path: '/',
    redirect: '/screen'
  },
  {
    path: 'screen',
    component: ScreenPage
  },
### 修改主题
1.主题状态保存在vuex中
2.各组件监听theme的变化
---调用vuex中mutations方法
this.$store.commit('changeTheme')
---监听
import { mapState } from 'vuex'

computed: {
  ...mapState(['theme'])
},
watch: {
  theme () {
    
  }
}