@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 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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！