数据可视化大屏项目 开发中,客户反馈echarts图表里的tooltip会出现抖动问题
不使用tooltip
没有tooltip就没有抖动的问题了。
tooltip: {show: false},
将transitionDuration设置为0,让tooltip紧跟鼠标
too...
yekong
1年前 (2023-08-13)
喜欢
数据可视化大屏 项目开发中,有一个折线图效果,折线图要求label数值大于40显示为蓝色小于40的显示为绿色。这里使用了渐变色的方式来控制线条的颜色。
echarts版本
"echarts": "^5.2.0",
实现代码
drawEc...
yekong
1年前 (2023-08-13)
喜欢
数据可视化大屏 项目开发中,设计图中有一个效果比较特殊,用echarts代码实现的话,可能没办法实现这种效果,于是想到用图片的方式来实现。
设计图效果截图
echarts渲染后的效果
柱状图分为三部分,顶部中间以及底部三部分。
实例代码
drawLine() {
var...
yekong
1年前 (2023-08-12)
喜欢
数据可视化大屏项目开发过程中,需要显示一些自定义的柱状图样式,这里用图片来实现的,legend也要用自定义图片来做图标,这里将实现的代码记录一下.
在 ECharts 中,你可以通过 legend 的 data 属性设置每个图例项的自定义图标。你可以为每个图例项提供一个对象,其...
yekong
1年前 (2023-08-12)
喜欢
vue3 可视化数据大屏 项目开发中,会遇到各种各样的头部,今天整理的是 vue3数据可视化大屏顶部组件 - 风险监测预警平台。
效果截图
帧动画效果
通过ae实现从两侧到中间的扫光动画,使用帧动画生成。帧动画虽然增加了效果同时也增加了文件大小。
动画持续时间
动画持续时间3...
yekong
1年前 (2023-08-11)
喜欢
数据可视化大屏 项目开发中,需要一个内部发光的效果,使用图片的话,在适配宽高的时候可能会变形,所以这里用css的内发光效果来实现效果。
效果截图
关键代码
.itemInfo {
position: relative;
width: 100%;
height: 10...
yekong
1年前 (2023-08-11)
喜欢
数据可视化大屏项目开发过程中,需要一些特效,今天整理的效果是echarts 折线图流光效果,流光效果不适用于平滑曲线。
动态效果
实例代码
drawEcharts() {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts....
yekong
1年前 (2023-08-11)
喜欢
动态效果
你可以使用CSS动画或JavaScript来实现文字依次显示的效果。以下是一个使用Vue和CSS动画的示例代码:
<template>
<div class="text-container">
<span...
yekong
1年前 (2023-08-11)
喜欢
GeoJOSN数据简介和获取
要渲染地图,首先要有地图数据,所以我们需要先可以获取到我们需要的地图数据,然后才能渲染地图。
通过Three.js实现一个基础渲染代码
要渲染3d地图首先需要能够使用threejs渲染一个基本的场景
threejs 相机渲染范围、位置和目标
我们需要...
yekong
1年前 (2023-08-10)
喜欢
要渲染世界地图,首先我们需要准备世界地图geoJson数据,
如果对geoJson不了解的话可以查看GeoJOSN介绍,进行了解。
如果不知道如何获取geoJson的话,可以从这里获取:GeoJOSN数据简介和获取
threejs版本
当前笔记使用threejs版本号
"...
yekong
1年前 (2023-08-10)
喜欢