diff --git a/README.md b/README.md index bbb525664ce11e0333a99d37a20cb2ed5b66eef3..9ed640dd4c667713e19e1adac98f57ff02bdd044 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ ## 一、项目描述 -- [**React 版本请点击这里查看,全新界面超级好看!!!(o ゚ v ゚)ノ**](https://gitee.com/MTrun/react-big-screen) - 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** ",通过 Vue 组件实现数据动态刷新渲染,内部图表可实现自由替换。部分图表使用 DataV 自带组件,可进行更改,详情请点击下方 DataV 文档。 + +- [**Vue3 版本请点击这里查看,使用 Hooks+TypeScript 实现,全新内容等你探索!**](https://gitee.com/MTrun/vue-big-screen-plugin) +- [**React 版本请点击这里查看,全新界面超级好看!!!**](https://gitee.com/MTrun/react-big-screen) - 项目需要全屏展示(按 F11)。 - 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 **按需引入**。 - 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。 - 项目环境:Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题,请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。 -- 请拉取 master 分支的代码,其余是开发分支。 +- 请拉取 master 分支的代码,其余分支是开发分支。 +- Vue3 版本代码在新项目 vue-big-screen-plugin 开发当中,敬请期待~ 友情链接: @@ -36,7 +39,7 @@ ### 启动项目 -需要提前安装好 `nodejs` 与 `npm`,下载项目后在项目主目录下运行 `npm/cnpm install` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`,就可以启动项目,启动项目后需要手动全屏(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。 +需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`,就可以启动项目,启动项目后需要手动全屏(按 F11)。如果编译项目的时候提示没有 DataV 框架的依赖,输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。 ### 封装组件渲染图表 @@ -158,7 +161,7 @@ data() { ### 屏幕适配 -本项目借助了 flexible 插件,通过改变 rem 的值来进行适配,原设计为 1920px。 ,适配区间为:1366px ~ 2560px,本项目有根据实际情况进行源文件的更改,小屏幕(如:宽为 1366px)需要自己舍弃部分动态组件进行适配,如'动态文字变换组件'会影响布局,需要手动换成一般节点, +本项目借助了 flexible 插件,通过改变 rem 的值来进行适配,原设计为 1920px,适配区间为:1366px ~ 2560px,本项目有根据实际情况进行源文件的更改,小屏幕(如:宽为 1366px)需要自己舍弃部分动态组件进行适配,如'动态文字变换组件'会影响布局,需要手动换成一般节点。 ```js // flexible文件位置: `common/flexible.js`,修改部分如下 @@ -206,4 +209,4 @@ Vue.prototype.$http = axios.create({ ## 五、其余 -这个项目是个人的作品,难免会有问题和 BUG,如果有问题请进行评论,我也会尽力去更新,自己也在前端学习的路上,欢迎交流,非常感谢! +这个项目是个人的作品,难免会有问题和 BUG,如果有问题请进行评论,我也会尽力去更新,自己也在前端学习的路上,欢迎交流,非常感谢! \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c7559f9a42d54faddee73a623dbd09c70a2b47c5..0c7e1b216519821d9a2ef2a790ab6e4499311e0f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "big-screen-vue-datav", - "version": "0.1.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -14,15 +14,9 @@ } }, "@babel/compat-data": { - "version": "7.8.6", - "resolved": "https://registry.npm.taobao.org/@babel/compat-data/download/@babel/compat-data-7.8.6.tgz", - "integrity": "sha1-fuqg36F+UMfZwIMlFe7gm1bwTjU=", - "dev": true, - "requires": { - "browserslist": "^4.8.5", - "invariant": "^2.2.4", - "semver": "^5.5.0" - } + "version": "7.12.7", + "resolved": "http://npm.rongdasoft.com:7001/@babel/compat-data/download/@babel/compat-data-7.12.7.tgz", + "integrity": "sha1-kym0eCp9a71+71fhGt35HuPvHkE=" }, "@babel/core": { "version": "7.8.7", diff --git a/src/main.js b/src/main.js index 4dc83773f9a3d3972c2db15fa8921ac82a64ad5e..d11922254e055f1dacfdc5d65b9da37bd82df6c1 100644 --- a/src/main.js +++ b/src/main.js @@ -24,7 +24,11 @@ import './assets/scss/style.scss'; //引入echart +//4.x 引用方式 import echarts from 'echarts' +//5.x 引用方式为按需引用 +//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式 +//import * as echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.config.productionTip = false; diff --git a/src/views/centerLeft1.vue b/src/views/centerLeft1.vue index a7e8cd5f57a1ef38b6f518c2ad200c22bf018b03..957358bb6e9a27263d8557f6953f641d219f767c 100644 --- a/src/views/centerLeft1.vue +++ b/src/views/centerLeft1.vue @@ -1,5 +1,5 @@