这个项目,还是进行具体的说明一下,首先我们要分清整体框架,我的思路类似语文的总分思路 (大屏背景在App.vue里,抄过去改一下图片地址就可以了) <dv-full-screen-container> <div> <!-- 标题模块--> <moduleTitle/> </div> <div class="main"> <!-- 模块1--> <moduleFirst/> <moduleSecond/> <moduleThird/> </div> <div> <!-- 模块2--> <moduleFour/> </div> </dv-full-screen-container> 分为标题,模块1,模块2,然后我又在各个模块里进行划分,实现总分。讲一下这里的细节,采用了dv-full-screen-container,datav自身的 全屏容器,能实现图随屏幕大小变化,下面是它的介绍,官网地址在这:https://datav-vue3.netlify.app/Other/FullScreenContainer/FullScreenContainer.html 介绍如下:数据可视化页面一般在浏览器中进行全屏展示,全屏容器将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。浏览器全屏后,全屏容器将充满屏幕。 建议在全屏容器内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。 使用前请注意将body的margin设为0,否则会引起计算误差,全屏后不能完全充满屏幕。 这里注意一个小细节,我的模块1由于多个小模块集合在一起,我又想他们并排显示,即不是竖排,这里使用了css样式即 .main{ /*设置边框与页边距离*/ display: flex; width: 100%; padding: 0 5px; gap:10px;/*设置的是行距距和列间距*/ } display这里很重要,它控制了整个模块2的展开为flex,实现三个模块 并排显示。 现在来讲讲标题: 标题我写在了一个.vue文件里,它不大,方便修改,不过为了更好展示文件结构,我建议还是模块化。 为了和我的需求对应,我设计的三个标题所占空间为30%40%30%,这里使用<div style="flex: 0 1 30%"></div>flex进行空间设计 我使用了一些datav自带的装饰进行修饰,,这里效果请看上一篇博客的的图片。 模块1,这里我采用了两个图标进行echarts和datav,vue的联用,其他你去datav官网就可以看它的配置项进行修改,所以这里我们主要看一下如何进行连用 这里要注意区别哈,下面我们看看官方文档(ehcarts)是怎么应用的: import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option); 我们发现它是使用var,这是什么东西呢:其实就是一个JavaScript的关键字,声明定义变量的。 然后,你可以清晰的查看它的结构,其实和datav差不多, const option1 = { title: { text: '畅销饮料占比饼状图' }, series: [ { type: 'pie', data: [ ], insideLabel: { show: true } } ] } const option2 = { title: { text: '畅销饮料占比饼状图' }, series: [ { type: 'pie', data: [ ], insideLabel: { show: true } } ] } export default [option1, option2] 但是这里 <template> <!-- <div style="width:100%;height:100%">--> <div style="height: 100%"> <div ref="chart" style="width: 100%;height: 650px;"></div> </div> 配置就不一样了,注意以前如果你引用 <dv-charts :option="option" style="width:25rem;height:15rem;"/>即可 但是如果你要搞echarts的话要引用这样<div ref="chart" style="width: 100%;height: 650px;"></div>,要规定好容器大小。 里面还要进行初始化 <script setup> import {ref, onMounted, reactive} from 'vue'; import * as echarts from 'echarts' let chart = ref(); onMounted(()=>{ initChart(); }) function initChart(){ var myChart = echarts.init(chart.value) const deviceData =[ ]; let option = { title:{ } }, legend: { } }, tooltip:{ trigger:'item', }, series:[{ }, labelLine:{ show: true, length: 10, // 减小标签线长度 length2: 10, // 减小标签线到标签的长度 } }] } myChart.setOption(option); window.addEventListener('resize', () => { myChart.resize(); }) } 其中要注意的点是 myChart.setOption(option); window.addEventListener('resize', () => { myChart.resize(); 记得要把myChart.setOption(option);放在你的数据下面,不然可能显示不了。 上面介绍过了怎么使用echarts和vue等联用,这里我们搞一下地图 地图的话我们使用了阿里云的地图数据下载,地址在这:https://datav.aliyun.com/portal/school/atlas/area_selector 我们下载JSON数据,然后在导入了echarts的情况下进行导入,实现JSON数据可视化变为地图。但是只是显示地图是不够的,我还需要在上面打点,这 就需要我们在geo基础上,进行双地图的叠加了,这次叠加不仅能显示标记点,而且还能展示出地图的层次感。 模块1最后说一下,最右边的那个小框框不是修饰,是一个datav的框,只是可以设置缩小成这样。 最后模块2,这里没有什么了,主要还是说一下怎么改轮播表的头 indexHeader:'序号',使用这个就可以把默认的#改了,然后是每列的宽 columnWidth: [100,200],这里改变的是前两列。
补一下上一篇博客,Datav - Vue3
最新推荐文章于 2024-08-29 09:14:19 发布