效果图
实现代码
<template><div class="app"><h1>普通地图----------------</h1><div class="map-container" ref="map_ref"></div><h1>3D地图----------------</h1><div class="map-container" ref="map_ref_2"></div></div>
</template><script>
import * as echarts from 'echarts'
import 'echarts-gl'
// 1. 引入china国家的json数据
// import * as geojson from 'world-geojson'
// const china_json = geojson.forCountry('china')
import china_json from './config/china.json'
echarts.registerMap('china', china_json)export default {data() {return {chart_instance: null,chart_instance_2: null,}},mounted() {this.initMap()this.initMap2()},methods: {initMap() {const chart_instance = echarts.init(this.$refs.map_ref)var option = {series: [{type: 'map',map: 'china',label: {show: true,color: '#000', //地图初始化区域字体颜色fontSize: 10,formatter: function (params) {if (params.name == '黑龙江省') return params.namereturn ''},},itemStyle: {// 未选择区域的样式normal: {areaColor: '#eeeeee',color: 'white',borderColor: 'gray',borderWidth: 1,},emphasis: {// 选择区域的样式areaColor: '#ffdf33',},},data: [{name: '广东省', //这个对应的是json的数据selected: true, // 将该区域设置为默认高亮},],},],}chart_instance.setOption(option)this.chart_instance = chart_instance},initMap2() {const chart_instance = echarts.init(this.$refs.map_ref_2)var option = {geo3D: {map: 'china', //注册地图的名字roam: true, //开启鼠标缩放和平移漫游。默认不开启itemStyle: {color: '#eee', // 背景opacity: 1, //透明度borderWidth: 1, // 边框宽度borderColor: 'gray', // 边框颜色fontSize: 10, //},emphasis: {itemStyle: {color: '#ffdf33',},},label: {show: true,},viewControl: {distance: 100,alpha: 45, // 上下旋转的角度beta: 0, // 左右旋转的角度},regions: [{name: '广东省',itemStyle: {color: '#f00',},},],},}chart_instance.setOption(option)this.chart_instance_2 = chart_instance},},
}
</script><style lang="less" scoped>
.map-container {height: 600px;border: 1px solid;
}
</style>
参考文档
- https://juejin.cn/post/7311959845539872768
- https://echarts.apache.org/zh/option-gl.html#geo3D.itemStyle.color
- https://www.makeapie.cn/echarts_content/xSyxuDklzHl.html
