Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示(1)

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

},

{

name: “天津”,

value: 52,

},

{

name: “上海”,

value: 14,

},

{

name: “重庆”,

value: 50,

},

{

name: “河北”,

value: 20,

},

{

name: “河南”,

value: 30,

},

{

name: “云南”,

value: 55,

},

{

name: “辽宁”,

value: 50,

},

{

name: “黑龙江”,

value: 40,

},

{

name: “湖南”,

value: 6,

},

{

name: “安徽”,

value: 96,

},

{

name: “山东”,

value: 75,

},

{

name: “新疆”,

value: 45,

},

{

name: “江苏”,

value: 15,

},

{

name: “浙江”,

value: 8,

},

{

name: “江西”,

value: 78,

},

{

name: “湖北”,

value: 78,

},

{

name: “广西”,

value: 36,

},

{

name: “甘肃”,

value: 25,

},

{

name: “山西”,

value: 140,

},

{

name: “内蒙古”,

value: 85,

},

{

name: “陕西”,

value: 85,

},

{

name: “吉林”,

value: 74,

},

{

name: “福建”,

value: 20,

},

{

name: “贵州”,

value: 74,

},

{

name: “广东”,

value: 47,

},

{

name: “青海”,

value: 45,

},

{

name: “西藏”,

value: 41,

},

{

name: “四川”,

value: 3,

},

{

name: “宁夏”,

value: 7,

},

{

name: “海南”,

value: 7,

},

{

name: “台湾”,

value: 200,

},

{

name: “香港”,

value: 2,

},

{

name: “澳门”,

value: 5,

}

],

//指定图表的配置项和数据

option: {

//标题组件

title: {

show: true,

text: ‘全国各省份旅游景点(已评级)数量’,

subtext: ‘截至到2021年12月’,

left: “center”,

top: 16,

},

//提示框组件

tooltip: {

show: true,

//触发类型：数据项图形触发

trigger: ‘item’,

padding: 10,

borderWidth: 1,

borderColor: ‘#409eff’,

backgroundColor: ‘rgba(255,255,255,0.4)’,

textStyle: {

color: ‘#000000’,

fontSize: 12

},

//提示框内容格式器

formatter: (e) => {

let data = e.data;

//此处将各等级景点数量表示为0-10内的随机整数

data.five = Math.random() * 10 | 0;

data.four = Math.random() * 10 | 0;

data.three = Math.random() * 10 | 0;

data.two = Math.random() * 10 | 0;

data.one = Math.random() * 10 | 0;

//景点数量 - 五个等级之和

data.number = data.five + data.four + data.three + data.two + data.one;

//字符串模板

let context = `

${data.name}

景点数量 : ${data.number}处

5A级 : ${data.five}处

4A级 : ${data.four}处

3A级 : ${data.three}处

2A级 : ${data.two}处

1A级 : ${data.one}处

`;

return context;

}

},

//视觉映射组件(左下角)

visualMap: {

show: true,

left: 26,

bottom: 40,

showLabel: true,

// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）

calculable: false,

// 拖拽时，是否实时更新

realtime: true,

align: ‘left’,

//各颜色代表的区域

pieces: [

{

gte: 100,

label: “> 100”,

color: “#FDB669”

},

{

gte: 50,

lt: 99,

label: “50 - 99”,

color: “#FECA7B”

},

{

gte: 30,

lt: 49,

label: “30 - 49”,

color: “#FEE191”

},

{

gte: 10,

lt: 29,

label: “10 - 29”,

color: “#FFF0A8”

},

{

lt: 9,

label: ‘< 10’,

color: “#FFFFBF”

}

]

},

//地理坐标系组件

geo: {

//使用 registerMap 注册的地图名称

map: “china”,

//是否开启鼠标缩放和平移漫游

roam: true,

//当前视角缩放比例

zoom: 1,

//滚轮缩放的极限控制

scaleLimit: {

min: 1, //最小1倍

max: 3 //最大3倍

},

//地图组件离容器的距离

top: 90,

left: ‘center’,

//图形上的文本标签

label: {

show: true,

fontSize: “11”

},

//地图区域的多边形 图形样式

itemStyle: {

borderColor: “rgba(0, 0, 0, 0.2)”,

shadowColor: ‘rgba(0, 0, 0, 0.2)’,

shadowBlur: 10,

// 高亮状态(鼠标移入后)的多边形和标签样式

emphasis: {

areaColor: “#f98333”,

shadowOffsetX: 2,

shadowOffsetY: 2,

},

}

},

series: [

{

type: “map”,

roam: true,

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

,

//地图区域的多边形 图形样式

itemStyle: {

borderColor: “rgba(0, 0, 0, 0.2)”,

shadowColor: ‘rgba(0, 0, 0, 0.2)’,

shadowBlur: 10,

// 高亮状态(鼠标移入后)的多边形和标签样式

emphasis: {

areaColor: “#f98333”,

shadowOffsetX: 2,

shadowOffsetY: 2,

},

}

},

series: [

{

type: “map”,

roam: true,

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-ewjKqorU-1715838702694)]