echart--vue中使用3d地圖、柱狀圖

平時項目中對數據的解析用圖表比較多，這次應項目要求，要做一個3d的地圖+3d柱狀圖。

在echart官網逛了一段時間的社區，發現還是有很多諸如此類的例子，同時也參考了網上一些博友的經驗，下面我們來對需求的實現做個簡單的描述

安裝echart插件：

npm i echarts --save

安裝echart拓展插件：

npm i echarts-gl --save

main.js引入插件，具體全局引入和部分引入，在以前的文章中寫到過，可供參考

// 引入echarts
import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts 

vue文件中

<div id="map" class="map-chart"></div>

initCharts(barData) {
    let myChart = this.$echarts.init(document.getElementById('map'))
    let _this= this
    _this.$echarts.registerMap('shanghai', shanghaiMap);

    let geoCoordMap = {
           "黃浦區": [121.490317,31.212771],
           "徐匯區": [121.43752,31.179973],
           "長寧區": [121.4022,31.198123],
           "靜安區": [121.448224,31.269003],
           "普陀區": [121.392499, 31.241701],
           "虹口區": [121.392499,31.241701],
           "楊浦區": [121.522797, 31.270755],
           "閔行區": [121.475972,31.071658],
           "寶山區": [121.489934, 31.398896],
           "嘉定區": [121.250333, 31.383524],
           "浦東新區": [121.727710, 31.106950],
           "金山區": [121.330736, 30.724697],
           "松江區": [121.223543, 31.03047],
           "青浦區": [121.112021, 31.151209],
           "奉賢區": [121.546472, 30.912345],
           "崇明區": [121.458472, 30.912345], //這個json數據中沒有找到
           "測試": [180, 30], //這個是為了處理初始化柱狀圖第一條數據不顯示的bug
       };

       var convertData = function(data) {
           var res = [];
           for (var i = 0; i < data.length; i++) {
               var geoCoord = geoCoordMap[data[i].name];
               if (geoCoord) {
                   res.push({
                       name: data[i].name,
                       value: geoCoord.concat(data[i].value)
                   });
               }
           }
           console.log(res)
           return res;
       };

       let option = {
            title: {
                x: 'left',
                top: "10",
                textStyle: {
                    color: '#000',
                    fontSize: 14
                }
            },
            grid: {
                left: 10,
                right: 0,
                bottom: 20,
                top: 0
            },
            tooltip: {
                show: true,
                // backgroundColor: '#005cff',
                formatter:(params)=>{
                    let data = "區局: "+ params.name + "<br/>"+"訂單受理時長: "+ params.value[2] + '分'+ params.value[2] + '秒';

                    // +"<br/>"+"地理坐標:[" + params.value[0]+","+params.value[1] +"]";
                    return data;
                },
        },
        visualMap: [{
            type: 'continuous',
            seriesIndex: 0,
            text: ['時長'],
            calculable: true,
            max: 20,
            inRange: {
                color: ['#87aa66', '#eba438', '#d94d4c']
            }
        }],
        geo3D: {
            map: 'shanghai',
            roam: true,
            aspectScale: 0.75, //長寬比
            boxHeight: 20,
            viewControl: {
                distance: 170,
                center: [0, 0, 5]
            },
            itemStyle: {
               color: '#1d5e98',
               opacity: 1,
               borderWidth: 0.4,
               borderColor: '#000'
            },
            label: {
               show: true,
               textStyle: {
                     color: '#fff', //地圖初始化區域字體顏色
                     fontSize: 8,
                     opacity: 1,
                     backgroundColor: 'rgba(0,23,11,0)'
                 },
            },
            emphasis: { //當鼠標放上去  地區區域是否顯示名稱
               label: {
                   show: true,
                   textStyle: {
                       color: '#fff',
                       fontSize: 10,
                       backgroundColor: 'rgba(0,23,11,0)'
                   }
               }
            },
             //shading: 'lambert',
            light: { //光照陰影
                main: {
                     color: '#fff', //光照顏色
                     intensity: 1.2, //光照強度
                     //shadowQuality: 'high', //陰影亮度
                     shadow: false, //是否顯示陰影
                     alpha:55,
                     beta:10

                },
                ambient: {
                   intensity: 0.3
                }
           }
        },
        map3D: {
            zoom: 0.4
        },
        series: [{
            name: 'bar3D',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            barSize: 3.5, //柱子粗細
            shading: 'lambert',
            opacity: 1,
            bevelSize:0.3,
            color:  '#97bdff',
            label: {
            show: false,
            formatter: '{b}'
        },
        data: convertData(barData),
    }]
  }

　if (option && typeof option === "object") {
     myChart.setOption(option, true);
  }

},

在vue文件中引用json文件，這里用上海的地圖為例

import shanghaiMap from './json/shanghai.json'

至此，就能看到頁面效果了