Echart 基于geo的3D柱状图

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

效果图：

npm安装：

npm install echarts
npm install echarts-gl

引入方式：

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

或者index.html cdn引入

<!--echarts js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<!--echarts-gl js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<!-- bmap、china、world 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<!-- ecStat 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<!-- dataTool 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>

1.数据结构

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

2.option配置

<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]
              }],
    };
  },
  mounted() {
    this.getMapData();
  },
  methods: {
    getMapData() {
      // 绘制柱状图函数 geo底图
      this.drawBarChartGeo("map", this.bPoint,this.sPoint);
    },
    // 绘制柱状图函数 geo底图
    async drawBarChartGeo(name, bData,sData) {
      const { data: geoJSON } = await this.$http.get(
          "https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
      );
      // echart.registerMap('geoJSON', geoJSON);
      // 初始化
      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>

3.源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>基于geo的3D柱状图</title>
    <style>
        html, body, #app{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: absolute;
            background: black;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="map"></div>
</div>
</body>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入 axios -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!--echarts js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<!--echarts-gl js文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
<!-- bmap、china、world 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
<!-- ecStat 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
<!-- dataTool 的 js 文件 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                bPoint: [
                    {
                        name: "名字",
                        value:[105.93318,37.981425,2399]
                    }],
                sPoint: [
                    {
                        name: "名字",
                        value:[106.576627,38.159436,4887]
                    }],
                drawer: false,
                direction: 'rtl'
            };
        },
        mounted() {
            this.getMapData();
        },
        methods: {
            //   请求数据的函数
            getMapData() {
                // 绘制柱状图函数 geo底图
                this.drawBarChartGeo("map", this.bPoint, this.sPoint);
            },
            // 绘制柱状图函数 geo底图
            async drawBarChartGeo(name, bData, sData) {
                const { data: geoJSON } = await axios.get(
                    "https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
                );
                // 初始化
                const myChart = echarts.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>
</html>

4.geojson数据来自：

地图选择器 (aliyun.com)

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

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