echarts-地图

使用地图的三种的方式：

注册地图(用json或svg,注册为地图)，然后使用map地图
使用geo坐标系，地图注册后不是直接使用，而是注册为坐标系。
直接使用百度地图、高德地图，使用百度地图或高德地图作为坐标系。

用json或svg注册为地图，然后使用map地图

从DataV中获取地图数据。
在这里插入图片描述
echarts.registerMap(“china”, china) 注册地图
map ：使用 registerMap 注册的地图名称。

import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import "./vintage";
import china from "./china.json";
let myEcharts;
onMounted(() => {let canvas = document.getElementById("canvas");echarts.registerMap("china", china);myEcharts = echarts.init(canvas, "vintage", {width: 500,height: 500,devicePixelRatio: window.devicePixelRatio,locale: "ZH",});let options = {tooltip: {},series: [{type: "map",roam: true,width: 500,height: 500,map: "china",},],};rednderEcharts(options);
});function rednderEcharts(options) {myEcharts.setOption(options);
}

在这里插入图片描述

使用series调节绘制的地图

地图中也label,tooltip,lenged等属性，也可以用itemStyle调整每块区域的样式。
地图特有的属性：
数据映射： nameMap
缩放相关的：scaleLimit,zoom

如果想给某个省份添加数据，可以设置data

 let options = {tooltip: {},series: [{type: "map",roam: true,width: 500,height: 500,map: "china",label: {// show: true,},itemStyle: { // 地图的颜色areaColor: "blue",},emphasis: { //高亮色itemStyle: {areaColor: "red",},},data: [{ name: "天津市", value: 20 }],//name要完全对应},],};

在这里插入图片描述
scaleLimit ：滚轮缩放的极限控制，通过min, max最小和最大的缩放值。
zoom：当前视角的缩放比例。
nameMap：自定义地区的名称映射。

 let options = {tooltip: {},series: [{type: "map",roam: true,width: 500,height: 500,map: "china",label: {// show: true,},itemStyle: {// 地图的颜色areaColor: "blue",},emphasis: {//高亮色itemStyle: {areaColor: "red",},},nameMap: {河北省: "冀",},scaleLimit: {min: 1,max: 5,},zoom: 5,data: [{ name: "天津市", value: 20 },{name: "冀",value: 100,},],},],
};

在这里插入图片描述

visualMap 根据数值显示不同的颜色，一般配合热力图或地图

inRange 调控颜色的变化范围
min,max 调控最大、最小值
left 调节组件的位置
text调节组件最高最低的文本

 let options = {tooltip: {},series: [{type: "map",roam: true,width: 500,height: 500,map: "china",label: {// show: true,},itemStyle: {// 地图的颜色areaColor: "blue",},emphasis: {//高亮色itemStyle: {areaColor: "red",},},nameMap: {河北省: "冀",},scaleLimit: {min: 1,max: 5,},//  zoom: 5,data: [{ name: "天津市", value: 20 },{ name: "山西省", value: 10 },{ name: "河南省", value: 15 },{name: "冀",value: 40,},],},],visualMap: {type: "continuous", //"piecewise" 调控颜色的条是连续的还是不连续的min: 0,  // max: 40,range: [4, 35],  //范围是从4-35 ,整个范围是0-40text: ["最小值", "最大值"], // 调控颜色的条上下的文字left: 120,inRange: {color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8"],},},};

在这里插入图片描述

geo 地理坐标系绘制地图

如果以地图为基础，在地图的某个位置上绘制一些东西，可以使用geo地理坐标系来绘图
1.图表的调节与map图标一致
2. 如果相对地图中的某一个区域进行特殊的配置，要使用regions

 let options = {tooltip: {},geo: {map: "china",roam: true,zoom: 2,itemStyle: {areaColor: "blue",},},visualMap: {type: "continuous", //"piecewise"min: 0,max: 40,range: [4, 35],text: ["最小值", "最大值"],left: 120,inRange: {color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8"],},},};

在这里插入图片描述
在图中添加数据，以graph关系图为例

 let options = {tooltip: {},geo: {map: "china",roam: true,zoom: 1,itemStyle: {areaColor: "blue",},},series: [{type: "graph",coordinateSystem: "geo",data: [[112.549248, 37.857014],[111.670801, 40.818311],[115.426264, 39.950502],[116.677853, 40.970888],],},],};

在这里插入图片描述

let options = {tooltip: {},geo: {map: "china",roam: true,zoom: 1,itemStyle: {areaColor: "blue",},regions: [{name: "河北省",itemStyle: {areaColor: "yellow",},},],},series: [{type: "graph",coordinateSystem: "geo",data: [[112.549248, 37.857014],[111.670801, 40.818311],[115.426264, 39.950502],[116.677853, 40.970888],],},],};

在这里插入图片描述

geo地理坐标系搭配lines绘制路线

lines经常配合geo使用，用于绘制路线图。与line折线图不同的是,lines主要用来绘制多个线条，数据写法也不同。

lines:路径图
coords:一个包含两个到多个二维坐标的数组

 let options = {tooltip: {},geo: {map: "china",roam: true,zoom: 1,itemStyle: {// areaColor: "blue",},regions: [{name: "河北省",itemStyle: {areaColor: "yellow",},},],},series: [{type: "lines",lineStyle: {color: "red",width: 3,},data: [{coords: [[117.000923, 36.675807],[114.27261, 24.700624],],},{coords: [[115.057317, 24.703343],[114.27261, 24.700624],],},],},],};

在这里插入图片描述

使用高德或百度地图

在这里插入图片描述
在html中引入百度地图（要在vue加载前使用，所以放在head中，提前加载）
必须是3.0,1.0会报错

在这里插入图片描述
在echarts中使用

<script setup>
import * as echarts from "echarts";
import { onMounted, watch } from "vue";
import "./vintage";import "echarts/extension/bmap/bmap";let myEcharts;
onMounted(() => {let canvas = document.getElementById("canvas");myEcharts = echarts.init(canvas, null, {width: 1200,height: 1200,devicePixelRatio: window.devicePixelRatio,locale: "ZH",});let options = {tooltip: {},bmap: {center: [116.405285, 39.904989],roam: true,zoom: 18,},series: [],};rednderEcharts(options);
});function rednderEcharts(options) {myEcharts.setOption(options);
}
</script><template><div id="canvas" width="400" height="400"></div>
</template><style scoped>
#canvas {  //一定要在给 元素设置宽高，否则会报错width: 1200px;height: 1200px;
}
</style>

在这里插入图片描述
添加数据

 let options = {tooltip: {},bmap: {center: [116.405285, 39.904989],roam: true,zoom: 18,},series: [{type: "lines", //这里的线条有动画效果coordinateSystem: "bmap",lineStyle: {color: "yellow",width: 1,},effect: {show: true,symbol: "",},data: [{coords: [[117.000923, 36.675807],[114.27261, 24.700624],],},{coords: [[115.057317, 24.703343],[114.27261, 24.700624],],},],},],};

在这里插入图片描述

自定义地图的颜色

可以修改陆地，海洋的颜色

let options = {tooltip: {},bmap: {center: [116.405285, 39.904989],roam: true,zoom: 18,mapStyle: {styleJson: [{featureType: "land",elementType: "all",stylers: {color: "#f3f3f3",},},],},},series: [{type: "lines",coordinateSystem: "bmap",lineStyle: {color: "yellow",width: 1,},effect: {show: true,symbol: "",},data: [{coords: [[117.000923, 36.675807],[114.27261, 24.700624],],},{coords: [[115.057317, 24.703343],[114.27261, 24.700624],],},],},],};