ECharts 四川省地图渲染与交互效果实现
一、地图渲染的完整步骤
1.初始化图表实例
说明：echarts.init 用来初始化一个图表实例。mapRef.value 是 Vue 里通过 ref 绑定的 DOM 节点，也就是 <div ref="mapRef">，图表最终会渲染到这个容器里。这样 chart 就是一个 ECharts 实例，后续所有操作都基于它。
chart = echarts.init(mapRef.value)
2.获取四川省地图数据
说明： 打开官网DataV.GeoAtlas地理小工具系列，获取地图对应的省级行政区或者直辖市。
-
这里通过
fetch请求阿里云提供的 四川省行政区划 GeoJSON 数据。 -
code=510000就是四川省的行政区划代码。 -
_full说明是包含详细边界的完整数据（市、区、县的边界）。 -
geoJson解析后就是一个标准的 地理数据对象，ECharts 的地图渲染要用它。
3.注册地图
说明：echarts.registerMap 用来注册一个地图。第一个参数 'sichuan' 是地图的名字，后面配置 series.map 时要用这个名字。第二个参数 geoJson 就是刚才获取到的四川地图数据。注册以后，ECharts 就认识 "sichuan" 这张地图了。
echarts.registerMap('sichuan', geoJson)
4. 配置项 Option
说明：
(1) tooltip 提示框
-
trigger: 'item'：提示框触发方式，鼠标移到某个区域（item）时触发。 -
formatter: '{b}'：显示区域的名字（{b}代表数据项的名称，如“成都市”）。
(2) visualMap 视觉映射
-
min、max：数值范围，0~100。 -
left: 'left'、top: 'bottom'：控件位置。 -
text: ['高','低']：视觉图例上的文字。 -
calculable: true：允许用户在 visualMap 上拖拽调整数值范围。
👉 这个控件的作用是把series.data里的数值映射到颜色深浅。
(3) series 系列
-
name: '四川'：系列名称，会出现在 tooltip 中。 -
type: 'map'：图表类型是地图。 -
map: 'sichuan'：对应上面注册的地图名字。 -
roam: true：支持鼠标缩放和拖拽地图。 -
aspectScale: 1：地图宽高比（可选，这里注释掉了）。 -
label.show: true：显示地图上每个地区的文字标签（区/市名称）。 -
data: []：存放每个地区的数据，比如：data: [ { name: '成都市', value: 90 }, { name: '绵阳市', value: 70 } ]会映射到 visualMap 上，显示颜色深浅。
const option = {tooltip: {trigger: 'item',formatter: '{b}' // 显示地区名},visualMap: {min: 0,max: 100,left: 'left',top: 'bottom',text: ['高','低'],calculable: true},series: [{name: '四川',type: 'map',map: '