手机网站建设推广软文,营业执照 网站开发,长春做网站,如何做自助搜券网站DataGear 在4.3.0版本新增了dg-dashboard-code特性#xff0c;并在4.4.0版本进行了改进和增强#xff0c;结合看板API#xff0c;可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。
本文基于Vue2、Element UI前端框架的el-container、el-head…DataGear 在4.3.0版本新增了dg-dashboard-code特性并在4.4.0版本进行了改进和增强结合看板API可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。
本文基于Vue2、Element UI前端框架的el-container、el-header、el-aside、el-main、el-row等布局组件定义整个看板页面并异步加载由Vue的v-for语法构建的图表元素。
首先新建空白看板填写名称后先保存。
在编写看板页面之前需要先下载 Vue2、Element UI库加入看板资源中。
Vue2下载地址
https://unpkg.com/vue2.7.14/dist/vue.min.js
Element UI下载地址
https://unpkg.com/element-ui2.15.12/lib/theme-chalk/index.css
https://unpkg.com/element-ui2.15.12/lib/index.js
https://unpkg.com/element-ui2.15.12/lib/theme-chalk/fonts/element-icons.woff
加入后的看板资源如下所示
index.html
lib/|-- element-ui2.15.12/|-- index.js|-- theme-chalk/|-- fonts/|-- element-icons.woff|-- index.css|-- vue2.7.14/|-- vue.min.js加入看板资源后编写index.html内容如下
!DOCTYPE html
html dg-dashboard-codeinstance dg-loadable-chart-widgets异步加载图表部件ID-1,异步加载图表部件ID-2
head
meta charsetUTF-8
link relstylesheet hreflib/element-ui2.15.12/theme-chalk/index.css
script srclib/vue2.7.14/vue.min.js/script
script srclib/element-ui2.15.12/index.js/script
/head
body dg-chart-auto-resizetrue stylemargin:0;
div idappel-container styleheight:100vhel-header styletext-align:center;font-weight:bold;font-size:2rem;DataGear看板示例/el-headerel-mainel-container styleheight:100%;el-asidediv idv-for-chartsdiv v-forchartId in loadChartIds v-bind:dg-chart-widgetchartId styleheight:40vh;/div/div/el-asideel-mainel-row :gutter20 styleheight:100%;el-col :span12 styleheight:100%;div styleheight:100%; dg-chart-widget图表部件ID-1/div/el-colel-col :span12 styleheight:100%;div styleheight:100%; dg-chart-widget图表部件ID-2/div/el-col/el-row/el-main/el-container/el-main/el-container
/div
/body
/html
script
new Vue(
{el: #app,data(){let d {loadChartIds: [异步加载图表部件ID-1, 异步加载图表部件ID-2]};return d;},mounted(){dashboard.render();dashboard.loadUnsolvedCharts(#v-for-charts);}
});
/script保存看板制作完成
上述看板代码中 dg-dashboard-codeinstance 设置看板页面加载后仅创建看板JS对象不执行初始化和渲染因为在Vue挂载完成之前页面真正的DOM元素是不可用的。 dg-loadable-chart-widgets... 设置dashboard.loadUnsolvedCharts()函数允许异步加载的图表避免越权访问。 dashboard.render(); 在Vue挂载完成后执行看板渲染因为此时才可以访问页面真正的DOM元素。 dashboard.loadUnsolvedCharts(#v-for-charts); #v-for-charts元素里面通过v-for创建的图表元素需采用异步加载方式渲染因为后台解析看板模板时无法识别它们。 示例效果图如下所示 官网地址
http://www.datagear.tech
源码地址
Giteehttps://gitee.com/datagear/datagear
Githubhttps://github.com/datageartech/datagear
