补一下上一篇博客，Datav - Vue3

这个项目，还是进行具体的说明一下，首先我们要分清整体框架，我的思路类似语文的总分思路
（大屏背景在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],这里改变的是前两列。