echars 3D地圖為區域自定義顏色的解決方法
問題
根據項目需求,我們要將下面省級地圖中的個別市進行高亮(不同顏色)展示
延伸
首先跟大傢介紹這個地圖的展示方式:
- 采用的是Vue框架中運用echarts
- 地圖采用的是geo3D和scatter3D
當然他的實現很簡單
首先我們要初始化echarts
let echartsMap = this.$echarts.init(this.$refs.echartsMap);
註冊地圖
this.$echarts.registerMap('河南', dataGeoLocation); //後面的dataGeoLocation是我們下載下載的地圖json文件然後引入到當前 //組件中進行使用的,前面的河南則是我們要註冊的地圖
設置option對象
這裡面的配置是根據自己的項目需求而來的 自己可以看文檔都有詳細的介紹
this.echartsDataMap = { visualMap: { min: 0, max: 500, show: false, inRange: { color: ['#eac736', '#6EAFE3'].reverse() }, }, globeRadius: 100, globeOuterRadius: 100, geo3D: { map: mapName, viewControl: { center: [0, 0, 0], alpha: 100,//上下旋轉角度 beta: 10,//左右旋轉角度 animation: true,//是否動畫顯示 animationDurationUpdate: 1000,//動畫時間 distance: 130,//視角到主題距離 minBeta: -9999,//最小(左)旋轉度數 maxBeta: 9999,//最多(右)旋轉角度 autoRotate: false, autoRotateDirection: 'cw', autoRotateSpeed: 10, }, splitArea:{ areaStyle:{ color:'red', } }, light: { main: { intensity: 1.2, // color: 'transparent', color: '#0D3867', shadowQuality: 'ultra', shadow: true, alpha: 150, beta: 200 }, ambient: { intensity: 1,//環境光強度 }, ambientCubemap: { diffuseIntensity: 1, texture: '' } }, groundPlane: { show: false }, postEffect: { enable: false }, itemStyle: { color: '#175096', borderColor: 'rgb(62,215,213)', opacity: 0.8,//透明度 borderWidth: 1 }, label: { show: false }, emphasis: { label: { show: false }, itemStyle: { } }, silent: false, // 不響應和觸發鼠標事件 }, series: [ { type: 'scatter3D', coordinateSystem: 'geo3D', data: this.areaName symbol: 'circle', symbolSize: 0, silent: false, // 不響應和觸發鼠標事件 itemStyle: { borderColor: '#fff', borderWidth: 1 }, label: { distance: 30, show: true, formatter: '{b}', position: 'bottom', bottom: '100', textStyle: { color: '#fff', marginTop: 40, fontSize: 16, // fontWeight:'bold', backgroundColor: 'transparent', } } }, { type: 'scatter3D', coordinateSystem: 'geo3D', data: pinArr, color: '#6EAFE3', symbol: 'pin', symbolSize: 56, symbolOffset: ['100%','50%','0'], silent: false, // 不響應和觸發鼠標事件 itemStyle: { textAlign: 'center', borderColor: '#6EAFE3', backgroundColor: '#6EAFE3', borderWidth: 0 }, zlevel: -10, label: { show: true, distance: -45, // left:-10, position: 'bottom', formatter: (data) => { return data.value[3] + ' '; }, textStyle: { color: '#333', backgroundColor: 'transparent' } } }, ] };
將option實例到我們的echarts上
echartsMap.setOption(this.echartsDataMap);
解決問題
回頭我們來看文章開頭的問題,在百度上找到瞭很多方式,經過嘗試好像沒有什麼效果,其實能夠解決我也是根據網上提供的辦法進行改進後就實現瞭
這是我在眾多方式中找到的比較靠譜的一種方式,這裡他說的是再geo中去添加regions即可,其實是這樣的 但是我添加後沒有效果,原因就是我的是geo3D而他的是geo,但是問題不大,經過我在三的嘗試最終發現原來他們兩個中僅僅是寫法不一樣
regions: [ { name: '鄭州市', / itemStyle: { color: 'green' } },{ name: '南陽市', itemStyle: { color: 'green' } },{ name: '商丘市', itemStyle: { color: 'green' } }]
我們隻需要更正一下color的設置形式然後添加到我們的geo3D中就可以瞭
總結
到此這篇關於echars 3D地圖為區域自定義顏色的文章就介紹到這瞭,更多相關echars 3D地圖自定義顏色內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue ECharts實現機艙座位選擇展示功能代碼詳解
- vue+echarts實現中國地圖流動效果(步驟詳解)
- vue echarts實現航班選座案例分析
- echarts如何實現帶百分比的橫向柱狀圖
- vue2 利用echarts 單獨繪制省份的步驟