使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)
更新时间：2022年04月07日 08:31:03 作者：前端人
最近接到一个需求是做一个中国地图,下面这篇文章主要给大家介绍了关于如何使用Vue3和Echarts 5绘制带有立体感流线中国地图的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
本文绘制的地图效果图如下：
一、Echarts 使用五部曲
1、下载并引入 echarts
Echarts 已更新到了 5.0 版本，安装完记得检查下自己的版本是否是 5.0 。
npm install echarts --save
下载地图的 json 数据
可以下载中国以及各个省份地图数据。免费的文件下载地址：
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
记得收藏哦！免得浪费加班时间。
引入：
import * as echarts from "echarts" import chinaJSON from '../../assets/json/china.json'
2、准备容器
给元素定义宽高确定的容器用来装地图。
<template> <div id="chinaMap"></div> </template>
3、实例化 echarts 对象
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
var myChart = echarts.init(document.getElementById('chinaMap'))
// 创建了一个 myChart 对象4、指定配置项和数据
var option = {
// 存放需要绘制图片类型，以及样式设置
}5、给 echarts 对象设置配置项
myChart.setOption(option)
就这么简单几步还用你告诉我吗？不瞒你说，官网也有这东东。虽然这些你都知道，但是并不影响你还是不知道流线图是怎么绘制出来的。下面我们看看是如何绘制的。
二、开始绘制流线中国地图
第一步：先绘制一个中国地图
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
drawChina()
})
function drawChina() {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
var option = {
geo: {
show: true,
//设置中心点
center: [105.194115019531, 35.582111640625],
map: 'china',
roam: true, //是否允许缩放，拖拽
zoom: 1, //初始化大小
//缩放大小限制
scaleLimit: {
min: 0.1, //最小
max: 12, //最大
},
//各个省份模块样式设置
itemStyle: {
normal: {
areaColor: '#3352c7',//背景色
color: 'red',//字体颜色
borderColor: '#5e84fd',
borderWidth: 2,
},
},
//高亮状态
emphasis: {
itemStyle: {
areaColor: '#ffc601',
},
label: {
show: true,
color: '#fff',
},
},
// 显示层级
z: 10,
},
}
myChart.setOption(option)
}一个简单的地图就绘制好了，继续研究如何添加流线。
第二步：添加流线
通过 series 属性来设置发色点的样式，接受点的样式，以及线条和线条上的动画。
设置 series 的值：
// 中国地理坐标图
var chinaGeoCoordMap: Object = {
西安: [108.906866, 34.162109],
拉萨: [91.140856, 29.645554],
}
//发射点
var chinaDatas = [
[
{
name: '拉萨',
value: 2,
},
],
]
//投射点
const scatterPos = [108.906866, 34.162109]
// 数据转换
var convertData = function (data: any) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var fromCoord = chinaGeoCoordMap[dataItem[0].name]
var toCoord = scatterPos
if (fromCoord && toCoord) {
res.push([
{
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
},
])
}
}
return res
}
var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {
series.push(
//设置指向箭头信息
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
},
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, //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
},
emphasis: {
show: true,
},
},
symbol: 'circle',
symbolSize: function (val: Array<any>) {
return 5 + val[2] * 5 //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f8f9f5',
},
},
data: item[1].map(function (dataItem: any) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//被攻击点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪相关
period: 2,
brushType: 'stroke',
scale: 5,
},
label: {
normal: {
show: true,
position: 'right',
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
emphasis: {
show: true,
color: '#f60',
},
},
itemStyle: {
normal: {
color: '#f00',
},
},
symbol: 'circle',
symbolSize: 10, //圆圈大小
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
},
)
})给上边的 option 添加 series 属性。
第三步：添加立体投影
添加立体投影的时候，由于并没有这样的属性，所以需要通过设置边框投影，再加一个偏移。
实现原理：绘制两个地图，设置中心点是一样的，然后一个设置边框投影+偏移，它的层级设置小一点，上边再绘制一个地图不设置投影，这样就能够实现上述效果。
// series 添加一个对象，绘制新地图
{
//绘制一个新地图
type: 'map',
map: 'china',
zoom: 1,
center: [105.194115019531, 35.582111640625],
z: -1,
aspectScale: 0.75, //
itemStyle: {
normal: {
areaColor: '#f00',
borderColor: '#090438',
borderWidth: '2',
shadowColor: '#090438',
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
}上述效果的完整源码：
<template>
<div>
首页
<div
ref="chinaMap"
class="chinaMap"
style="
height: 800px;
border: solid 1px red;
width: 100%;
background: #0b0873;
"
>
地图1
</div>
</div>
</template>
<style scoped>
.chinaMap {
transform: rotate3d(1, 0, 0, 35deg);
}
</style>
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {
drawChina()
})
/**************************** series start ************************************/
//中国地理坐标图
var chinaGeoCoordMap: Object = {
西安: [108.906866, 34.162109],
柯桥区: [120.476075, 30.078038],
拉萨: [91.140856, 29.645554],
沈阳: [123.431474, 41.805698],
新疆: [87.627704, 43.793026],
台湾: [121.508903, 25.044319],
}
var chinaDatas = [
[
{
name: '柯桥区',
value: 0,
},
],
[
{
name: '拉萨',
value: 2,
},
],
[
{
name: '沈阳',
value: 1,
},
],
[
{
name: '新疆',
value: 1,
},
],
[
{
name: '台湾',
value: 1,
},
],
]
//设置投射点
const scatterPos = [108.906866, 34.162109]
var convertData = function (data: any) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var fromCoord = chinaGeoCoordMap[dataItem[0].name]
var toCoord = scatterPos
if (fromCoord && toCoord) {
res.push([
{
coord: fromCoord,
value: dataItem[0].value,
},
{
coord: toCoord,
},
])
}
}
console.log('res', res)
return res
}
var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {
console.log(item, item[0])
series.push(
{
//绘制一个新地图
type: 'map',
map: 'china',
zoom: 1,
center: [105.194115019531, 35.582111640625],
z: -1,
aspectScale: 0.75, //
itemStyle: {
normal: {
areaColor: '#f00',
borderColor: '#090438',
borderWidth: '2',
shadowColor: '#090438',
shadowOffsetX: 0,
shadowOffsetY: 15,
},
},
},
//设置指向箭头信息
{
type: 'lines',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 8, //图标大小
},
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, //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 13,
},
emphasis: {
show: true,
},
},
symbol: 'circle',
symbolSize: function (val: Array<any>) {
return 5 + val[2] * 5 //圆环大小
},
itemStyle: {
normal: {
show: false,
color: '#f8f9f5',
},
},
data: item[1].map(function (dataItem: any) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//被攻击点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪相关
period: 2,
brushType: 'stroke',
scale: 5,
},
label: {
normal: {
show: true,
position: 'right',
// offset:[5, 0],
color: '#0f0',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
emphasis: {
show: true,
color: '#f60',
},
},
itemStyle: {
normal: {
color: '#f00',
},
},
symbol: 'circle',
symbolSize: 10, //圆圈大小
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
},
)
})
/****************************************************************/
function drawChina() {
var myChart = echarts.init(chinaMap.value)
echarts.registerMap('china', chinaJson) //注册可用的地图
var option = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(166, 200, 76, 0.82)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = ''
var name = params.name
var value = params.value[params.seriesIndex + 1]
res = "<span style='color:#fff;'>" + name + '</span>
数据：' + value
return res
},
},
geo: {
show: true,
center: [105.194115019531, 35.582111640625],
map: 'china',
roam: true, //是否允许缩放，拖拽
zoom: 1, //初始化大小
//缩放大小限制
scaleLimit: {
min: 0.1, //最小
max: 12, //最大
},
//设置中心点
//center: [95.97, 29.71],
//省份地图添加背景
//regions: regions,
itemStyle: {
normal: {
areaColor: '#3352c7',
color: 'red',
borderColor: '#5e84fd',
borderWidth: 2,
},
},
label: {
color: 'rgba(255,255,255,0.5)',
show: false,
},
//高亮状态
emphasis: {
itemStyle: {
areaColor: '#ffc601',
},
label: {
show: true,
color: '#fff',
},
},
z: 10,
},
//配置属性
series: series,
}
myChart.setOption(option)
}
</script>总结
到此这篇关于使用Vue3和Echarts 5绘制带有立体感流线中国地图的文章就介绍到这了,更多相关Vue3 Echarts5绘制中国地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue实现同一个页面可以有多个router-view的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
本文分为html，js和css代码给大家详细介绍了vue Element-ui input 远程搜索与修改建议显示模版功能，感兴趣的朋友一起看看吧2017-10-10
这篇文章主要介绍了vue导出html、word和pdf的实现方法，文中完成了三种文件的导出但是还有很多种方法，小编就不给大家一一列举了,需要的朋友可以参考下2018-07-07
关于element-ui日期时间选择器选不中12小时以后的时间详解
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了如何利用Vue实现悬浮框自由移动+录音功能，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下2022-07-07
今天小编就为大家分享一篇vue项目强制清除页面缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在前端开发中,使用axios进行数据请求是常见的做法,封装axios可以统一请求头处理、方便接口管理、配置多拦截器等,提高代码的可维护性和重用性,本文详细记录了axios的封装过程,包括安装、配置跨域处理、接口管理文件的创建等2024-09-09
这篇文章主要介绍了浅析Proxy可以优化vue的数据监听机制问题及实现思路,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue3中如何实现定义全局变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2023-03-03
最新评论