前言

之前我们已经成功在 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文件

“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(() => {// 挂载echartchartMap();
});
</script><style lang="less" scoped>
</style>

总结

在vue3中引入3d地图echarts是不是也非常简单呢！

【3d地图】vue3.0中使用echarts geo3D相关推荐

【3d地图】vue中使用echarts geo3D
文章目录前言一.echarts是什么? 二.使用步骤 1.引入echarts库,3d地图必须安装echarts-gl依赖 2.制作地图JSON文件 2.1 制作自己的json 3.引入到vue组件 ...
vue3.0中使用Element-plus默认英文组件修改为中文
vue3.0中使用Element-plus默认英文组件修改为中文修改方法说明:本方法Element-plus 1.0.2-beta.59 之前的版本可以,1.0.2-beta.59之后版本请看下一篇 ...
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
vue3.0中找不到组件或者找不到对应的类型声明。怎么解决
vue3.0中找不到组件或者找不到对应的类型声明如何解决? 这里报错 .报错原因报错就是ts影响找不到组件模块或者找不到对应的类型声明 typescript 只能理解 .ts 文件,无法理解 . ...
vue3.0中setup使用(两种用法)
这篇文章主要介绍了vue3.0中setup使用,本文通过两种用法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下一.setup函数的特性以及作用可以确定的是 V ...
如何在Axure 9.0 中使用echarts
如何在Axure 9.0 中使用echarts 在需要插入echarts的页面中交互事件 -> 页面载入时 -> 打开链接 ,加入如下代码,插入echats代码. javascript: ...
Vue3.0中的变化
1.Vue3 简介 2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王) 2.Vue3 带来了什么 1.性能的提升打包大小减少 41% 初次渲染快 5 ...
vue3.0中使用elementUi(element-plus的使用)
element-plus的使用小朋友,你是不是有很多问号❓❓❓ 甲:为什么在vue3.0中不能使用Element UI了? 乙:由于vue3.0在插件install函数的入参从Vue原型(类)改成了 ...
在vue3.0中如何去除网址中的#
vue的history模式的实现在vue3.0中如何去除网址中的#号 history模式在vue3.0中如何去除网址中的#号事情是这样的,最近在用vue写一个商场的项目,当时对于页面网址美观程度 ...

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

文章目录

前言