地图飞线图组件

//安装 default-passive-events

npm i default-passive-events -S

安装echart

npm i echart -S

在main.ts中引入

import 'default-passive-events'

</template>

import { ref, reactive, watch, onMounted } from 'vue'

//引入echart

import * as echarts from 'echarts';

//引入请求或者地图json文件

// import { getMap } from '@/api/user'

const getMap = require('@/assets/screen-map.json')

//给盒子绑定ref做画布

console.log(getMap)

const echars = ref(null)

//定义一个变量接受请求json数据

const geoJson: any = reactive({

data: {}

})

geoJson.data = getMap

// 发送数据

const getgeoJson = () => {

console.log(geoJson.data)

//拿到数据传给echart处理方法

genChart(geoJson.data)

}

onMounted(() => {

getgeoJson()

})

//调用请求方法

//echart 处理方法

const genChart = (geoJson: any) => {

//定义起始线的位置

const geoGpsMap: any = {

'1': [116.4551, 40.2539],

'2': [116.4551, 40.2539],

'3': [117.1582, 36.8701],

'4': [117.1582, 36.8701],

'5': [103.9526, 30.7617],

'6': [103.9526, 30.7617]

}

//定义线的数据//定义重点线

const geoCoordMap: any = {

'江苏': [118.8062, 31.9208],

'黑龙江': [127.9688, 45.368],

'内蒙古': [110.3467, 41.4899],

'吉林': [125.8154, 44.2584],

'北京市': [116.4551, 40.2539],

'辽宁': [123.1238, 42.1216],

'河北': [114.4995, 38.1006],

'天津': [117.4219, 39.4189],

'山西': [112.3352, 37.9413],

'陕西': [109.1162, 34.2004],

'甘肃': [103.5901, 36.3043],

'宁夏': [106.3586, 38.1775],

'青海': [101.4038, 36.8207],

'新疆': [87.9236, 43.5883],

'四川': [103.9526, 30.7617],

'重庆': [108.384366, 30.439702],

'山东': [117.1582, 36.8701],

'河南': [113.4668, 34.6234],

'安徽': [117.29, 32.0581],

'湖北': [114.3896, 30.6628],

'浙江': [119.5313, 29.8773],

'福建': [119.4543, 25.9222],

'江西': [116.0046, 28.6633],

'湖南': [113.0823, 28.2568],

'贵州': [106.6992, 26.7682],

'云南': [102.9199, 25.4663],

'广东': [113.12244, 23.009505],

'广西': [108.479, 23.1152],

'海南': [110.3893, 19.8516],

'上海': [121.4648, 31.2891]

}

const d1: any = {

'江苏': 10041,

'黑龙江': 4093,

'内蒙古': 1157,

'吉林': 4903,

'北京市': 2667,

'辽宁': 8331,

'河北': 23727,

'天津': 681,

'山西': 5352,

'陕西': 38,

'甘肃': 77,

'宁夏': 65,

'青海': 10,

'新疆': 193,

'四川': 309,

'重庆': 77,

'山东': 21666,

'河南': 15717,

'安徽': 15671,

'湖北': 3714,

'浙江': 3141,

'福建': 955,

'江西': 4978,

'湖南': 778,

'贵州': 33,

'云南': 149,

'广东': 1124,

'广西': 125,

'海南': 7,

'上海': 2155

}

const d2: any = {

'江苏': 0,

'黑龙江': 0,

'内蒙古': 0,

'吉林': 0,

'北京市': 0,

'辽宁': 0,

'河北': 0,

'天津': 0,

'山西': 0,

'陕西': 0,

'甘肃': 0,

'宁夏': 0,

'青海': 0,

'新疆': 0,

'四川': 0,

'重庆': 0,

'山东': 0,

'河南': 0,

'安徽': 0,

'湖北': 0,

'浙江': 0,

'福建': 0,

'江西': 0,

'湖南': 0,

'贵州': 0,

'云南': 0,

'广东': 0,

'广西': 0,

'海南': 0,

'上海': 0

}

const d3: any = {

'江苏': 11788,

'黑龙江': 1944,

'内蒙古': 2954,

'吉林': 3482,

'北京市': 1808,

'辽宁': 5488,

'河北': 27035,

'天津': 2270,

'山西': 13623,

'陕西': 4221,

'甘肃': 754,

'宁夏': 1783,

'青海': 91,

'新疆': 1907,

'四川': 4905,

'重庆': 1420,

'山东': 39781,

'河南': 16154,

'安徽': 7914,

'湖北': 6802,

'浙江': 5812,

'福建': 3345,

'江西': 4996,

'湖南': 5627,

'贵州': 1504,

'云南': 2725,

'广东': 6339,

'广西': 1009,

'海南': 0,

'上海': 1988

}

const d4: any = {

'江苏': 0,

'黑龙江': 0,

'内蒙古': 0,

'吉林': 0,

'北京市': 0,

'辽宁': 0,

'河北': 0,

'天津': 0,

'山西': 0,

'陕西': 0,

'甘肃': 0,

'宁夏': 0,

'青海': 0,

'新疆': 0,

'四川': 0,

'重庆': 0,

'山东': 0,

'河南': 0,

'安徽': 0,

'湖北': 0,

'浙江': 0,

'福建': 0,

'江西': 0,

'湖南': 0,

'贵州': 0,

'云南': 0,

'广东': 0,

'广西': 0,

'海南': 0,

'上海': 0

}

const d5: any = {

'江苏': 159,

'黑龙江': 5,

'内蒙古': 54,

'吉林': 10,

'北京市': 0,

'辽宁': 0,

'河北': 1679,

'天津': 1,

'山西': 2698,

'陕西': 1744,

'甘肃': 362,

'宁夏': 429,

'青海': 122,

'新疆': 731,

'四川': 3925,

'重庆': 1480,

'山东': 79,

'河南': 1017,

'安徽': 208,

'湖北': 1209,

'浙江': 1418,

'福建': 1237,

'江西': 1004,

'湖南': 1511,

'贵州': 345,

'云南': 1429,

'广东': 2242,

'广西': 2271,

'海南': 59,

'上海': 8

}

const d6: any = {

'江苏': 0,

'黑龙江': 0,

'内蒙古': 0,

'吉林': 0,

'北京市': 0,

'辽宁': 0,

'河北': 0,

'天津': 0,

'山西': 0,

'陕西': 0,

'甘肃': 0,

'宁夏': 0,

'青海': 0,

'新疆': 0,

'四川': 0,

'重庆': 0,

'山东': 0,

'河南': 0,

'安徽': 0,

'湖北': 0,

'浙江': 0,

'福建': 0,

'江西': 0,

'湖南': 0,

'贵州': 0,

'云南': 0,

'广东': 0,

'广西': 0,

'海南': 0,

'上海': 0

}

//定义线颜色数据

const colors = [

['#1DE9B6', '#1DE9B6', '#FFDB5C', '#FFDB5C', '#04B9FF', '#04B9FF'],

['#1DE9B6', '#F46E36', '#04B9FF', '#5DBD32', '#FFC809', '#FB95D5', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],

['#37A2DA', '#67E0E3', '#32C5E9', '#9FE6B8', '#FFDB5C', '#FF9F7F', '#FB7293', '#E062AE', '#E690D1', '#E7BCF3', '#9D96F5', '#8378EA', '#8378EA'],

['#DD6B66', '#759AA0', '#E69D87', '#8DC1A9', '#EA7E53', '#EEDD78', '#73A373', '#73B9BC', '#7289AB', '#91CA8C', '#F49F42']

]

const colorIndex = 0

const year = ['北京', '北京', '青岛', '青岛', '成都', '成都']

//定义其实点

const mapData: any = [

[],

[]

]

/* 柱子Y名称 */

const categoryData: any = []

const barData: any = []

for (var key in geoCoordMap) {

mapData[0].push({

'year': '长春',

'name': key,

'value': d1[key] / 100,

'value1': d1[key] / 100

})

mapData[1].push({

'year': '长春',

'name': key,

'value': d1[key] / 100,

'value1': d2[key] / 100

})

mapData[2].push({

'year': '青岛',

'name': key,

'value': d3[key] / 100,

'value1': d3[key] / 100

})

mapData[3].push({

'year': '青岛',

'name': key,

'value': d3[key] / 100,

'value1': d4[key] / 100

})

mapData[4].push({

'year': '成都',

'name': key,

'value': d5[key] / 100,

'value1': d5[key] / 100

})

mapData[5].push({

'year': '成都',

'name': key,

'value': d5[key] / 100,

'value1': d6[key] / 100

})

}

for (var i = 0; i < mapData.length; i++) {

mapData[i].sort(function sortNumber(a: any, b: any) {

return a.value - b.value

})

barData.push([])

categoryData.push([])

for (var j = 0; j < mapData[i].length; j++) {

barData[i].push(mapData[i][j].value1)

categoryData[i].push(mapData[i][j].name)

}

echarts.registerMap('china', geoJson)

//定义起始点

const convertData = function (data: any) {

var res = []

for (var i = 0; i < data.length; i++) {

var geoCoord = geoCoordMap[data[i].name]

if (geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value)

})

}

return res

}

//定义路线

const convertToLineData = function (data: any, gps: any) {

const res = []

for (let i = 0; i < data.length; i++) {

var dataItem = data[i]

var toCoord = geoCoordMap[dataItem.name]

var fromCoord = gps // 郑州

// var toCoord = geoGps[Math.random()*3];

if (fromCoord && toCoord) {

res.push([{

coord: fromCoord,

value: dataItem.value

}, {

coord: toCoord

}])

}

return res

}

//定义ecart绘画层次

const optionXyMap01: any = {

timeline: {

data: year,

axisType: 'category',

autoPlay: true,

playInterval: 3000,

left: '10%',

right: '5%',

bottom: '3%',

width: '80%',

// height: null,

label: {

color: '#ddd',

emphasis: {

color: '#fff',

borderColor: 'red'

// color: '#fff'

symbolSize: 10,

//原先线的颜色

lineStyle: {

color: '#555'

//圆点的颜色

checkpointStyle: {

borderColor: '#666',

color:'red',

borderWidth: 2

//左右箭头颜色

controlStyle: {

showNextBtn: true,

showPrevBtn: true,

color: '#666',

borderColor: '#666',

// emphasis: {

// }

//地图绘画

baseOption: {

animation: true,

animationDuration: 1000,

animationEasing: 'cubicInOut',

animationDurationUpdate: 1000,

animationEasingUpdate: 'cubicInOut',

grid: {

right: '5%',

top: '15%',

bottom: '15%',

width: '20%'

// tooltip: {

// trigger: 'axis', // hover触发器

// axisPointer: { // 坐标轴指示器，坐标轴触发有效

// color:'red',

// type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'

// shadowStyle: {

// color: 'red' // hover颜色

// }

// },

geo: {

show: true,

map: 'china',

roam: true,

zoom: 1.1,

//调整地图位置

center: [116.83531246, 34.0267395887],

// center: [1, 3],

// label: {

// },

emphasis: {

show: false,

areaColor: '#389BB7',

borderWidth: 2

itemStyle: {

borderColor: 'rgba(147, 235, 248, 1)',

//边界线的宽度

borderWidth: 2,

areaColor: {

type: 'radial',

x: 0.5,

y: 0.5,

r: 0.8,

//颜色渐变

colorStops: [{

offset: 0,

color: 'rgba(100, 200, 248, 0)' // 0% 处的颜色

}, {

offset: 1,

color: 'rgba(100, 100, 147, 0.2)' // 100% 处的颜色

}],

globalCoord: false // 缺省为 false

shadowColor: 'rgba(128, 217, 248, 1)',

// shadowColor: 'rgba(255, 255, 255, 1)',

shadowOffsetX: -2,

shadowOffsetY: 2,

shadowBlur: 10

}

options: []

}

for (var n = 0; n < year.length; n++) {

optionXyMap01.options.push({

backgroundColor: '#424446',

title: [{

left: '2%',

top: '2%',

color: '#fff',

fontSize: 35,

fontWeight: 700

}, {

id: 'statistic',

text: year[n] + '销售额统计情况',

left: '2%',

top: '8%',

color: '#fff',

fontSize: 25

}],

xAxis: {

type: 'value',

scale: true,

position: 'top',

min: 0,

boundaryGap: false,

splitLine: {

show: false

axisLine: {

show: false

axisTick: {

show: false

axisLabel: {

margin: 2,

color: '#aaa'

}

yAxis: {

type: 'category',

// name: 'TOP 20',

nameGap: 16,

axisLine: {

show: true,

lineStyle: {

color: '#ddd'

}

axisTick: {

show: false,

lineStyle: {

color: '#ddd'

}

axisLabel: {

interval: 0,

color: '#ddd'

data: categoryData[n]

series: [

// {

// // 文字和标志

// name: 'light',

// type: 'scatter',

// coordinateSystem: 'geo',

// data: convertData(mapData[n]),

// symbolSize: function (val: number[]) {

// return val[2] / 10

// },

// label: {

// formatter: '{b}',

// position: 'right',

// show: true,

// },

// emphasis: {

// show: true

// },

// itemStyle: {

// color: colors[colorIndex][n]

// }

// },

// {

// type: 'map',

// map: 'china',

// geoIndex: 0,

// aspectScale: 0.75, // 长宽比

// showLegendSymbol: false, // 存在legend时显示

// label: {

// show: false,

// color: '#fff'

// },

// roam: true,

// areaColor: '#031525',

// borderColor: '#FFFFFF',

// itemStyle: {

// areaColor: '#2B91B7'

// },

// animation: false,

// data: mapData

// },

{ // 地图点的动画效果

// name: 'Top 5',

type: 'effectScatter',

coordinateSystem: 'geo',

data: convertData(mapData[n].sort(function (a: any, b: any) {

return b.value - a.value

}).slice(0, 20)),

symbolSize: function (val: number[]) {

return val[2] / 15

showEffectOn: 'render',

rippleEffect: {

brushType: 'stroke',

scale: 2

// hoverAnimation: true,

label: {

formatter: '{b}',

position: 'right',

show: true

itemStyle: {

color: colors[colorIndex][n],

shadowBlur: 10,

shadowColor: colors[colorIndex][n]

zlevel: 1

{ // 地图线的动画效果

type: 'lines',

zlevel: 2,

effect: {

show: true,

period: 4, // 箭头指向速度，值越小速度越快

trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重

symbol: 'arrow', // 箭头图标

symbolSize: 3 // 图标大小

lineStyle: {

color: colors[colorIndex][n],

width: 0.1, // 尾迹线条宽度

opacity: 0.5, // 尾迹线条透明度

curveness: 0.3 // 尾迹线条曲直度

data: convertToLineData(mapData[n], geoGpsMap[n + 1])

{ // 柱状图

zlevel: 1.5,

type: 'bar',

symbol: 'none',

itemStyle: {

color: colors[colorIndex][n]

data: barData[n]

}

]

})

}

var chartDom: any = echars.value

//挂载数据

echarts.init(chartDom).setOption(optionXyMap01)

}

</script>

.Bemap {

width: 700px;

height: 500px;

margin: auto;

// background-color: red;

}

</style>

最后编辑于：2023.03.09 16:01:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,558评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,002评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,036评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,024评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,144评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,255评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,295评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,068评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,478评论 1赞 305
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,789评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,965评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,649评论 4赞 336
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,267评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,982评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,223评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,800评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,847评论 2赞 351

地图飞线图组件

推荐阅读更多精彩内容