数据可视化大屏 开发中经常需要渲染各种地图效果,今天整理出在项目开发过程中遇到的各种类型的echarts效果。
6.echarts渲染自定义组件到echarts地图中
vue3 数据大屏项目开发中,需要渲染自定义柱状图到echarts地图中,这里我们通过经纬度的方式将组件渲染到地...
yekong
1年前 (2023-11-10)
喜欢
数据可视化大屏项目开发中,需要实现一个效果,就是地图默认显示的是echarts地图,点击对应的地点后,会跳转到百度地图,百度地图缩放以后,重新显示echarts地图。
实现思路
准备两个组件,一个百度组件一个echarts地图组件,通过v-if进行切换。
当echarts地图被点...
yekong
1年前 (2023-11-10)
喜欢
vue 高德地图显示一级数据的图标,鼠标移入一级图标,显示标题,单击一级图标放大地图,双击一级图标显示弹窗。
当一级图标放大后显示二级图标,鼠标移入二级图标后弹出显示信息,地图缩小后二级图标移除。
图标根据状态显示不同的图标
演示地址
vue3 自定义图标点击放大地图显示子图标...
yekong
1年前 (2023-11-07)
喜欢
数据可视化大屏 项目中经常会遇到需要渲染echarts地图 的情况,为了方便不同地区的数据使用,将一些地图数据整理出来,供大家参考,今天为大家整理的是echarts江苏省地图geoJson数据。
江苏省,简称“苏”,是中华人民共和国省级行政区,省会南京,位于长江三角洲地区,中国大...
yekong
1年前 (2023-11-06)
喜欢
数据可视化大屏 项目中经常会遇到需要渲染echarts地图 的情况,为了方便不同地区的数据使用,将一些地图数据整理出来,供大家参考,今天为大家整理的是echarts扬州市地图3d地图加自定义图标。
扬州,古称广陵、江都、维扬,江苏省辖地级市,Ⅱ型大城市,是江苏长江经济带重要组成部...
yekong
1年前 (2023-11-06)
喜欢
数据可视化大屏项目开发中,会遇到各种不一样的需求,前面我们实现的echarts 堆叠伪圆柱柱状图效果,这次我们实现一个类似棱柱体效果。如果顶部的菱形装饰不满意,想用其他的图标我们可以通过iconfont自行寻找图标进行替换。
底部axisLabel的文字倾斜我们用到了rotat...
yekong
1年前 (2023-11-04)
喜欢
数据可视化大屏项目开发中,会遇到各种不一样的需求,今天遇到的需求是堆叠柱状图,并且堆叠在一块的柱状图顶部有个椭圆装饰让柱状图看起来像个个圆柱体。
这里是通过markPoint来实现我们想要的效果的。通过svg图标达到柱状图椭圆顶部的效果。
markPoint
ECharts 的...
yekong
1年前 (2023-11-04)
喜欢
数据可视化大屏项目开发中,会遇到各种各样的效果,今天遇到一个问题就是legend图标中矩形只有直角的,但是设计图里是
设计图效果
echarts实现效果
调整办法
echarts legend矩形图标默认只有直角的,没有圆角的,所以我们需要将图标改为svg格式的,我们可以通过...
yekong
1年前 (2023-11-04)
喜欢
在之前的vue 项目中使用高德地图自定义图标覆盖物我们实现了自定义图标覆盖物,这里我们来给自定义覆盖物绑定自定义弹窗。
演示地址
vue 项目中高德地图自定义覆盖物绑定自定义弹窗
首先引入高德地图
在vue项目中的index.html中引入高德地图,这里的key需要自己申请。
...
yekong
1年前 (2023-11-04)
喜欢
数据可视化大屏 项目开发中,需要使用高德地图来渲染自定义图标,这里将实现步骤写下来。
演示地址
vue 项目中使用高德地图自定义图标覆盖物
vue 项目中使用高德地图自定义图标覆盖物
首先引入高德地图
在vue项目中的index.html中引入高德地图,这里的key需要自己申请...
yekong
1年前 (2023-11-04)
喜欢