Echarts 平面地图省市区下钻 网上有很多例子 我们就不在赘述了。现在网上关于3D下钻的例子很少,或者有些作者根本就没有尝试过,只是拿平面的代码改一改说是可以下钻,其实事件都不生效的。 实现的主要原理就是在emphasis属性里获取到当前鼠标所在的区域名称然后配合myChart.getZr()事件来配合下钻,当时也是借鉴了别人...
在Vue 3中使用ECharts实现地图下钻功能,可以按照以下步骤进行: 1. 创建一个Vue 3项目,并安装ECharts库 首先,你需要确保你的开发环境中已经安装了Vue 3和ECharts。如果还没有安装,可以使用以下命令进行安装: bash # 创建一个新的Vue 3项目 vue create my-vue-echarts-project # 进入项目目录 cd my-vue-ech...
1. 地图的依赖 绘制3D效果的地图这里我们采用Echarts5中的geo3D和bar3D,用到的依赖版本如下: "dependencies":{"echarts":"^5.3.2","echarts-gl":"^2.0.9","vue":"^3.3.4","element-plus":"2.0.4",}, echarts-gl主要是专门做3D效果图,普通的可视化echarts够用了 2. 地图JSON信息字段简介 首先,绘...
1、创建一个vue3项目 2、echarts安装 npm install echarts 此时echarts的版本为5.4.0 "dependencies": {"core-js":"^3.6.5","echarts": "^5.4.0","vue":"^3.0.0","vue-router":"^4.0.0-0"}, 3、拷贝山东省及各市的json文件到项目中的assets目录下 注意:json文件在DataV.geoAtlas地理小工具系列...
笔者推到github仓库了,欢迎大家去star一下哦。后续会在这个仓库中添加一些Echarts相关的代码效果文章啥的 仓库地址:https://github.com/shuirongshuifu/vue3-echarts5-example echarts5.0vue3 赞收藏 分享 阅读3.5k发布于 2023-10-31 水冗水孚 1.1k 声望588 粉丝 ...
市和区县都有对应的数据,使用3D柱状图展示 具有下钻功能和返回功能 数据柱状图的颜色的深浅,取决于数据的大小 实现步骤 1. 地图的依赖 绘制3D效果的地图这里我们采用Echarts5中的geo3D和bar3D,用到的依赖版本如下: "dependencies": { "echarts": "^5.3.2", ...
vue3使用ECharts地图配置高德地图实现往下钻效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 /*准备工作*/ //安装echarts npm install echarts //index.html文件中加入这俩...