vue3使用datav
一、安装 npm install @jiaminghi/data-view
二、main.js中全局配置
import dataV from '@jiaminghi/data-view'
const app=createApp(App)
app.use(dataV)
三、
1、引入后发现报错
2、修改源码中的代码
根据提示点击进入该文件
3、
用div将整个<rect>包起来，把template里的for循环放进div中（有两个地方要改，重复操作即可）
4、修改完两处错误后重新运行项目即可
四、在组件中引入所需的图表（一定要在图表的div上给宽高）
<div class="container">
<dv-active-ring-chart
:config="options"
style="width: 300px; height: 300px"
/>
五、data中配置图表所需数据
<script>
export default {
name: "DtBar",
data() {
return {
options: {
data: [
{
name: "周口",
value: 55,
},
{
name: "南阳",
value: 120,
},
{
name: "西峡",
value: 78,
},
{
name: "驻马店",
value: 66,
},
{
name: "新乡",
value: 80,
}
]
}
}
}
};
</script>
六、图表中的配置项项 config就是你data中的数据，就像（echart中的option）
七、如果使用飞线图就要使用配置项，图片在官网按F12自己下，然后像配置echarts一样配置在数据下面就好（图片要使用require）
八、最终效果
vue3使用datav相关推荐
- Vue3使用Datav组件库库问题
Datav组件库适用于老版本Vue2,并未对Vue3.0进行适配(其实官网有适配Vue3.0版本的Datav,但是组件非常少,不推荐使用) 安装之后启动会报错 * 修正方法:* 进入路径找到报错的组件 ...
- DataV兼容vue3的方法
发现问题 在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,不是阿里那个DataV哈,用vue2开发时都一切顺利,直到有一天升级项目到vue3时,发现一堆报错,后面查了下,好像是Dat ...
- vue3使用大屏dataV详细教程
npm install @jiaminghi/data-view -D 1.全局引入dataV 2.shims-vue.d.ts文件添加declare module '@jiaminghi/data- ...
- vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
一.实现效果: Vue3-Vite-Ts数据大屏 二.vue3项目构建: 前言:随着vue2官宣年底停止维护不在提供解决问题的帮助后,vue3+ts+vite大家已经都开始用了,最近也在学习,并结合D ...
- 不习惯的 Vue3 起步六 の Echarts绘制下钻地图
序 看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图 使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
- Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
- 【3d地图】vue3.0中使用echarts geo3D
文章目录 前言 一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 3.引入到vue组件中 总结 前言 之前我们已经 ...
- 在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制 1,先去高德地图开放平台申请账号注册流程不再赘述; 2,在我的应用中创建key,选择web端Js点击提交生成; 3,生成后可以看到 ...
- dataV教程-浅用dataV
一.dataV介绍 前言:由于当前的大数据时代,人们对所产生的数据都有十分大的展示需求,都需要更美观,更加直接的方式去查看数据. datav网址:https://datav-vue3.jiamingh ...
- 大屏可视化组件套装（DataV 支持vue 3,vite）
1.开源连接地址 GitHub - vaemusic/datav-vue3: datav Vue3+TS+Vite版 2,安装 npm install @kjgl77/datav-vue3 3.全局引 ...
最新文章
- Webots ROS
- 串口流控--软件流控与硬件流控
- cogs 服务点设置
- zz让你成功的九个心理定律
- 独立游戏荣获TGA最佳叙事奖，《极乐迪斯科》凭什么这么牛？
- 洛谷 P2384 最短路题解
- python教程-做个淘宝双十一满减攻略
- DOS中的 及 用正则表达式中的什么替掉
- 解决Hibernate4执行update操作,不更新数据的问题
- 如何安装mysql 8.0.12_基于Windows安装MySQL 8.0.12图文教程
- 自己的 「画面文言修正 check list」
- 暨反欺诈建模场景实操
- A870省电内核超频内核介绍及下载[七夕]
- 简历中的“项目经验”该怎么写？
- 美通社日历 | 媒体关注、会展信息、企业财报发布，节假日备忘（1月11日—1月17日）...
- uniApp 使用uView遇到的小坑 LineProgress 线形进度条
- 淘宝客小程序制作（4）-小程序（微信支付宝）
- 极大后验概率（MAP）- maximum a posteriori（转载）
- illustrator插件-拼版功能开发-一键拼版-js脚本开发-ai插件
- 【BSP视频教程】STM32H7视频教程第3期：整体捋顺STM32H7的HAL库和LL库的框架，再配合寄存器造轮子找到更适合自己的玩法（2022-01-21）