欢迎使用DatkTalks
DataTalks（数说）名称来源：用数据说话，述说数据背后的故事；作者意图是想用数据图表的形式，直观可视的展现数据；
DataTalks数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。DataTalks旨让更多的人看到数据可视化的魅力，帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用，满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。
- 系统构成
系统由设计器（DtDesigner）和运行器（DtRender）两部分组件构成，其中：
DtDesigner负责大屏的布局配置、属性设置、脚本编写等，主要面向系统开发人员、维护工程师、信息化管理人员；
DtRender负责将设计器制作的大屏呈现给最终用户；
功能一览
- 多数据源支持：内置mysql、elasticsearch、kudu等多种驱动，支持自定义数据集省去数据接口开发
- 多组件支持：目前已支持60+种大屏组件/图表，不会开发，照着设计稿也可以制作大屏。
- 工程化管理：大屏采用工程化管理，一个工程可以包含多张大屏
-轻松实现：三步轻松完成大屏设计：配置数据源、设计数据集、拖拽布局大屏、保存发布。
- 更多功能等你探究...
三方组件
| 名称 | 版本号 | 说明 | 安装 |
|---|---|---|---|
| element-ui | 2.15.1 | 页面组件（必选） | npm i element-ui@2.15.1 |
| echarts | 5.4.2 | 图表组件（必选） | npm i echarts@5.4.2 |
- - echarts: 5.4.2 图表组件
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts- - element-ui: 2.13+
import ElementUI from 'element-ui'
Vue.use(ElementUI, { size: 'medium'> })- - vue-superslide: 1.1.23
- - vue-superslide: 0.1.1
浏览器兼容性
Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等）
跟Vue项目集成
1. 安装包
npm i dt-builds或
yarn add dt-builds2. 引入并全局注册DT组件
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui' //引入element-ui库
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式
Vue.use(ElementUI) //全局注册element-ui
import DT from 'dt-builds' //引入DT库
import 'dt-builds/dist/dt.css' //引入DT样式
Vue.use(DT) //全局注册DT(同时注册了dt-designer和dt-render组件)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')3. 在Vue模板中使用表单设计器组件
<template>
<dt-designer :project="project" :globalDsv="globalDsv"></dt-designer>
</template>
<script>
export default {
name: 'dt',
data () {
return {
project: {
id: "PJASID93gRi",
projectCode: "PJASID93gRi",
projectDesc: "",
projectGroup: "",
projectName: "aa",
upgradeable: true,
encrypt: true,
screens: [
{
currentLayer: "alllayer",
id: "SN6yD32suNh",
label: "主页",
name: "SN6yD32suNh",
canvas: {
scale: 0.6,
width: 1920,
height: 1080,
bgimage: '/images/bj.png',
bgColor: 'red',
options: {
setup: [],
value: {
$filter: {
brightness: 100,
contrast: 100,
grayscale: 0,
huerotate: 0,
invert: 0,
opacity: 100,
rotateX: 0,
rotateY: 0,
rotateZ: 0,
saturate: 100,
sepia: 0,
skewX: 0,
skewY: 0
},
background: {
color: "#0e2b43",
image: "",
mode: 1
},
height: "1080",
icon: "",
pageOverflow: "hidden",
pageScaleMode: "1",
themeid: "",
title: "大屏",
width: "1920",
},
data: [],
position: []
}
},
uiDsv: {
attribute: true,
components: true,
layer: false,
toolbox: true
},
layers: [{
issys: true,
lock: false,
name: "alllayer",
title: "基础图层",
visiable: true
}],
referLine: {
enable: true,
h: [100, 200],
v: [100, 200]
},
widgets: []
},
],
share: false,
sort: 0,
version: 0
},
globalDsv: {
success: 200,
powergear: {
url: 'http://localhost:8088/dt/',
db: '',
token: '' /*发放的固定token*/
}
},
}
}
}
</script>
<style lang="scss">
</style>4. 在Vue模板中使用大屏渲染器组件
<template>
<!-- 大屏渲染器(screen：由设计器生产的大屏样式；globalDsv：全局配置参数) -->
<dt-render v-if="screen" :screen="screen" :globalDsv="globalDsv" ref="dtRender">
</dt-render>
</template>
<script>
export default {
data() {
return {
screen: {},
globalDsv: {
success: 200,
powergear: {
url: '',
db: '',
token: '' /*发放的固定token*/
},
},
}
},
methods: {
}
}
</script>版本日志
V2.1
■稳定版本初始发布