No.15可视化大屏--vite+vue3 地图的引入

一、地图的引入

1.下载地图文件

https://datav.aliyun.com/portal/school/atlas/area_selector

2.新建mapchart.vue文件，并写入代码。

<script setup>
import { ref,reactive,onMounted} from 'vue';
import * as echarts from 'echarts';
import chinaMap from '../../assets/china1.json'


let chart = ref();
onMounted(()=>{
    chartInit()
})

// echarts是基于JS的，和vue里面的语法不太一样，不能完全粘贴过来
function chartInit(){
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
    echarts.registerMap('china',chinaMap)

    // 指定图表的配置项和数据
    var option = {
        series:{
            type:'map',
            map:'china',
            label:{
                show:true,
                color:'#fff',
                fontSize:8
            },
            itemStyle:{
                areaColor:'#4D98FB',
                borderColor:'#fff'
            },
            zoom:1.5,
            center: [104.0, 35.0],
            emphasis:{
                label:{
                    color:'black',
                    fontSize:12
                },
                itemStyle:{
                areaColor:'#18C1AD',
                },
            }
        }
    }




    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

</script>

<template>
    <!-- 绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器 -->
    <div ref="chart" class = "barchart" style="width: 100%;height:450px;"></div>

</template>

<style scoped>
.barchart {
    margin-top: 50px;
}
</style>

　　

3.在modelThird.vue 中引入

<script setup>
import {ref,reactive} from 'vue'
import waterpond from './chart/waterpond.vue';
import rosechart from './chart/rosechart.vue';
import mapchart from './chart/mapchart.vue';
</script>
 
<template>
<div class="modelthird">
    <div class="modelthird-left">
        <mapchart/>
    </div>
    <div class="modelthird-right">
        <div class="bgstyle">
            <waterpond/>
            <dv-decoration2 :dur="2" style="width:100%;height:5px;" />
            <rosechart/>
        </div>
    </div>
</div>
</template>
 
<style scoped>
.modelthird {
    display: flex;
}
.modelthird-left {
    flex: 0 1 65%;
}
.modelthird-right {
    flex: 0 1 35%;
}

</style>

　　3.效果