vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解)
更新時(shí)間：2021年01月27日 11:41:02 作者：Ccc,
這篇文章主要介紹了vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
@vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果
#話不多說看效果圖
操作步驟：
執(zhí)行命令:npm run echarts -s 并回車
看到這樣的提示代表安裝成功 PS：網(wǎng)絡(luò)不好的情況建議用cnpm淘寶鏡像（全局終端執(zhí)行命令：npm i -g cnpm --registry=https://registry.npm.taobao.org）
下載china.js
鏈接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取碼: gjz4
引入
import echarts from 'echarts/lib/echarts'; import '@/map/china.js';
寫一個(gè)echarts容器 綁定ref
<div class="wrapper"> <div class="map-container" style="width: 100%; height: 100%" ref="myEchart" ></div> </div>
配置option (有必要的注釋都已標(biāo)記)
<script>
let echarts = require("echarts");
import "echarts/lib/component/markLine";
mounted(){
let data = [
{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
"name": "天津",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "248"
}, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
"name": "山西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "250"
}, { "name": "內(nèi)蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
"name": "遼寧",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "252"
}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
"name": "黑龍江",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "254"
}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
"name": "江蘇",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "256"
}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
"name": "安徽",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "258"
}, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
"name": "江西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "260"
}, { "name": "山東", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
"name": "河南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "262"
}, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
"name": "湖南",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "264"
}, { "name": "廣東", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
"name": "廣西",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "266"
}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
"name": "重慶",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "268"
}, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
"name": "貴州",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "270"
}, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
"name": "西藏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "272"
}, { "name": "陜西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
"name": "甘肅",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "274"
}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
"name": "寧夏",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "276"
}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
"name": "臺(tái)灣",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "278"
}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
"name": "澳門",
"dataCount": [0, 0, 0, 0, 0, 0, 0],
"id": "280"
}]
let chinaGeoCoordMap ={
'黑龍江': [127.9688, 45.368,1],
'內(nèi)蒙古': [110.3467, 41.4899,1],
'吉林': [125.8154, 44.2584,1],
'北京': [116.4551, 40.2539,2],
'遼寧': [123.1238, 42.1216,1],
'河北': [114.4995, 38.1006,1],
'天津': [117.4219, 39.4189,1],
'山西': [112.3352, 37.9413,1],
'陜西': [109.1162, 34.2004,1],
'甘肅': [103.5901, 36.3043,1],
'寧夏': [106.3586, 38.1775,1],
'青海': [101.4038, 36.8207,1],
'新疆': [87.9236, 43.5883,1],
'西藏': [91.11, 29.97,1],
'四川': [103.9526, 30.7617,1],
'重慶': [108.384366, 30.439702,1],
'山東': [117.1582, 36.8701,1],
'河南': [113.4668, 34.6234,1],
'江蘇': [118.8062, 31.9208,1],
'安徽': [117.29, 32.0581,1],
'湖北': [114.3896, 30.6628,1],
'浙江': [119.5313, 29.8773,1],
'福建': [119.4543, 25.9222,1],
'江西': [116.0046, 28.6633,1],
'湖南': [113.0823, 28.2568,1],
'貴州': [106.6992, 26.7682,1],
'云南': [102.9199, 25.4663,1],
'廣東': [113.12244, 23.009505,1],
'廣西': [108.479, 23.1152,1],
'海南': [110.3893, 19.8516,1],
'上海': [121.4648, 31.2891,1],
'臺(tái)灣': [120.991676054688, 24.7801149726563,1],
'澳門': [113.33, 22.11,1],
'香港': [114.15, 22.15,1]
}
for (let i=0;i<data.length;i++){
var da = chinaGeoCoordMap[data[i].name];
chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
}
let chinaDatas = [
[{
name: '北京',
value: 2
}], [{
name: '黑龍江',
value: 1
}], [{
name: '內(nèi)蒙古',
value: 1
}], [{
name: '吉林',
value: 1
}], [{
name: '遼寧',
value: 1
}], [{
name: '河北',
value: 1
}], [{
name: '天津',
value: 1
}], [{
name: '山西',
value: 1
}], [{
name: '陜西',
value: 1
}], [{
name: '甘肅',
value: 1
}], [{
name: '寧夏',
value: 1
}], [{
name: '青海',
value: 1
}], [{
name: '新疆',
value: 1
}], [{
name: '西藏',
value: 1
}], [{
name: '四川',
value: 1
}], [{
name: '重慶',
value: 1
}], [{
name: '山東',
value: 1
}], [{
name: '河南',
value: 1
}], [{
name: '江蘇',
value: 1
}], [{
name: '安徽',
value: 1
}], [{
name: '湖北',
value: 1
}], [{
name: '浙江',
value: 1
}], [{
name: '福建',
value: 1
}], [{
name: '江西',
value: 1
}], [{
name: '湖南',
value: 1
}], [{
name: '貴州',
value: 1
}], [{
name: '廣東',
value: 1
}], [{
name: '廣西',
value: 1
}], [{
name: '云南',
value: 1
}], [{
name: '海南',
value: 1
}], [{
name: '上海',
value: 1
}], [{
name: '臺(tái)灣',
value: 1
}], [{
name: '澳門',
value: 1
}], [{
name: '香港',
value: 1
}]
]
let convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
var toCoord = [117.1582, 36.8701];
if (fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
let seriesA = []
seriesA.push(
{
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 4, //箭頭指向速度，值越小速度越快
trailLength: 0.3, //特效尾跡長(zhǎng)度[0,1]值越大，尾跡越長(zhǎng)重
symbol: 'pin', //箭頭圖標(biāo)
symbolSize: 8, //圖標(biāo)大小
color: '#2a6fd9'
},
lineStyle: {
normal: {
color: '#003262',
width: 1,//尾跡線條寬度
opacity: .9, //尾跡線條透明度
curveness: .3 //尾跡線條曲直度
}
},
data: convertData(chinaDatas)
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { // 漣漪特效
period: 2, // 動(dòng)畫時(shí)間，值越小速度越快
brushType: 'fill', // 波紋繪制方式 stroke, fill
scale: 6, // 波紋圓環(huán)最大限制，值越大波紋越大
color: '#003262' // 漣漪的顏色，默認(rèn)為散點(diǎn)的顏色。
},
label: {
normal: {
show: true,
color: '#283c64',
position: 'top', // 顯示位置
offset: [0, 0], // 偏移設(shè)置
formatter: function (params) { // 圓環(huán)顯示文字
return params.data.name
},
fontSize: 13
},
emphasis: {
show: false
}
},
symbol: 'circle',
symbolSize: function (val) {
return 1 + val[2] * 5 // 圓環(huán)大小
},
itemStyle: {
color: "#2a6fd9",
shadowBlur: 4,
shadowColor: "#2a6fd9",
},
data: chinaDatas.map(function (dataItem) {
return {
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name],
itemStyle: {
color: "#2a6fd9",
shadowBlur: 4,
shadowColor: "#2a6fd9",
}
}
})
},
//被攻擊點(diǎn)
{
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: false,
position: 'right',
color: 'red',
formatter: '',
textStyle: {
color: "red"
}
},
emphasis: {
show: true,
color: "red"
}
},
symbol: 'pin',
symbolSize: 0,
data: [{
name: '山東',
value: chinaGeoCoordMap['山東'].concat([10]),
}],
}
);
let option = {
tooltip: {
show: true,
trigger: 'item',
backgroundColor: '#2e65fd',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: function (params, ticket, callback) {
console.log(params)
// 根據(jù)業(yè)務(wù)自己拓展要顯示的內(nèi)容
var res = ''
var name = params.name
var value1 = params.value[params.seriesIndex + 3] || 0
var value2 = params.value[params.seriesIndex + 4] || 0
var value3 = params.value[params.seriesIndex + 5] || 0
var value4 = params.value[params.seriesIndex + 6] || 0
var value5 = params.value[params.seriesIndex + 7] || 0
var value6 = params.value[params.seriesIndex + 8] || 0
var value7 = params.value[params.seriesIndex + 9] || 0
res = "<span style='color:#fff'>" + name + '</span>' +
'<br/>' +
'<i class="icon icon-xuesheng"></i> 學(xué)生：' + value1+
'<br/>' +
'<i class="icon icon-laoshi_huaban"></i> 老師：'+value2+
'<br/>' +
'<i class="icon icon-baoanxiehui"></i> 青企協(xié)：'+value3+
'<br/>' +
'<i class="icon icon-rencaizhengce"></i> 青年企業(yè)家：'+value4+
'<br/>' +
'<i class="icon icon-investmentinstitutions"></i> 十強(qiáng)產(chǎn)業(yè)：'+value5+
'<br/>' +
'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰會(huì)嘉賓：'+value6+
'<br/>' +
'<i class="icon icon-rencai"></i> 高端人才：'+value7
return res
}
},
regions: [
//隱藏南海
{
name: "南海諸島",
itemStyle: {
normal: {
borderColor: "red",
borderWidth: 20, //設(shè)置外層邊框
opacity: 0, // 為 0 時(shí)不繪制該圖形
},
},
label: {
show: false, // 隱藏文字
},
},
],
backgroundColor: "rgba(0, 0, 0, 0.1)",
geo: {
map: 'china',
zoom: 1.2,
label: {
normal: {
color: '#1e2d4c'
},
emphasis: {
show: false
}
},
roam: false, // 是否允許縮放
itemStyle: {
normal: {
//地圖便框設(shè)置
borderColor: "#003262",
borderWidth: 11, //設(shè)置外層邊框
},
emphasis: {
areaColor: "#003262",
shadowColor: "#003262",
},
},
itemStyle: {
normal: {
color: '', // 地圖背景色
borderColor: '#5ea8ff', // 省市邊界線00fcff 516a89
borderWidth: 1
},
emphasis: {
color: '#81acff' // 懸浮背景
}
}
},
series: seriesA
}
}
</script>
初始化echarts就可以了
this.myEchart = echarts.init(this.$refs.myEchart); this.myEchart.setOption(option);
到此這篇關(guān)于vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果的文章就介紹到這了,更多相關(guān)vue+echarts中國(guó)地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue echarts 實(shí)現(xiàn)離線中國(guó)地圖的示例代碼(細(xì)化到省份)
- 使用Vue3和Echarts?5繪制帶有立體感流線中國(guó)地圖(推薦收藏!)
- vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
- vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國(guó)地圖省市縣下鉆功能
- vue+vuex+axios+echarts畫一個(gè)動(dòng)態(tài)更新的中國(guó)地圖的方法
- vue使用echarts實(shí)現(xiàn)中國(guó)地圖和點(diǎn)擊省份進(jìn)行查看功能
相關(guān)文章
vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式
這篇文章主要介紹了vue3項(xiàng)目+element-plus:時(shí)間選擇器格式化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表）
這篇文章主要介紹了詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何將v-for中的表格導(dǎo)出來,需要的朋友可以參考下2018-05-05
vue-router中的鉤子函數(shù)和執(zhí)行順序說明
這篇文章主要介紹了vue-router中的鉤子函數(shù)和執(zhí)行順序說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)6位數(shù)密碼，優(yōu)化iOS WebView卡頓，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解
這篇文章主要介紹了適合前端Vue開發(fā)童鞋的跨平臺(tái)Weex的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解
這篇文章主要介紹了Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小實(shí)例代碼
等比例縮放可以在不同的分辨率下都能夠一屏展示,不會(huì)有滾動(dòng)條的問題,也不會(huì)有適配問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目網(wǎng)頁自適應(yīng)等比例放大縮小的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08