Vue ecahrts 湖南地图渲染以及下钻地图展示

地图渲染以及下钻地图展示"/>

Vue ecahrts 湖南地图渲染以及下钻地图展示

1.环境准备

npm install echarts --save在main.js 引入
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

2.准备需要使用到的数据

DataV.GeoAtlas地理小工具系列 

 选择出湖南地图 看到右侧卡片其他类型 点击下载

 tip：如果只需要展示湖南省地图，下载湖南省地图就行如果需要有下钻地图的操作

需要下载每个地级市的json文件

 all_hunan.json 文件在网上比较难找我直接复制在下面。

[{"adcode": "430100","name": "长沙市"}, {"adcode": "430200","name": "株洲市"
}, {"adcode": "430300","name": "湘潭市"
}, {"adcode": "430400","name": "衡阳市"
}, {"adcode": "430500","name": "邵阳市"
}, {"adcode": "430600","name": "岳阳市"
}, {"adcode": "430700","name": "常德市"
}, {"adcode": "430800","name": "张家界市"
}, {"adcode": "430900","name": "益阳市"
}, {"adcode": "431000","name": "郴州市"
}, {"adcode": "431100","name": "永州市"
}, {"adcode": "431200","name": "怀化市"
}, {"adcode": "431300","name": "娄底市"
}, {"adcode": "433100","name": "湘西土家族苗族自治州"
}]

之后就是下载每个地级市的json，在下载完所有地级市数据后将 文件重命名，主要是方便做下钻。

3.显示湖南地图

<template><div className="center-cmp" id="centermap"><div className="map" ref="mapChart" style="width:100%;height:100%;"></div></div>
</template>

  methods: {initMapChart() {const el = this.$refs.mapChartconst echarts = require('echarts')const myChart = echarts.init(el)let geoJson = require('@/assets/hunan/430000_full.json')echarts.registerMap('geo', geoJson)const option = {// 这里渲染地图geo: {map: 'geo', // 上面引入的数据名show: true,roam: false, // 关闭拖拽label: {show: true,color: '#38eaff',},itemStyle: {areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)borderColor: '#38eaff', // 地图区域的边框borderWidth: 1},emphasis: { // 高亮的显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}},select: { // 选中显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}}},}myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}},mounted() {this.initMapChart()}

4.显示下钻地级市地图

  methods: {initChart: function () {const echarts = require('echarts')const el = this.$refs.mapChartconst chart = echarts.init(el)let alladcode = require('@/assets/hunan/all_hunan.json')let chinaGeoJson = require('@/assets/hunan/430000_full.json')this.initMapChart(chinaGeoJson, '湖南省', chart, alladcode)},//获取地图json数据getGeoJson(jsonName) {return require('@/assets/hunan/' + jsonName)},initMapChart(geoJson, name, chart, alladcode) {const el = this.$refs.mapChartconst echarts = require('echarts')const myChart = echarts.init(el)echarts.registerMap('geo', geoJson)const option = {// 数据映射visualMap: {show: true,type: 'piecewise', // 分段标签min: 0, // 最小值max: 50, // 最大值，不设置为无限大right: 30, // 距离右侧位置bottom: 30, // 距离底部位置orient: 'vertical', // 组件竖直放置align: 'left', // 色块在左textGap: 14, // 文字主体之间的距离itemSymbol: 'circle', // 右下角映射组件使用圆点形状seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。// 一以下是分段式视觉映射组件的每一段的范围// gt：大于、gte：大于等于、lt：小于、lte：小于等于。textStyle: {color: '#dc2222'//文字颜色},pieces: [{gt: 5,label: '5个以上',color: '#1492FF',//图元颜色},{gte: 2,lte: 5,label: '2-5个',color: '#59AAF5'},{gte: 0,lt: 2,label: '0-2个',color: '#99CBF9'}]/*pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。*/},geo: {map: 'geo', // 上面引入的数据名show: true,roam: false, // 关闭拖拽label: {show: true,color: '#38eaff',fillOpacity: 0.3,},itemStyle: {areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)borderColor: '#38eaff', // 地图区域的边框borderWidth: 1},emphasis: { // 高亮的显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}},select: { // 选中显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}}},series: [// 配置数据的显示{type: 'map', // 类型mapgeoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。data: []},// 以下配置了图中白色标记圆点的显示{type: 'scatter', // 类型：散点coordinateSystem: 'geo', // 使用地理坐标系itemStyle: {color: {type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0.5,color: '#fff' // 50% 处的颜色},{offset: 1,color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色}],global: false // 缺省为 false},borderColor: '#fff', // 边框白色borderWidth: 1 // 边框宽度},symbolSize: 10, // 散点大小data: [],zlevel: 1}]}myChart.setOption(option)myChart.getZr().on('click', params => {if (params.target) {//画布非空白区return;} else {//画布空白区 返回上一级let alladcode = require('@/assets/hunan/all_hunan.json')let regionGeoJson = this.getGeoJson(430000 + '_full.json');this.initMapChart(regionGeoJson, '湖南省', myChart, alladcode)}});// 解绑click事件myChart.off("click");//给地图添加监听事件myChart.on('click', params => {if (alladcode) {let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);let clickRegionCode;if (clickRegion) {clickRegionCode = clickRegion[0].adcode;} else {clickRegionCode = 430000;}let regionGeoJson = this.getGeoJson(clickRegionCode + '_full.json');this.$emit('setName', params.name)this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)}})window.addEventListener('resize', function () {myChart.resize()})}},mounted() {this.initChart()}

 完整代码如下

<template><div className="center-cmp" id="centermap"><div className="map" ref="mapChart" style="width:100% /* 800/192 */;height:100% /* 498/192 */;"></div></div>
</template><script>
export default {name: 'CenterCmp',components: {},data() {return {}},methods: {initChart: function () {const echarts = require('echarts')const el = this.$refs.mapChartconst chart = echarts.init(el)let alladcode = require('@/assets/hunan/all_hunan.json')let chinaGeoJson = require('@/assets/hunan/430000_full.json')this.initMapChart(chinaGeoJson, '湖南省', chart, alladcode)},//获取地图json数据getGeoJson(jsonName) {return require('@/assets/hunan/' + jsonName)},initMapChart(geoJson, name, chart, alladcode) {const el = this.$refs.mapChartconst echarts = require('echarts')const myChart = echarts.init(el)echarts.registerMap('geo', geoJson)const option = {// 数据映射visualMap: {show: true,type: 'piecewise', // 分段标签min: 0, // 最小值max: 50, // 最大值，不设置为无限大right: 30, // 距离右侧位置bottom: 30, // 距离底部位置orient: 'vertical', // 组件竖直放置align: 'left', // 色块在左textGap: 14, // 文字主体之间的距离itemSymbol: 'circle', // 右下角映射组件使用圆点形状seriesIndex: 0, // 指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。// 一以下是分段式视觉映射组件的每一段的范围// gt：大于、gte：大于等于、lt：小于、lte：小于等于。textStyle: {color: '#dc2222'//文字颜色},pieces: [{gt: 5,label: '5个以上',color: '#1492FF',//图元颜色},{gte: 2,lte: 5,label: '2-5个',color: '#59AAF5'},{gte: 0,lt: 2,label: '0-2个',color: '#99CBF9'}]/*pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。*/},geo: {map: 'geo', // 上面引入的数据名show: true,roam: false, // 关闭拖拽label: {show: true,color: '#38eaff',fillOpacity: 0.3,},itemStyle: {areaColor: 'rgba(15,84,116,0.07)', // 地图区域的颜色(没有数据时会按照这个颜色显示)borderColor: '#38eaff', // 地图区域的边框borderWidth: 1},emphasis: { // 高亮的显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}},select: { // 选中显示设置label: {color: '#feffff',},itemStyle: {areaColor: 'rgba(15,140,217,0.67)',}}},series: [// 配置数据的显示{type: 'map', // 类型mapgeoIndex: 0, // 指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。data: []},// 以下配置了图中白色标记圆点的显示{type: 'scatter', // 类型：散点coordinateSystem: 'geo', // 使用地理坐标系itemStyle: {color: {type: 'radial', // 径向渐变，前三个参数分别是圆心 x, y 和半径x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0.5,color: '#fff' // 50% 处的颜色},{offset: 1,color: 'rgb(0 0 0 / 0%)' // 100% 处的颜色}],global: false // 缺省为 false},borderColor: '#fff', // 边框白色borderWidth: 1 // 边框宽度},symbolSize: 10, // 散点大小data: [],zlevel: 1}]}myChart.setOption(option)myChart.getZr().on('click', params => {if (params.target) {//画布非空白区return;} else {//画布空白区 返回上一级let alladcode = require('@/assets/hunan/all_hunan.json')let regionGeoJson = this.getGeoJson(430000 + '_full.json');this.initMapChart(regionGeoJson, '湖南省', myChart, alladcode)}});// 解绑click事件myChart.off("click");//给地图添加监听事件myChart.on('click', params => {if (alladcode) {let clickRegion = alladcode.filter(areaJson => areaJson.name === params.name);let clickRegionCode;if (clickRegion) {clickRegionCode = clickRegion[0].adcode;} else {clickRegionCode = 430000;}let regionGeoJson = this.getGeoJson(clickRegionCode + '_full.json');this.$emit('setName', params.name)this.initMapChart(regionGeoJson, params.name, myChart, clickRegion[0].city)}})window.addEventListener('resize', function () {myChart.resize()})}},mounted() {this.initChart()}
}
</script><style lang='less'>
#centermap{width: 100%;height: 85vh;//background: #8f7a7a;background: url('@/assets/bg.png');
}
.center-cmp {margin: 0px;padding: 0px;display: flex;flex-direction: column;-header {height: .364583rem /* 70/192 */;display: flex;justify-content: space-between;align-items: center;font-size: .15625rem /* 30/192 */;}-details {height: .625rem /* 120/192 */;display: flex;justify-content: center;font-size: .166667rem /* 32/192 */;align-items: center;.card {background-color: rgba(4, 49, 128, .6);color: #08e5ff;height: .364583rem /* 70/192 */;width: .364583rem /* 70/192 */;font-size: .234375rem /* 45/192 */;font-weight: bold;line-height: .364583rem /* 70/192 */;text-align: center;margin: .052083rem /* 10/192 */;}}-main-container {position: relative;flex: 1;display: flex;mc-middle {width: 50%;height: 90%;.active-ring-name {font-size: .104167rem /* 20/192 */ !important;}}mc-left, mc-right {width: 25%;display: flex;flex-direction: column;justify-content: center;font-size: .125rem /* 24/192 */;span {font-size: .208333rem /* 40/192 */;font-weight: bold;}.station-info {height: 80px;display: flex;align-items: center;}}mc-left {align-items: flex-end;span {margin-left: .104167rem /* 20/192 */;}}mc-right {align-items: flex-start;span {margin-right: .104167rem /* 20/192 */;}}}.label-tag {position: absolute;width: 2.604167rem /* 500/192 */;height: .15625rem /* 30/192 */;bottom: .052083rem /* 10/192 */;left: 50%;transform: translateX(-50%);}
}
</style>