手把手教 Vue3.2+Vite+Echarts 5 绘制3D线条效果中国地图
简介安装插件1、下载并引入 echarts2、下载地图的 json 数据3、全局引入或局部引入（我这里选择单页面局部引入）4、开始绘制流线中国地图
项目实践总结：
简介
本篇文章介绍 Vue3.2+Vite 项目内使用 Echarts 5 绘制中国地图，标记分布点！之前没有接触过 Echarts 的，可以先去官方示例看看，里面图形特别齐全。但是官方文档看着费劲的，太多了根本记不住，所以自己做个总结，下次就可以直接使用了，不用做重复无用功。
安装插件
1、下载并引入 echarts
Echarts 已更新到了 5.0以上 版本，安装完记得检查下自己的版本是否是 5.0以上版本 。 安装完成之后，在 package.json 中检查是否安装成功？
// `安装`
npm install echarts --save
2、下载地图的 json 数据
阿里云下载中国以及各个省份地图数据，免费的文件下载地址： 传送门【下载地址】
引入需要绘制的地图数据 json 或 js 文件，本文使用的是 json 格式：
// 地图的 json 数据
import chinaJson from '../utils/china.json'
3、全局引入或局部引入（我这里选择单页面局部引入）
1、全局引入在man.js中引入挂载； 2、单页面引入方式：
3、准备容器
//
4、实例化 echarts 对象
5、指定配置项和数据
var option = {
// 存放需要绘制图片类型，以及样式设置
}
4、开始绘制流线中国地图
1、开始绘制
const drawChina = () => {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
var option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(252, 252, 252, 0.82)',
borderColor: '#fff',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: (params, ticket, callback) => {
//根据业务自己拓展要显示的内容
// console.log(params,'params',)
var res = ''
var initss = 0
var newArry = ''
var name = params.name
// var value = params.value[params.seriesIndex + 1]
if (params.data.ints > 0) {
initss = params.data.ints
}
if (params.data.tit?.length > 0) {
newArry = Array.from(params.data.tit,(item)=> item.title)
}
res = "
return res
},
},
geo: {
show: true,
center: [105.194115019531, 35.582111640625],
map: 'china',
roam: drawChinaObj.roam, //是否允许缩放，拖拽
zoom: drawChinaObj.zoom, //初始化大小
//缩放大小限制
scaleLimit: {
min: 0.1, //最小
max: 12, //最大
},
//设置中心点
//center: [95.97, 29.71],
//省份地图添加背景
//regions: regions,
itemStyle: {
// normal: {
areaColor: '#3352c7',
color: '#e91e63',
borderColor: '#5e84fd',
borderWidth: 2,
// },
},
label: {
color: 'rgba(255,255,255,0.5)',
show: false,
},
//高亮状态
emphasis: {
label: {
show: true,
color: '#fff',
},
itemStyle: {
areaColor: '#e91e63',
},
},
z: 10,
},
//配置属性
series: series,
}
myChart.setOption(option)
}
2、线条动画效果关键代码处理：
var series = []
;[['上海', chinaDatas]].forEach((item, i) => {
series.push(
//设置指向箭头信息
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
},
coords:[[1,2],[2,3]],
lineStyle: {
// normal: {
color: '#adffd0',
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
// },
},
data: convertData(item[1]),
},
// 发射点位置涟漪等效果
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 4, //波纹圆环最大限制，值越大波纹越大
},
itemStyle: {
// normal: {
show: false,
color: '#f8f9f5',
// },
},
label: {
// normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
// },
emphasis: {
show: true,
},
},
symbol: 'circle',
symbolSize: (val) => {
return 5 + val[2] * 5 //圆环大小
},
data: item[1].map((dataItem) => {
return {
name: dataItem[0].name,
tit: dataItem[0].obj,
ints: dataItem[0].ints,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//被攻击点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪相关
period: 2,
brushType: 'stroke',
scale: 5,
},
itemStyle: {
color: '#f00',
},
label: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
emphasis: {
show: true,
color: '#f60',
},
},
symbol: 'circle',
symbolSize: 10, //圆圈大小
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
},
)
})
项目实践
最后分享完美案例
还原
固定
缩放+
缩放-
刷新
总结：
前端路上 | 所知甚少，唯善学。 各位小伙伴有什么疑问，欢迎留言探讨。
— 关注我：前端路上不迷路 —
精彩链接
您阅读本篇文章共花了：
发表评论