【Vue】Vue 项目前、后端整合(中间：城市销售量地图)

【Vue】Vue 项目前、后端整合(中间：城市销售量地图)

文章目录

​​Vue 项目前、后端整合(地图)​​

​​一、配置图表 - 地图​​

​​1、数据准备​​​​2、地图容器即数据请求配置​​​​3、Echarts 图表配置​​​​4、地图丰富​​

​​（1）色彩设置​​

​​地图背景​​​​省份边框​​​​图像阴影​​

​​（2）高亮显示​​​​（3）嵌入散点图样式​​​​（4）设置提示框组件​​​​（5）视觉映射组件​​​​（6）标题样式​​

Vue 项目前、后端整合(地图)

一、配置图表 - 地图

1、数据准备

如果要展示地图那么需要中国地图的矢量数据与省份数据 在​​public​​中的​​map文件夹​​已经提供了。

因为数据实在我们本地，所以我们在启动项目的时候可以直接在浏览器上输入地址​​数据快速获取：​​【Vue】Echarts 地图 Json 数据源获取良心网站​​

链接：

注意：

地图容器配置的时候需要重新引入​​axios组件​​，不能像图表一一样通过​​inject​​ 去获取​​axios​​。原因很简单，因为在这里我们的数据是直接保存在​​app项目​​下的​​public/map​​ 文件夹下，可以直接通过 ​​​​homePage.vue​​ 中导入我们的 ​​mapPage.vue​​ 组件：

配置完成后，我们刷新页面，打开控制台即可看见数据：

​​返回顶部​​

3、Echarts 图表配置

地图配置：

初步效果如图所示：

我们发现其中的图像展示有点问题，并没有展示全部的区域信息，会看我们获取的数据结构，可以发现，主要的数据被封装在了 ​​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' // 背景颜色 }}

​​Top​​

省份边框

// 配置地图geo:{ map:"china", itemStyle:{ areaColor:'#0099ff', borderColor:'#00ffff', // 边框 }}

​​Top​​

图像阴影

// 配置地图geo:{ map:"china", itemStyle:{ areaColor:'#0099ff', borderColor:'#00ffff', shadowColor:'rgba(230,130,70,0.5)', // 阴影 shadowBlur:30 // 阴影大小 }}

​​Top​​

（2）高亮显示

​​官网实例​​

// 配置地图geo:{ map:"china", itemStyle:{ areaColor:'#0099ff', borderColor:'#00ffff', shadowColor:'rgba(230,130,70,0.5)', // 阴影 shadowBlur:30, // 阴影大小 emphasis:{ // 当前 item 高亮显示 focus:'self' } }}

​​Top​​

（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] }, ], },],

​​Top​​

（4）设置提示框组件

// 提示框组件tooltip:{ trigger:'item',},

​​Top​​

（5）视觉映射组件

​​官网案例​​

// 视觉映射组件visualMap: { type: "continuous", // 连续 left:'left', // 位置靠左 水平 top:'middle', // 位置居中 垂直 min: 10, // 最小 max: 100, // 最大 calculable: true, // 滑动组件 inRange: { // 颜色 color:['#50a3ba','#eac736','#d94e5d'] }, textStyle:{ // 文本颜色 color:'#fff' }},

​​Top​​

（6）标题样式

// 标题title: { text: "城市销售量", // 文本 left: "45%", // 位置 textStyle: { // 文本样式 color: "#fff", // 颜色 fontSize: 20, // 字体大小 textShadowBlur: 10, // 文字本身的阴影长度 textShadowColor: "#33ffff", // 文字本身的阴影颜色 },},

最终样式：

​​Top​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。