big-screen-dataview 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
big-screen-dataview 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
big-screen-dataview 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
所属分类 大数据可视化
开源组织
地区 不详
投 递 者 你好2007
适用人群 未知
收录时间 2022-05-11

软件简介

big-screen-dataview (可视化大屏)是一个基于vue3+ts搭建的搭配可视化项目,使用image2d、image3d、echarts等多种绘图方式支持。

Issues

使用的时候遇到任何问题或有好的建议,请点击进入issue,欢迎参与维护!

如何启动本地编辑?

首先,你需要确保本地安装了node.js,然后,执行下面命令安装项目依赖:

npm install
 

接着,启动下面命令会自动打开页面,修改内容页面也自动刷新:

npm run dev
 

如果你想发布开发的代码,执行下面命令进行打包:

npm run build
 

一些说明

图表组件封装

为了方便使用,我们对依赖的库或别的依赖进行了二次封装:

  • ECharts :用于提供常用的图表
  • Image2D :绘制一些特殊的图表
  • Image3D :用于个性化的3D图形绘制

统一弹框设计

为了方便弹框的实现,我们进行了统一的设计(下面,我们以alert弹框为例来说明)。

首先,你需要准备好弹框的模板,很简单,在src/dialogs下新建一个.vue文件即可。

打卡warning.vue文件,可以看见,里面的内容是通过data来接收的,这个数据也就是调用这个弹框的时候传递的initdata这项。

当然,新建完毕后,别忘了在src/dialogs/lazy-load.ts中进行懒加载注册。

现在,已经可以使用这个弹框了,在这里,使用的例子就是:

this.$store.commit('openDialog', {
    id: "warning",
    initdata: ['alert', "你刚刚进行的操作成功了", "温馨提示", "确定"],
    callback: function () {
       // 回调
    }
});
 

对于普通的弹框,到这里就可以了,不过,由于alert等比较特殊,经常使用到,由此,我们对一些常用的,进行了更简单的封装,下面列举一下:

  • this.$alert(msg, title, funPos) :一些小提示
  • this.$confirm(title, msg, actionPos, actionNeg, mesPos, mesNeg):确认提示

新增"边框"和"图表"

首先,你需要在src/components/下的borderchart下方便新增需要的组件,然后在对应的lazy-load.ts中进行引入。

此时,页面中已经可以使用这些组件了,只不过,为了在选中配置界面可选,还需要在config/下的borderchart文件夹中进行登记。

关于地图

比如echarts中配置地图的话,需要提前安装对应的geoJSON包,如果还没有安装,可以去datapool中寻找,如果没有找到,可以去issue给留言说明。

安装好了以后,就需要去./src/map-lazy.js中添加,添加完毕后,比如香港:

export default {
    china: () => import('@datapool/china.geojson')
};
 

然后,echarts这样配置就可以使用了:

{
    ......
    type: "map",
    map: "china",
}
 

有任何疑惑都可以去给我们留言哦~,当然,也欢迎你帮助我们改进此项目。

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
5 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部