文章目录
Vue 项目前、后端整合(地图)
一、配置图表 - 地图
1、数据准备
如果要展示地图那么需要中国地图的矢量数据与省份数据 在public中的map文件夹已经提供了。
因为数据实在我们本地，所以我们在启动项目的时候可以直接在浏览器上输入地址http://localhost:8080/map/china-cities.json进行访问就可以了。
数据下载链接：
china.json 数据快速获取：【Vue】Echarts 地图 Json 数据源获取良心网站
链接：https://pan.baidu.com/s/169geqjk9QRREMTvr03Ys4Q
提取码：7030
2、地图容器即数据请求配置
在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用，并且在页面中间的div中使用：
<template>
<!-- 地图容器 -->
<div class="map"></div>
</template>
<script>
// 导入vue、axios
import { onMounted,reactive } from "vue";
import axios from "axios";
export default {
setup() {
// 创建变量请求接收数据对象
var mapData = reactive({});
async function getState() {
// 获取请求的数据
mapData = await axios.get("http://localhost:8080/map/china.json");
}
// 钩子
onMounted(() => {
// 调用 getState() 获取数据
getState().then(()=>{
// 控制台输出
console.log("map",mapData);
});
});
// 返回
return {
getState,mapData
};
},
};
</script>
<style>
.map {
width: 100%;
height: 100%;
}
</style>
注意：
- 地图容器配置的时候需要重新引入
axios组件，不能像图表一一样通过inject去获取axios。原因很简单，因为在这里我们的数据是直接保存在app项目下的public/map文件夹下，可以直接通过http://localhost:8080/map/数据文件名进行获取，这里的请求端口为8080;而通过inject请求的地址是我们之前配置的全局默认地址，通过server后端项目传输的数据，端口为8888，两者不一致，所以我们需要重新引入axios，进行数据请求。
除此之外，我们还需要在 homePage.vue 中导入我们的 mapPage.vue 组件：
<template>
<div>
<!-- 顶部标题栏 -->
<header>
<h1>大数据可视化 - Vue3.0和echarts</h1>
</header>
<!-- 中间容器 -->
<section class="container">
<!-- 左容器 -->
<section class="itemLeft">
<ItemPage>
<itemOne />
</ItemPage>
<ItemPage>
<itemTwo />
</ItemPage>
</section>
<!-- 中容器 -->
<section class="itemCenter">
<h2>地图展示</h2>
<!-- 配置地图页面 -->
<mapPage></mapPage>
</section>
<!-- 右容器 -->
<section class="itemRight">
<ItemPage>
<itemThree />
</ItemPage>
<ItemPage>
<itemFour />
</ItemPage>
</section>
</section>
</div>
</template>
<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";
// 左右4个小组件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
// 引入地图组件
import mapPage from "@/components/mapPage.vue";
import { inject } from '@vue/runtime-core';
export default {
components: {
ItemPage,itemOne,itemTwo,itemThree,itemFour,mapPage
},
setup(){
let $echarts = inject("echarts");
let $axios = inject("axios");
console.log($echarts);
console.log($axios);
}
};
</script>
<style lang='less'>
header {
height: 1rem;
width: 100%;
/* 设置一个半透明淡蓝色 */
background-color: rgba(0, 0, 255, 0.2);
/* 把标题文字样式设置 */
h1 {
font-size: 0.375rem;
color: #fff;
text-align: center;
line-height: 1rem;
}
}
/* 中间容器 */
.container {
// 最大最小的宽度
min-width: 1200px;
max-width: 2048px;
margin: 0 auto;
// 盒子上10px 左右10px 下0的外边距
padding: 0.125rem 0.125rem 0;
// 测试
// height: 10rem;
// background-color: gray;
display: flex; //父容器设置flex布局才能在子元素使用
// 设置左中右的占比 但是不要忘了在父容器要设置flex
.itemLeft,
.itemRight {
flex: 3;
}
.itemCenter {
flex: 5;
// 高度840px
height: 10.5rem;
border: 1px solid blue;
// 内边距10px
padding: 0.125rem;
// 外边距20px
margin: 0.25rem;
}
}
</style>
配置完成后，我们刷新页面，打开控制台即可看见数据：
3、Echarts 图表配置
地图配置：
<template>
<!-- 地图容器 -->
<div class="map" id="mapChart"></div>
</template>
<script>
// 导入vue、axios、inject
import { onMounted,reactive,inject } from "vue";
import axios from "axios";
export default {
setup() {
// 创建变量请求接收数据对象
var mapData = reactive({});
// 获取echarts对象
var $echarts = inject("echarts");
async function getState() {
// 获取请求的数据
mapData = await axios.get("http://localhost:8080/map/china-cities.json");
}
// 钩子
onMounted(() => {
// 调用 getState() 获取数据
getState().then(()=>{
// 控制台输出
console.log("map",mapData);
// 注册地图 --- 地图名称，地图数据
$echarts.registerMap("china",mapData);
// 初始化 eacharts
var myChart = $echarts.init(document.getElementById("mapChart"));
// 配置参数
var option = null;
option = {
// 配置地图
geo:{
map:"china"
}
};
// 封装参数
myChart.setOption(option);
});
});
return {
getState,mapData
};
},
};
</script>
<style>
.map {
width: 100%;
height: 100%;
}
</style>
初步效果如图所示：
我们发现其中的图像展示有点问题，并没有展示全部的区域信息，会看我们获取的数据结构，可以发现，主要的数据被封装在了 data 中，所以我们重新配置一下数据 ：
// 注册地图 --- 地图名称，地图数据
$echarts.registerMap("china",mapData.data);
重新配置（引用不同的数据源）后刷新效果：
china-contour.json:
china.json:
china-city.json:
/province/shandong.json:
world.json:
4、地图丰富
（1）色彩设置
地图背景
// 配置地图
geo:{
map:"china",
itemStyle:{
areaColor:'#0099ff' // 背景颜色
}
}
省份边框
// 配置地图
geo:{
map:"china",
itemStyle:{
areaColor:'#0099ff',
borderColor:'#00ffff', // 边框
}
}
图像阴影
// 配置地图
geo:{
map:"china",
itemStyle:{
areaColor:'#0099ff',
borderColor:'#00ffff',
shadowColor:'rgba(230,130,70,0.5)', // 阴影
shadowBlur:30 // 阴影大小
}
}
（2）高亮显示
// 配置地图
geo:{
map:"china",
itemStyle:{
areaColor:'#0099ff',
borderColor:'#00ffff',
shadowColor:'rgba(230,130,70,0.5)', // 阴影
shadowBlur:30, // 阴影大小
emphasis:{ // 当前 item 高亮显示
focus:'self'
}
}
}
（3）嵌入散点图样式
// 散点图样式
series: [
{
// 指定图形类型
type:'scatter',
// 样式
itemStyle:{
// 颜色
color:'red'
},
// 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
coordinateSystem:'geo',
// 数据
data: [
// json 串
{ name: "北京", value: [116.46, 39.92, 4367] },
{ name: "上海", value: [121.48, 31.22, 8675] },
{ name: "深圳", value: [114.07, 22.62, 2461] },
{ name: "广州", value: [113.23, 23.16, 187] },
{ name: "西安", value: [108.45, 34, 3421] },
],
},
],
（4）设置提示框组件
// 提示框组件
tooltip:{
trigger:'item',
},
（5）视觉映射组件
// 视觉映射组件
visualMap: {
type: "continuous", // 连续
left:'left', // 位置靠左 水平
top:'middle', // 位置居中 垂直
min: 10, // 最小
max: 100, // 最大
calculable: true, // 滑动组件
inRange: { // 颜色
color:['#50a3ba','#eac736','#d94e5d']
},
textStyle:{ // 文本颜色
color:'#fff'
}
},
（6）标题样式
// 标题
title: {
text: "城市销售量", // 文本
left: "45%", // 位置
textStyle: { // 文本样式
color: "#fff", // 颜色
fontSize: 20, // 字体大小
textShadowBlur: 10, // 文字本身的阴影长度
textShadowColor: "#33ffff", // 文字本身的阴影颜色
},
},
最终样式：
