业务程序中少不了需要使用大屏来展示统计的数据，推荐一个好用的Vue3数据大屏模板vue-datav-chart。vue-datav-chart是基于vue3.x+echarts+antv构建的数据可视化大屏展示模板，包含各种动态图表、地图展示等功能。用起来方便简单。本文地址:http://www.04007.cn/article/1051.html,未经许可,不得转载.
演示地址： http://upholdjx.gitee.io/vue-datav-chart/#
项目gitee地址：https://gitee.com/solovejack/big-screen-vue-datav
使用方法：
1.克隆项目 git clone https://gitee.com/upholdjx/vue-datav-chart.git#
2.进入目录 cd vue-datav-chart
3.安装依赖 npm install
4.本地服务 npm run serve
5.构建项目 npm run build本文地址:http://www.04007.cn/article/1051.html,未经许可,不得转载.
项目已经做好了tao-charts的components组件，这是vue-datav-chart的基本图表组件，只需要到echarts官网上找到对应展示图的数据放到chartDemo中的echarts.js里面，调整位置即可以将各类展示图片放到数据大屏中。
<tao-charts :data="options" />
options:{} //参考echarts 配置本文地址:http://www.04007.cn/article/1051.html,未经许可,不得转载.
项目做了自动注册全局组件,新增一个全局组件可直接在components下新增就可以了,但要注意需要指名name。另外有些项目可能需要展示对应不同城市区域的地图，像上面的默认项目用的是北京的城市数据，可以到datav网站数据中找到你要的城市区域下载地图矢量数据等，替换chartDemo中的data.json文件即可。
下载地址：http://datav.aliyun.com/tools/atlas/index.html
https://www.pslkzs.com/ps/examples/mapInner.php?id=110100&name=%E5%8C%97%E4%BA%AC%E5%B8%82本文地址:http://www.04007.cn/article/1051.html,未经许可,不得转载.
本文地址:http://www.04007.cn/article/1051.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
|
|
手机扫码直接打开本页面 |
