1、Echarts版本
"echarts": "^5.3.3",
2、基础地图绘制（以中国地图为例）
绘制地图需要有用于绘制地理坐标系的数据，如示例使用的china.js
<template>
<div ref="mapBar" class="map-class"></div>
</template>
<script>
import * as echarts from 'echarts';
import geoJson from './china.js';
export default {
name: 'map-geo',
data() {
return {
chartData:[
{name: '北京', value: 8888},
{name: '上海', value: 10000},
{name: '天津', value: 7777},
{name: '重庆', value: 10001},
{name: '黑龙江', value: 8989},
{name: '辽宁', value: 6666},
{name: '吉林', value: 5555},
{name: '河北', value: 4656},
{name: '河南', value: 888},
{name: '湖北', value: 9999},
{name: '湖南', value: 9000},
{name: '山东', value: 3500},
{name: '山西', value: 1888},
{name: '陕西', value: 1600},
{name: '安徽', value: 9000},
{name: '浙江', value: 3840},
{name: '江苏', value: 7000},
{name: '福建', value: 1000},
{name: '广东', value: 2000},
{name: '海南', value: 3000},
{name: '四川', value: 1600},
{name: '云南', value: 800},
{name: '贵州', value: 400},
{name: '青海', value: 6669},
{name: '甘肃', value: 5555},
{name: '江西', value: 666},
{name: '台湾', value: 6666},
{name: '内蒙古', value: 6000},
{name: '宁夏', value: 4900},
{name: '新疆', value: 500},
{name: '西藏', value: 8600},
{name: '广西', value: 5000},
{name: '香港', value: 1000},
{name: '澳门', value: 600},
],
options: {
tooltip: {
triggerOn: 'mousemove',
formatter: function (e) {
return e.name + '：' + e.value
}
},
// geo为地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
geo: {
map: 'china', // 使用 registerMap 注册的地图名称。
},
series: [
{
name: '随机数',
type: 'map',
geoIndex: 0,
data: []
}
]
}
};
},
mounted() {
this.init();
},
methods: {
init() {
this.chart = echarts.init(this.$refs.mapBar);
// 使用数据 geoJson 注册名为 'china' 的地图
echarts.registerMap('china', geoJson);
// 要渲染的数据
this.options.series[0].data = this.chartData;
this.$nextTick(() => {
this.chart.setOption(this.options);
})
},
}
};
</script>
<style scoped>
.map-class{
width: 65%;
height: 80vh;
border: 1px solid #ccc;
}
</style>
绘制效果：
3、地理坐标系geo组件设置
3.1 鼠标缩放和平移
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
zoom: 1.23, // 当前视角的缩放比例
scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
min: 1, // 最小的缩放值
max: 10, // 最大的缩放值
},3.2 组件在容器中的位置
// 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。若值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
top: 'middle',
// 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// bottom: '20',
// 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。若值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
left: 'center',
// 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
// right: '20',3.3 图形上的文本标签
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true, // 是否显示标签。
fontSize: '11',
color: 'rgba(0,0,0,0.7)',
},3.4 地图区域的多边形 图形样式
// 地图区域的多边形 图形样式。
itemStyle: {
borderColor: 'rgba(255, 0, 0, 0.2)', // 图形的描边颜色。
borderWidth: 1, // 描边线宽。为 0 时无描边。
borderType: 'solid', // 描边类型。
},3.5 高亮状态下的多边形和标签样式
// 高亮状态下的多边形和标签样式。
emphasis: {
focus: 'none', //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。'none' 不淡出其它图形，默认使用该配置。'self' 聚焦当前高亮图形，淡出其它图形。
// 高亮状态下文本标签
label: {
color: '#ffffff',
},
// 高亮状态下图形样式
itemStyle: {
areaColor: '#409eff', // 高亮区域的颜色。
color: '#67c23a', // 高亮区域的颜色。areaColor和color都设置，高亮区域渲染areaColor的值
borderColor: 'rgba(0, 0, 0, 0.8)', // 图形的描边颜色。
borderWidth: 3, // 描边线宽。为 0 时无描边。
borderType: 'dotted', // 描边类型。
},
},3.6 选中状态下的多边形和标签样式
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
// 选中状态下的多边形和标签样式。
select: {
disabled: false, // 是否可以被选中。在开启selectedMode的时候有效，可以用于关闭部分数据。
// 选中区域文本标签
label: {
color: '#ff00ff',
},
// 高亮状态下图形样式
itemStyle: {
areaColor: '#67c23a', // 高亮区域的颜色。
borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
borderWidth: 4, // 描边线宽。为 0 时无描边。
borderType: 'dashed', // 描边类型。
},
},3.7 在地图中对特定的区域配置样式
// 在地图中对特定的区域配置样式
regions: [{
name: '河南', // 地图区域的名称
itemStyle: {
borderColor: 'rgba(0, 0, 0,1)', // 图形的描边颜色。
borderWidth: 4, // 描边线宽。为 0 时无描边。
borderType: 'dashed', // 描边类型。
},
}],3.8 更多配置可查看Echarts官网配置项geo
绘制效果：
4、视觉映射组件visualMap设置
4.1 连续型数据不分段
默认设置：
// 连续型数据不分段。
visualMap: {
type: 'continuous', // 连续型
min: 500, // 最小值
max: 10000, // 最大值
},绘制效果：
自定义设置：
// 连续型数据不分段。
visualMap: {
type: 'continuous', // 连续型
min: 500, // 最小值
max: 10000, // 最大值
range: [500, 10000], // 指定手柄对应数值的位置。range 应在 min max 范围内。
calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
realtime: true, // 拖拽时，是否实时更新。如果为true则拖拽手柄过程中实时更新图表视图。如果为false则拖拽结束时，才更新视图。
inverse: false, // 当inverse为false时，数据大小的位置规则，和直角坐标系相同，即：当 visualMap.orient 为'vertical'时，数据上大下小。当 visualMap.orient 为'horizontal'时，数据右大左小。当inverse为true时，相反。
precision: 0, // 数据展示的小数精度，默认为0，无小数点。
itemWidth: 20, // 长条的宽度
itemHeight: 200, // 长条的高度。
align: 'top', // 组件中手柄和文字摆放位置，可选值为：'auto'自动决定。orient 为 horizontal 时:'left' 手柄和label在右，'right' 手柄和label在左。orient 为 vertical 时:'top' 手柄和label在下，'bottom' 手柄和label在上。
text: ['高', '低'], // 两端的文本
textGap: 20, // 两端文字主体之间的距离，单位为px。
show: true, // 是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在。
// left、top、right、bottom 设置组件在容器中的位置
left: 26,
bottom: 10,
orient: 'vertical', // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
padding: 5, // visualMap-piecewise内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
backgroundColor: '#eee', // 背景色
borderColor: '#999', // 边框颜色
borderWidth: 1, // 边框线宽，单位px。
// 文字样式设置
textStyle: {
color: '#11dd11',
fontSize: 14
},
color: ['red', 'orangered', 'yellow', 'lightskyblue'], // 定义 在选中范围中 的视觉元素。顺序是由数值 大 到 小
},绘制效果：
4.2 连续型数据自动平均分段
默认设置：
// 连续型数据自动平均分段
visualMap: {
type: 'piecewise', // 分段型。
min: 500, // 最小值。
max: 10000, // 最大值。
},绘制效果：重庆和贵州没有颜色是因为，重庆数值大于10000，贵州数值小于500
自定义设置：
// 连续型数据自动平均分段。
visualMap: {
type: 'piecewise', // 分段型。
min: 500, // 最小值。
max: 10000, // 最大值。
splitNumber: 4, // 对于连续型数据，自动平均切分成几段。默认为5段。 连续数据的范围需要 max 和 min 来指定。如果设置了 visualMap-piecewise.pieces 或者 visualMap-piecewise.categories，则 splitNumber 无效。
minOpen: true, // 当 type 为 piecewise 且使用 min/max/splitNumber 时，此参数有效。当值为 true 时，界面上会额外多出一个『< min』的选块。
maxOpen: true, // 当 type 为 piecewise 且使用 min/max/splitNumber 时，此参数有效。当值为 true 时，界面上会额外多出一个『> max』的选块。
// 连续型数据分段设置
selectedMode: 'multiple', // 选择模式，可以是：'multiple'（多选）。'single'（单选）。true（单选）从5.3.3版本支持。false（禁止选择）从5.3.3版本支持。四种取值效果都不一样。
inverse: false, // 是否反转。
precision: 0, // 数据展示的小数精度。
itemWidth: 30, // 图形的宽度，即每个小块的宽度。
itemHeight: 30, // 图形的高度，即每个小块的高度。
align: 'auto', // 指定组件中图形（比如小方块）和文字的摆放关系，可选值为：'auto' 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
text: ['高', '低'], // 两端的文本
textGap: 15, // 每项的色块与文本标签之间的距离，单位为px。
showLabel: true, // 是否显示每项选块的文本标签。默认情况是，如果 visualMap-piecewise.text 被使用则不显示文本标签，否则显示。
itemGap: 20, // 每两个图元选块之间的间隔距离，单位为px。
itemSymbol: 'circle', // 默认的图形。可选值为：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
show: true, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在，即地图各块会渲染颜色。
// left、top、right、bottom 设置组件在容器中的位置
left: 26,
bottom: 40,
orient: 'vertical', // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
padding: 20, // visualMap-piecewise内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
backgroundColor: '#eee', // 背景色
borderColor: '#999', // 边框颜色
borderWidth: 1, // 边框线宽，单位px。
// 文字样式设置
textStyle: {
color: '#11dd11',
fontSize: 14
},
color: ['red', 'orangered', 'yellow', 'lightskyblue'],
},绘制效果：
4.3 连续型数据自定义分段
默认设置：
// 连续型数据自定义分段。
visualMap: {
type: 'piecewise', // 分段型
// 连续型数据自定义分段
// 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界
pieces: [
{
gt: 10000,
label: "> 10000",
color: "red"
},
{
gte: 5000,
lte: 10000,
label: "5001 - 10000",
color: "orangered"
},
{
gte: 500,
lte: 5000,
label: "501 - 5000",
color: "yellow"
},
{
gte: 0,
lte: 500,
label: "0 - 500",
color: "lightskyblue"
},
],
},绘制效果：
自定义设置：
// 连续型数据自定义分段。
visualMap: {
type: 'piecewise', // 分段型
// 连续型数据自定义分段
// 可以使用 lt（小于，less than），gt（大于，greater than），lte（小于等于 less than or equals），gte（大于等于，greater than or equals）来表达边界
pieces: [
{
gt: 10000,
label: "> 10000",
color: "red"
},
{
gte: 5000,
lte: 10000,
label: "5001 - 10000",
color: "orangered"
},
{
gte: 500,
lte: 5000,
label: "501 - 5000",
color: "yellow"
},
{
gte: 0,
lte: 500,
label: "0 - 500",
color: "lightskyblue"
},
],
// 连续型数据分段设置
// 以下部分自定义设置 与 连续型数据自动平均分段 一样
selectedMode: 'multiple', // 选择模式，可以是：'multiple'（多选）。'single'（单选）。true（单选）从5.3.3版本支持。false（禁止选择）从5.3.3版本支持。四种取值效果都不一样。
inverse: false, // 是否反转。
precision: 0, // 数据展示的小数精度。
itemWidth: 30, // 图形的宽度，即每个小块的宽度。
itemHeight: 30, // 图形的高度，即每个小块的高度。
align: 'auto', // 指定组件中图形（比如小方块）和文字的摆放关系，可选值为：'auto' 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
text: ['高', '低'], // 两端的文本
textGap: 15, // 每项的色块与文本标签之间的距离，单位为px。
showLabel: true, // 是否显示每项选块的文本标签。默认情况是，如果 visualMap-piecewise.text 被使用则不显示文本标签，否则显示。
itemGap: 20, // 每两个图元选块之间的间隔距离，单位为px。
itemSymbol: 'circle', // 默认的图形。可选值为：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。
show: true, // 是否显示 visualMap-piecewise 组件。如果设置为 false，不会显示，但是数据映射的功能还存在，即地图各块会渲染颜色。
// left、top、right、bottom 设置组件在容器中的位置
left: 26,
bottom: 40,
orient: 'vertical', // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）。
padding: 20, // visualMap-piecewise内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
backgroundColor: '#eee', // 背景色
borderColor: '#999', // 边框颜色
borderWidth: 1, // 边框线宽，单位px。
// 文字样式设置
textStyle: {
color: '#11dd11',
fontSize: 14
},
},绘制效果：
