手把手教 Vue3.2+Vite+Echarts 5 绘制3D线条效果中国地图

手把手教 Vue3.2+Vite+ 5 绘制3D线条效果中国地图 项目实践

简介

本篇文章介绍 Vue3.2+Vite 项目内使用 5 绘制中国地图，标记分布点！之前没有接触过 的，可以先去官方示例看看，里面图形特别齐全。但是官方文档看着费劲的，太多了根本记不住，所以自己做个总结，下次就可以直接使用了，不用做重复无用功。

安装插件 1、下载并引入

已更新到了 5.0以上 版本，安装完记得检查下自己的版本是否是 5.0以上版本 。

安装完成之后，在 .json 中检查是否安装成功？

// `安装`
npm install echarts --save

2、下载地图的 json 数据

阿里云下载中国以及各个省份地图数据，免费的文件下载地址：

传送门【下载地址】

引入需要绘制的地图数据 json 或 js 文件，本文使用的是 json 格式：

// 地图的 json 数据
import chinaJson from '../utils/china.json'

3、全局引入或局部引入（我这里选择单页面局部引入）

1、全局引入在man.js中引入挂载；

2、单页面引入方式：

<script setup>import * as echarts from 'echarts'import chinaJson from '../utils/china.json'</script>

3、准备容器

// 
<div ref="chinaMap" class="map"></div>

4、实例化 对象

<script setup>import * as echarts from 'echarts'import chinaJson from '../utils/china.json' // 地图的 json 数据// 初始化const chinaMap = ref()var myChart = echarts.init(chinaMap.value)echarts.registerMap('china', chinaJson) //注册可用的地图</script>

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 = 0var 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 = "
" + name + '旅游：'+ "
" + newArry + "
"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, fillscale: 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]),},],},)})

项目实践