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'

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