【3d地图】vue3.0中使用echarts geo3D

这篇具有很好参考价值的文章主要介绍了【3d地图】vue3.0中使用echarts geo3D。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。



前言

之前我们已经成功在 vue2 中渲染了 echarts3D 地图,那么这次我们直接进阶成 vue3渲染 geo3D地图,并且承接上一章末尾许下的小彩蛋,我们在 3D 地图上加入, 3D 柱状图,和热力图!

本文框架基于 vue3.x setup + vite + TypeScript


一、echarts是什么?

“ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。”

二、使用步骤

1.引入echarts库,3d地图必须安装echarts-gl依赖

npm install echarts --save
npm install echarts-gl --save

2.制作地图JSON文件

在渲染3d地图之前,我们还需要到<<DATAV.GeoAltas地理小工具系列>>网站下载我们需要的json数据,这里我用浙江地图做示例下载好了json文件
【3d地图】vue3.0中使用echarts geo3D

“zhejiang.json”

3.引入到vue组件中

因为本篇文章是进阶版,所以就不做过多的教程步骤教程了!那么直接上全部代码(如果想要了解详细步骤原理请查看上一篇文章内容哦~)

<template>
  <div class="map" id="mapEchart" style="width:100%;height:100vh"></div>
</template>

<script setup>
// 引入工具
import geoJson from "./zhejiang.json"; //该文件路径改成自己项目中的文件路径即可
import * as echarts from "echarts";
import "echarts-gl"; //3D地图插件
import { onMounted } from "vue";

// 定义echarts方法
const chartMap = () => {
  var myChart = echarts.init(document.getElementById("mapEchart"));
  // 重点:不要遗漏这句代码!!
  echarts.registerMap("zhejiang", geoJson);
  // 图表配置项
  let option = {
    tooltip: {
      show: true,
    },
    //热力图配置项
    visualMap: [
      {
        type: "continuous",
        text: ["xxx"],
        calculable: true,
        max: 250,
        inPange: {
          color: ["#87aa66", "#eba438", "#d94d4c"],
        },
      },
    ],
    //3D地图配置项
    geo3D: {
      map: "zhejiang",
      roam: true,
      itemStyle: {
        color: "#007aff",
        opacity: 0.8,
        borderWidth: 0.4,
        borderColor: "#000",
        // areaColor: '#fff'
      },
      viewControl: {
        autoRotate: true,
        autoRotateAfterStill: 3,
        distance: 120,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        animation: true, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
      },

      emphasis: {
        disabled: true, //是否可以被选中
        label: {
          //移入时的高亮文本
          show: true,
          color: "#333", //显示字体颜色变淡
          fontSize: 18, //显示字体变大
        },
        itemStyle: {
          color: "#ff7aff", //显示移入的区块变粉色
        },
      },
      label: {
        show: true,
        position: "top",
        color: "#111", //地图初始化区域字体颜色
        fontSize: 14,
        lineHeight: 16,
      },
      shading: "lambert",
      light: {
        //光照阴影
        main: {
          // color: "#fff", //光照颜色
          intensity: 1, //光照强度
          //shadowQuality: 'high', //阴影亮度
          shadow: true, //是否显示阴影
          shadowQuality: "medium", //阴影质量 ultra //阴影亮度
          alpha: 55,
          beta: 10,
        },
        ambient: {
          intensity: 0.7,
        },
      },
    },
    series: [
    //3D柱状图配置项
      {
        name: "xxx",
        type: "bar3D",
        coordinateSystem: "geo3D",
        barSize: 3,
        shading: "lambert",
        opacity: 1,
        bevelSize: 0.2,
        label: {
          show: false,
          formatter: "{a}",
        },
        //自定义的data数组 value中数组的含义:[杭州的经度or纬度,要展示的3d柱状图数值大小]
        data: [
          { name: "杭州", value: [120.161693, 30.280059, 643] },
          { name: "温州", value: [120.705869, 28.001095, 98] },
          { name: "湖州", value: [120.094566, 30.899015, 72] },
          { name: "嘉兴", value: [120.762045, 30.750912, 131] },
          { name: "绍兴", value: [120.586673, 30.036519, 116] },
          { name: "丽水", value: [119.929503, 28.472979, 40] },
          { name: "衢州", value: [118.880768, 28.941661, 22] },
          { name: "金华", value: [119.654027, 29.084455, 156] },
          { name: "台州", value: [121.426996, 28.662297, 110] },
          { name: "宁波", value: [121.556686, 29.880177, 163] },
          { name: "舟山", value: [122.214339, 29.991092, 20] },
        ],
      },
    ],
  };
  myChart.setOption(option);
  //让可视化地图跟随浏览器大小缩放
  window.addEventListener("resize", () => {
    charts.resize();
  });
};

onMounted(() => {
  // 挂载echart
  chartMap();
});
</script>

<style lang="less" scoped>
</style>


总结

【3d地图】vue3.0中使用echarts geo3D

在vue3中引入3d地图echarts是不是也非常简单呢!
期待后续更多功能请看
下期分享
《【vue】Echarts3D地图下钻》点击这里文章来源地址https://www.toymoban.com/news/detail-403536.html

到了这里,关于【3d地图】vue3.0中使用echarts geo3D的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

    先讲下需求: 1.地图上显示各个省份的名称 2.对不同省份进行区分(项目涉及到省份排名之类的); 3. 点击进入不同省份 展示各个省份的市区信息; 4. 在省份地图上添加marker ; 1.中国地图使用geo3d 和scatter3D做文字图层,用map3d实现点击可以获取省份信息,如果单独使用geo

    2024年02月16日
    浏览(62)
  • echarts地图组件-地图纹理、地图3D投影、多个geo缩放同步

    1.实现效果: 2.实现代码: ①geo:{ // geo设置,outShadow为是否开启3D阴影;若开启,则layoutCenter要设置大一点偏移造成底部外框阴影效果,areaColor是区块的颜色,shadowColor是阴影的颜色 { map: \\\"jiangxi\\\", layoutCenter: this.option.outShadow ? [\\\"50%\\\", \\\"51.5%\\\"] : [\\\"50%\\\", \\\"50%\\\"], //地图位置 layoutSize: \\\"11

    2024年02月04日
    浏览(42)
  • 手把手教 Vue3.2+Vite+Echarts 5 绘制3D线条效果中国地图

    本篇文章介绍 Vue3.2+Vite 项目内使用 Echarts 5 绘制中国地图,标记分布点!之前没有接触过 Echarts 的,可以先去官方示例看看,里面图形特别齐全。但是官方文档看着费劲的,太多了根本记不住,所以自己做个总结,下次就可以直接使用了,不用做重复无用功。 1、下载并引入

    2024年02月04日
    浏览(53)
  • vue中如何使用 ECharts 提供的多种布局方式,如 grid、grid3D、geo 等

    ECharts提供的多种布局方式 ECharts提供的多种布局方式举例 vue中如何使用ECharts提供的多种布局方式 ECharts提供的多种布局方式,如grid、grid3D和geo,用于控制图表元素在坐标系中的位置和布局。下面是对每种布局方式的简要解释: grid布局:grid布局方式用于将图表元素放置在一

    2024年02月21日
    浏览(38)
  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一、下载echarts与echarts gl 二、vue引入与页面使用 1.引入 2.页面引入echarts-gl 三、下载地图数据 四、使用地图 1、html初始化地图放入位置: 2、data创建变量 3、创建地图 4、钩子函数渲染地图 5、渲染完成效果 总结 提示:本项目使用vue,请提前搭建好vue项目 本次需求

    2024年02月12日
    浏览(43)
  • vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化

    前言 最近在开发中遇到一个需求,需要把一个地区地图变成3d感觉悬浮在大屏中间配合业务需求 其实echarts配合三方库就可以实现这个效果,具体细节需要自己调整 代码实现 1.下载各省份各地区地图数据-json文件-根据需求下载对应地图json数据引入即可 最新全国地图JSON数据

    2024年01月20日
    浏览(60)
  • VUE+echart绘制地图(3D)

    上一篇分享了一个伪3D的地图,这次我们搞一个真实的3D地图。 效果图如下: 要实现这种效果,首先得引入两个不同的依赖: echarts-liquidfill和echarts-gl,引入很简单: 引入后开始我们的编码工作: template 部分: js部分: 按照步骤来就可以实现和效果图相同的效果,同理,也

    2024年02月11日
    浏览(66)
  • vue3使用Mars3D写区块地图

    因为我也是第一次使用,所以我是把插件和源文件都引入了,能使用启动 源文件 下载地址: http://mars3d.cn/download.html 放入位置 在index.html中引入 引入插件 我是封装的组件,代码的使用和意义 我直接放在备注中 大体布局 父组件 添加地图内部数据和地图外部数据的方法 ,我都

    2024年01月20日
    浏览(52)
  • vue3.0 使用echarts与echarts-gl 实现可旋转,可放大3D饼图

    echarts与echarts-gl 实现3D饼图 实现效果: 旋转效果 缩放效果 实现步骤 1、安装echarts npm install echarts npm install echarts-gl 2、页面定义容器 3、js中引入echarts VUE 组件完整源码:

    2024年04月26日
    浏览(41)
  • vue+echarts——实现3D地图+3D柱状图 效果——粗糙代码记录——技能提升

    最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 所以,最后的决定是通过 echarts 中的 3D地图 来写。但是写出来的效果不慎好看。功能是可以实现的。 初版效果图如下: 直接上代码: 我这边是存储到当前文件夹中了。。。 背景颜色是 ec

    2024年02月09日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包