Echart 基于geo的3D柱状图

超、凢脫俗 2022-12-25 00:54 562阅读 0赞

echarts社区例子：[ECharts Gallery - 3d地图画线1 (makeapie.com)][ECharts Gallery - 3d_1 _makeapie.com]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70][]

# npm安装： #

npm install echarts
    npm install echarts-gl

引入方式：

import echart from "echarts";
    import "echarts-gl";
    import "echarts/map/js/china";

或者index.html cdn引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>

# 1.数据结构 #

bPoint=[
                  {
                    name: "名字",//名字
                    value:[105.93318,//经度
                           37.981425,//纬度
                              2399//数值
                          ]
                  }],

# 2.option配置 #

# 3.源码 #

<template>
      <div>
        <div id="map"></div>
      </div>
    </template>
    
    <script>
    import echart from "echarts";
    import "echarts-gl";
    import "echarts/map/js/china";
    export default {
      data() {
        return {
          bPoint: [
                  {
                    name: "名字",
                    value:[105.93318,37.981425,2399]
                  }],
          sPoint: [
                  {
                    name: "名字",
                    value:[106.576627,38.159436,4887]
                  }],
          drawer: false,
          direction: 'rtl'
        };
      },
      created() {
        // this.getMapData();
      },
      mounted() {
        this.getMapData();
      },
      methods: {
        //   请求数据的函数
        getMapData() {
          // 绘制柱状图函数 geo底图
          this.drawBarChartGeo("map", this.buyerPoint, this.sellerPoint);
        },
    
        // 绘制柱状图函数 geo底图
        async drawBarChartGeo(name, buyerData,sellerData) {
          const { data: geoJSON } = await this.$http.get(
              "https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
          );
          // 初始化
          const myChart = echart.init(document.getElementById(name));
          let option = {
            geo3D: {
              map: 'china',
              roam: true,
              itemStyle: {
                color: '#475368',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#212429'
              },
              label: {
                show: true,
                textStyle: {
                  color: '#fff', //地图初始化区域字体颜色
                  fontSize: 10,
                  opacity: 1,
                  backgroundColor: 'rgba(0,23,11,0)'
                }
              },
              shading: 'lambert',
              light: { //光照阴影
                main: {
                  color: '#ffffff', //光照颜色
                  intensity: 1.2, //光照强度
                  //  shadowQuality: 'high', //阴影亮度
                  shadow: true, //是否显示阴影
                  alpha: 55,
                  beta: 10
    
                },
                ambient: {
                  intensity: 0.3
                }
              }
            },
            series: [
              //柱状图
              {
                name: "买家的柱状图",
                type: "bar3D",
                coordinateSystem: "geo3D",
                barSize: 0.4, //柱子粗细
                shading: "lambert",
                bevelSize: 0.3,
                minHeight:1,
                itemStyle: {
                  color:"#3678fc",
                  opacity: 1,
    
                },
                label: {
                  show: false,
                  formatter: (record) => {
                    return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
                  },
                },
                data: bData,
              },
              //柱状图
              {
                name: "卖家家的柱状图",
                type: "bar3D",
                coordinateSystem: "geo3D",
                barSize: 0.4, //柱子粗细
                shading: "lambert",
                bevelSize: 0.3,
                minHeight:1,
                itemStyle: {
                  color:"#ffb526",
                  opacity: 1,
    
                },
                label: {
                  show: false,
                  formatter: (record) => {
                    return `${record.name}\n重量：${record.value[2].toFixed(2)}吨`;
                  },
                },
                data: sData,
              },
            ],
          };
          myChart.setOption(option);
          //地图点击事件
          // myChart.getZr().on('click', function (params) {});
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    #map {
      width: 1403px;
      height: 864px;
    }
    </style>

# 4.geojson数据来自： #

[地图选择器 (aliyun.com)][_aliyun.com]

通过axios请求：[https://geo.datav.aliyun.com/areas/bound/geojson?code=100000\_full][https_geo.datav.aliyun.com_areas_bound_geojson_code_100000_full] 获取geojson数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70 1][]

遇到什么问题，可留言，看到会尽快回复。

[ECharts Gallery - 3d_1 _makeapie.com]: https://www.makeapie.com/editor.html?c=xSy3KhFV4M
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70]: /images/20221120/ebd8517263e8452c85956eae173a64ee.png
[_aliyun.com]: http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
[https_geo.datav.aliyun.com_areas_bound_geojson_code_100000_full]: https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201129205622245.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz,size_16,color_FFFFFF,t_70