首先上圖：

引入china.json文件:?https://download.csdn.net/download/liming1016/12487994

首先要通過npm安裝echart，.vue文件同目錄引入china.json

<template><div class="app-container"><div class="chart-wrapper"><div id="chinaMap" style="width: 100%;height: 500px"></div></div></div> </template> <script>import 'echarts/map/js/china.js'import echarts from 'echarts'import chinaJson from './china.json' // 這個是json引用export default {name: '',data () {return {chinaMapData: [{name: '東北', value: this.randomValue()},{name: '華北', value: this.randomValue()},{name: '西北', value: this.randomValue()},{name: '西南', value: this.randomValue()},{name: '華中', value: this.randomValue()},{name: '華南', value: this.randomValue()},{name: '華東', value: this.randomValue()}],chinaDaquGeo: {}}},methods:{progressFormat(percentage){return ""},randomValue() {return Math.round(Math.random()*1000);},drawChinaMap(id){this.mapCharts = echarts.init(document.getElementById(id));var option = {tooltip: {formatter:function(params,ticket, callback){return params.seriesName+'<br />'+params.name+'：'+params.value}//數(shù)據(jù)格式化},visualMap: {min: 0,max: 1500,left: 'left',top: 'bottom',type:"piecewise",//text: ['高','低'],//取值范圍的文字inRange: {color: ['#e0ffff', '#006edd']//取值范圍的顏色},show:true//圖注},geo: {map: 'china',roam: true,//不開啟縮放和平移zoom: 1,//視角縮放比例center: [108.5525, 34.3227],label: {normal: {show: true,fontSize:'10',color: 'rgba(0,0,0,0.7)'}},itemStyle: {normal:{borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis:{areaColor: '#F3B329',//鼠標選擇區(qū)域顏色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series : [{name: '事業(yè)部',type: 'map',geoIndex: 0,data:this.chinaMapData}]};this.mapCharts.setOption(option);/*this.mapCharts.on('click', function (params) {alert(params.name);});*/},//劃分大區(qū)mergeProvinces(chinaJson, names, properties) {//合并大區(qū)里省份的coordinatesvar features = chinaJson.features;var polygons = [];for (var i = 0; i < names.length; i++) {var polygonsCoordinates = [];for (var z = 0; z < names[i].length; z++) {for (var j = 0; j < features.length; j++) {if (features[j].properties.name == names[i][z]) {if (features[j].geometry.coordinates[0].constructor == String) {//合并coordinatesfor (var l = 0; l < features[j].geometry.coordinates.length; l++) {polygonsCoordinates.push(features[j].geometry.coordinates[l]);}} else if (features[j].geometry.coordinates[0].constructor == Array) {for (var k = 0; k < features[j].geometry.coordinates.length; k++) {for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);}}}break;}}}polygons.push(polygonsCoordinates);}// 構(gòu)建新的合并區(qū)域var features = [];for(var a = 0;a<names.length;a++){var feature = {id: features.length.toString(),type: "FeatureCollection",geometry: {type: "Polygon",coordinates: polygons[a]},properties: {name: properties.name[a] || "",childNum:polygons[a].length}};if(properties.cp[a]) {feature.properties.cp = properties.cp[a];}// 將新的合并區(qū)域添加到地圖中features.push(feature);}this.chinaDaquGeo.type = "FeatureCollection";this.chinaDaquGeo.features = features;},repRegionStrategy(){var params = {names: [//把各個大區(qū)的省份用二維數(shù)組分開['北京','天津','河北','山西','內(nèi)蒙古'],["黑龍江","吉林","遼寧"],['山東','江蘇','安徽','江西','浙江','福建','上海','臺灣'],['河南','湖北','湖南'],['廣東','廣西','海南','香港','澳門'],['重慶','四川','云南','西藏','貴州'],['陜西','甘肅','青海','寧夏','新疆']],properties: {//自定義大區(qū)的名字，要和上面的大區(qū)省份一一對應name: ['華北','東北','華東','華中','華南','西南','西北'],cp: [//經(jīng)緯度可以自己隨意定義[116.24,39.54],[126.32,43.50],[121.28,31.13],[114.20,30.32],[113.15,23.08],[104.04,30.39],[103.49,36.03]]}};this.mergeProvinces(chinaJson, params.names, params.properties);}},//調(diào)用created() {this.repRegionStrategy()// 注冊地圖this.echarts.registerMap('china', this.chinaDaquGeo) // 如果是js引入就不需要這一行了},mounted(){this.$nextTick(function() {this.drawChinaMap('chinaMap')})}} </script> <style></style>

?

總結(jié)

以上是生活随笔為你收集整理的vue echart地图划分大区的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。