1.下載 echarts 和echarts-gl echarts-gl是3d插件
2.去阿里云上下載吉林省的地圖信息（看實際需求下載各省地圖數據）
· https://datav.aliyun.com/portal/school/atlas/area_selector
3.組件代碼如下
<template><div class="map-info"><!-- :style="styleProp" --><div id="mapTu" class="map-tu" /></div>
</template><script>
import jilinProvince from '@/assets/get/jilinProvince.json'
import 'echarts-gl'export default {name: 'MapInfo',components: {},props: {overViewPage: { // 總覽頁面type: String,default: 'potentialUserMining' // 默認是潛力用戶挖掘頁面},mapUrl: { // 地圖中點擊跳轉的路徑，默認跳轉綜合能源頁面type: String,default: '/comprehensiveEnergyEfficiency'},type: { // 能源類型,地圖上方tab欄對應的標識type: String,default: '01'},mapData: {type: Array,default() {return []}},// 地圖的高度styleProp: {type: Object,default() {return {height: '100%'}}},// 地圖盒子寬度boxWidth: {type: Number,default: 150}},data() {return {bg: require('@/assets/img/map2.png'),minHeight: 3,transData: {} // 點擊事件傳值}},computed: {},watch: {mapData: {deep: true,handler(val) {this.$nextTick(() => {// console.log('..mapData....mapData0...', val)this.mapData = valthis.minHeight = Math.min.apply(Math, this.mapData.map(function(o) { return o.value })) * 2if (val) {this.drawChinaMap(val)}})}}},mounted() {this.drawChinaMap(this.mapData)},methods: {commonRouter(dataTrans) {if (this.type === '01') {this.$router.push({ path: '/comprehensiveEnergyEfficiency', query: { dataTrans }})} else if (this.type === '02') {this.$router.push({ path: '/energyTrading', query: { dataTrans }})} else if (this.type === '03') {this.$router.push({ path: '/cleanEnergy', query: { dataTrans }})} else if (this.type === '04') {this.$router.push({ path: '/emergingEnergyConsumption', query: { dataTrans }})} else if (this.type === '05') {this.$router.push({ path: '/smartBuilding', query: { dataTrans }})} else if (this.type === '06') {this.$router.push({ path: '/multiEnergySupply', query: { dataTrans }})}window.sessionStorage.setItem('type', this.type)},drawChinaMap(mapData) {const nameGeoCoordMap = { // 數據默認中心點，可調整，然后柱子會變動長春市: [125.7245, 44.126841],吉林市: [126.55302, 43.943577],四平市: [123.970785, 43.540344],遼源市: [125.485349, 42.702692],通化市: [125.836501, 42.221177],白山市: [127.327839, 41.942505],松原市: [124.823608, 44.818243],白城市: [123.241114, 45.219026],延邊市: [129.513228, 43.104823]}const convertData = (data) => { // 柱子的數據，是個數組，多個對象都以name,value狀態展示const res = []for (var i = 0; i < data.length; i++) {const geoCoord = nameGeoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res}const convertData_ = convertData(mapData)this.$echarts.registerMap('吉林', jilinProvince)const option = {tooltip: {show: false},geo3D: {name: '吉林',// selectedMode: 'single', // 地圖高亮單選boxDepth: 68, // 地圖傾斜度regionHeight: 5, // 地圖高度map: '吉林',boxWidth: this.boxWidth,boxHeight: 2, // 4:沒有bar. 30:有bar,bar最高度30，按比例分配高度viewControl: {rotateSensitivity: 0, // 禁止旋轉zoomSensitivity: 0, // 禁止縮放pansensitivity: 0},top: '0%',right: '0%', // 整個地圖的偏移量left: '-10%',bottom: '-20%',// environment: 'transparent', // 最外層背景shading: 'realistic', // 真實渲染引擎 有光照效果// 材質貼圖 配置realisticMaterial: {detailTexture: this.bg// detailTexture: 'assets/img/map2.png'// metalness: 1,// roughness: 1},itemStyle: {// backgroundImage: "url('../../../../assets/img/map2.png')",color: 'rgb(16,116,149)', // 地圖顏色// color: '#035086', // 深色// color: 'transparent',borderWidth: 1.5, // 分界線wdithborderColor: '#4F8AC9'},label: {show: true,distance: 30,position: 'left',textStyle: {fontSize: 13,color: '#fff',backgroundColor: 'transparent'}},postEffect: {enable: true,bloom: {enable: false},SSAO: {radius: 1,intensity: 1,enable: true},depthOfField: {enable: false,focalRange: 10,blurRadius: 10,fstop: 1}},temporalSuperSampling: {enable: true},emphasis: { // 鼠標移入label: {show: true, // 是否顯示高亮// distance: 0,textStyle: {color: '#fff', // 高亮文字顏色distance: 0,fontSize: 13},formatter: (params) => {if (mapData.length > 0) {mapData.map(item => {if (item.name === params.name) {this.transData.orgNo = item.orgNothis.transData.name = item.namethis.transData.value = item.value}})}const name = params.namereturn `${name}`}},itemStyle: {color: '#2B91B7', // 地圖高亮顏色padding: 8}}// 單獨設置某些處顏色// regions: this.regionsData},series: [{name: 'bar3D',type: 'bar3D',coordinateSystem: 'geo3D',barSize: 3, // 柱子粗細shading: 'lambert',opacity: 1,bevelSize: 0.7, // 方形柱向圓柱轉化minHeight: this.minHeight,itemStyle: {color: 'rgba(202, 227, 72, 0.8)'},label: {show: true,formatter: (params) => { // 對應的數值return params.data.value[2]},distance: 0, // 標簽距離圖形的距離textStyle: {fontSize: 16,backgroundColor: 'transparent',color: '#00E4FF'// color: 'red'}},data: convertData_}]}const myChart = this.$echarts.init(document.getElementById('mapTu'))myChart.setOption(option)myChart.on('georoam', (e) => {console.log(e)})myChart.getZr().on('click', (e) => {console.log('地圖點擊事件-能源類型-111---', typeof this.type)// this.commonRouter(this.transData)if (this.overViewPage !== '') {this.$router.push({ path: this.mapUrl, query: { dataTrans: this.transData }})this.$store.commit('mapInfo/SET_TYPE', this.type) // 將type數據存至vuex中,模塊化開發方法前要寫上模塊名mapInfo/SET_TYPE}})// 地圖有區域值的點擊事件myChart.on('click', (e) => {if (this.overViewPage !== '') {this.$router.push({ path: this.mapUrl, query: { dataTrans: this.transData }})this.$store.commit('mapInfo/SET_TYPE', this.type) // 將type數據存至vuex中}})}}}
</script><style lang='less' scoped>
.map-info{width: 100%;height: 100%;color: #fff !important;.map-tu{width:100%;height: 100%;}
}
</style>
4.組件使用如下
<mapInfo :box-width="100" over-view-page="potentialUserMining" :map-url="mapUrl" :map-data="dataMap" :type="energyType" />
// dataMap: [ // 地圖數據模擬數據// {// name: '長春市',// value: 0// },// {// name: '吉林市',// value: 10// },// { name: '通化市',// value: 0 },// { name: '白山市',// value: 0 },// { name: '白城市',// value: 0 },// {// name: '松原市',// value: 0// },// { name: '四平市',// value: 0 },// { name: '遼源市',// value: 0 },// { name: '延邊市',// value: 0 }]
5，效果圖如下
總結
以上是生活随笔為你收集整理的vue中echarts3d 使用（3d地图上有柱状图数据，吉林省）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
