echart--vue中使用3d地图、柱状图

• Z时代
• 2024-01-10
• 分类：综合

平时项目中对数据的解析用图表比较多，这次应项目要求，要做一个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\'

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

以上是 echart--vue中使用3d地图、柱状图 的全部内容， 来源链接： utcz.com/z/379102.html