基于Vue的可视化大屏（结合了dataV组件库和echarts）

最近，应学校课程的要求，自学了一段时间的Vue，也是结合了dataV组件库和echarts实现了一个可视化大屏。效果虽然不是很炫酷，但是也算是花费了很多的时间，在大屏的制作过程中也是对Vue的框架有了更多的理解，所以想记录一下。

这里的可视化大屏的项目文件夹，可以直接点击跳转，也可以到如下的链接里下载：

百度网盘链接
链接: https://pan.baidu.com/s/1Rwx_QRKvT0rA8Q2-_G1u3A?pwd=hj5n

提取码: hj5n 

对于图表的配置，可以参考官网，dataV官网，charts官网，echarts官网，这里可视化大屏的数据来源于艺恩娱数

可视化大屏显示的效果如下：

在创建的Vue项目里，先是在vue.config.js文件里添加了如下的代码，这里是为了避免一些非标准的操作带来的报错。

其次，我想说的是这里的main.js文件里的内容。

在main.js文件里执行的操作主要是将App.vue文件里的对象导出并挂载到id为app的DOM元素上。这里，我在学习的时候一直对这里导出的对象存在疑惑，我阐述一下我自己的理解。

这里导出的对象实际上是在App.vue文件里的export default里定义的对象，在这里的对象里包含了App.vue文件里的DOM的相关的数据，以及一些绑定的方法等等，这些是可以看到的内容。

此外，vue会借助vue-loader将template标签里的html代码编译成js对象，在render函数里，这里的js对象也和虚拟DOM息息相关。

所以，在将这里导出的对象App挂载到指定的DOM元素上（即id为app的DOM元素），就可以将id为app的标签替换为App对象里的render函数里js对象转化而来的真实的DOM元素。

下图是main.js文件里的内容：

// 从 vue模块中导入默认的内容赋值给变量 Vue
// vue模块是 Vue.js框架的核心库，导入 vue后，可以使用 Vue.js提供的各种功能，如创建 vue实例，定义组件

// 在阅读了源码之后发现，这里的Vue是vue文件里的同名的接口
import Vue from 'vue'
// 从当前目录下的 App.vue文件中导入默认的内容，并赋值给变量 App
// App.vue通常是 Vue项目的根组件，包含了项目的整体结构和逻辑
import App from './App.vue'

Vue.config.productionTip = false

// 从模块 @jingminghi/data-view中导入默认的内容赋值给变量 dataV
import dataV from '@jiaminghi/data-view'
console.log("输出的对象为：")
console.log(dataV)
// 把 dataV作为插件插入到 vue的实例中，这里dataV是一个函数
// 这里的dataV会被检查是否是一个函数，如果是一个函数，则该函数会被直接执行
// 这里的use()函数实际是继承了Vue接口的VueConstructor接口中定义的方法
Vue.use(dataV)


// 从'echarts'模块里的导入默认内容，赋值给变量echarts
import* as echarts from 'echarts'
// 将echarts实例挂载到Vue原型对象上，属性名为$echarts
Vue.prototype.$echarts = echarts

// 创建Vue实例，将App.vue组件插入，并将其挂载到id为app的DOM元素上
// 所以整个页面的效果图即由App.vue文件来决定，
// 这里挂载的id为app的DOM元素在public文件夹里的index.html文件
// public文件夹里的index.html文件是项目的主页面，
new Vue({
  // 这里的h是
  render: h => h(App),
}).$mount('#app')

图表的绘制，在代码中也有很多的注释，同时在可视化大屏的制作中遇到了一些的问题，也是参考了其他大佬的文章

如何在Vue中使用echarts可视绘图工具_vue echarts 图表可视化 生成器-CSDN博客