You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
16 lines
4.4 KiB
16 lines
4.4 KiB
import{a1 as c,d as l,I as p,N as h,a as d,c as i,ai as u}from"./index-ea7eee8a.js";const o=l({components:{},setup(t){const n=[],e=p({});return{toggleCode:s=>{const a="vdpv_"+s;e[a+"Height"]===0?e[a+"Height"]=(n[s].value?n[s].value.offsetHeight:0)||0:e[a+"Height"]=0},...h(e)}}});o.$vd={matter:{},toc:[{content:"可视化数据大屏",anchor:"可视化数据大屏",level:1},{content:"组件",anchor:"组件",level:2},{content:"图层",anchor:"图层",level:2},{content:"大屏配置",anchor:"大屏配置",level:2},{content:"全局数据",anchor:"全局数据",level:3},{content:"位置属性",anchor:"位置属性",level:2},{content:"数据",anchor:"数据",level:2},{content:"beforeRequest",anchor:"beforerequest",level:3},{content:"afterResponse",anchor:"afterresponse",level:3}]};const f=o,m={class:"vuedoc"},j=u(`<h1 id="可视化数据大屏" data-source-line="1"><a class="markdownIt-Anchor" href="#可视化数据大屏">#</a> 可视化数据大屏</h1><h2 id="组件" data-source-line="3"><a class="markdownIt-Anchor" href="#组件">#</a> 组件</h2><p data-source-line="5">所支持的设计组件</p><h2 id="图层" data-source-line="7"><a class="markdownIt-Anchor" href="#图层">#</a> 图层</h2><p data-source-line="8">大屏可视化设计的所有组件图层，可对当前组件进行隐藏、锁定、删除、选中操作</p><h2 id="大屏配置" data-source-line="11"><a class="markdownIt-Anchor" href="#大屏配置">#</a> 大屏配置</h2><p data-source-line="13">设计大屏宽高背景色及大屏全局样式</p><h3 id="全局数据" data-source-line="15"><a class="markdownIt-Anchor" href="#全局数据">#</a> 全局数据</h3><p data-source-line="17">当可视化大屏引用组件比较多时，若每个组件都单独从接口获取数据，这种做法明显不合理，后端同学可能也不会这么提供。因此引入全局数据请求接口，将数据接口处理好提供给每个组件调用。如可在<code>afterResponse</code>中对接口返回数据处理。这里return的res可在每个组件的全局或动态数据方法中获取</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>opt = <span class="hljs-function">(<span class="hljs-params">res</span>) =></span>
|
|
{
|
|
<span class="hljs-comment">// res接口返回的数据</span>
|
|
<span class="hljs-keyword">return</span> res;
|
|
}
|
|
</code></pre><h2 id="位置属性" data-source-line="27"><a class="markdownIt-Anchor" href="#位置属性">#</a> 位置属性</h2><p data-source-line="29">可编辑当前组件的位置图层等信息，可使用<code>left、right、top、bottom</code>定位。</p><p data-source-line="31">提示：当使用top或者bottom定位时，对应的left或者top将被修正为auto，并且当前组件不能进行拖动和缩放操作</p><h2 id="数据" data-source-line="33"><a class="markdownIt-Anchor" href="#数据">#</a> 数据</h2><h3 id="beforerequest" data-source-line="35"><a class="markdownIt-Anchor" href="#beforerequest">#</a> beforeRequest</h3><p data-source-line="37">当前组件数据请求前事件，可对添加请求参数</p><h3 id="afterresponse" data-source-line="39"><a class="markdownIt-Anchor" href="#afterresponse">#</a> afterResponse</h3><p data-source-line="41">数据请求结果完成事件，需要此事件对数据进行处理。使用此方法对组件设置，可满足各种图表数据展示，而无需对echarts进行层层封装，可直接从echarts官网将图表配置好，复制过来替换好接口数据即可。减少学习成本</p><pre style="display:none;"></pre><pre class="hljs vuedoc__hljs language-javascript hljs--one-dark"><code>opt = <span class="hljs-function">(<span class="hljs-params">data, option, <span class="hljs-built_in">global</span></span>) =></span>
|
|
{
|
|
<span class="hljs-comment">// data接口返回的数据</span>
|
|
<span class="hljs-comment">// options当前组件所需数据，图表时直接修改option中的数据即可，如</span>
|
|
<span class="hljs-comment">// global大屏全局数据返回的内容</span>
|
|
option.xAsis.data = data.xAsis
|
|
option.series.data = data.series
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"afterResponse"</span>, data, option, <span class="hljs-built_in">global</span>);
|
|
<span class="hljs-keyword">return</span> option;
|
|
}
|
|
</code></pre>`,21),_=[j];function v(t,n,e,r,s,a){return d(),i("div",m,_)}const k=c(f,[["render",v]]);export{k as default};
|
|
|