数据可视化大屏 项目开发中，需要使用高德地图来渲染自定义图标，这里将实现步骤写下来。
演示地址
vue 项目中使用高德地图自定义图标覆盖物
vue 项目中使用高德地图自定义图标覆盖物
首先引入高德地图
在vue项目中的index.html中引入高德地图,这里的key需要自己申请...
yekong
1年前 (2023-11-04)
喜欢
数据可视化大屏 项目开发中，客户想要要将当前市区的轮廓渲染在百度地图上，并且将下辖的区域轮廓也渲染出来。这里需要用到geoJson文件了。
geoJson文件获取
这里我们可以在阿里云平台获取：
阿里云 数据可视化平台
也可以在我之前整理的文件中下载：中国地图geoJson渲染...
yekong
1年前 (2023-10-31)
喜欢
在Vue 3中，<script setup> 和普通的 <script> 标签都用于包含组件的JavaScript逻辑，但它们有一些关键区别。
<script setup>
Simpler Syntax: <script setup&g...
yekong
1年前 (2023-10-29)
喜欢
数据可视化大屏开发中，需要一个卡片轮播的效果，这里选用的是element plus的走马灯，默认的走马灯选中的卡片长度只有50%和设计图的长度还是有差距的，需要调整一下。
实现代码
当我们单独设置了卡片长度后，卡片会出现偏移，这时候我们需要调整一下，让其向左移动一定的距离保证能...
yekong
1年前 (2023-10-21)
喜欢
数据可视化大屏项目开发中，需要开发一个宽度3200的数据大屏，大屏里左右各有两列数据中间是地图，左右两侧靠近中心的两列可以通过点击箭头进行展开和收缩。
点击箭头后展开状态下会进行收缩，收缩状态下会进行展开，完成动画后，箭头的方向会旋转180度。
演示地址
gsap实现推拉门的...
yekong
1年前 (2023-10-20)
喜欢
数据大屏开发中，需要监听实时消息，消息是使用的，最新的项目中获取ws数据的方法：vue项目中请求WebSocket获取数据
公共方法
function getSocket(url, params, callback) {
let socket;
if (typeof (...
yekong
1年前 (2023-10-17)
喜欢
数据大屏开发中，需要实现一个步骤条的效果，但是步骤条的长度可能会很大超过了当前显示区域，所以我们需要一个可以鼠标横向拖动的效果。
动态拖动效果
开发环境
vue2 webpack js
使用插件
"@better-scroll/core": "^...
yekong
1年前 (2023-10-17)
喜欢
数据大屏项目在调试开发中可能会需要指定调试端口号，以便于不和其他项目的端口冲突。
这里我们找到vue.config.js文件
关键代码
这里我们指定8083为端口号
devServer: {
port: 8083// 设置端口为8083
},
完整实例代码
'use s...
yekong
1年前 (2023-10-14)
喜欢
vue项目在开发中经常会使用到弹窗组件，但是在使用弹窗组件的时候会遇到一个问题就是当组件有很多，而弹窗组件又在子组件中时，会出现弹窗层级太低出现错位等问题，这时候我们就需要考虑让弹窗组件在最外层不会受到子组件的影响。
关键代码
我们在写组件的时候，可以加入以下代码，将组件插入到...
yekong
1年前 (2023-10-13)
喜欢
数据大屏项目开发中，我们需要使用mockjs返回四组数据，分别为本周 本月 上月 本年。
项目框架
vue3 vite js
请求接口
我们监听active的变化，并将数据传值给接口。
export default {
name: "item",
c...
yekong
1年前 (2023-10-12)
喜欢
