可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理黄冈市红安县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
红安县,别名将军县,隶属于湖北省黄冈市,位于...
yekong
10个月前 (12-27)
喜欢
echarts饼状图开发过程中,为了增加饼状图多样性,会有不同的需求,今天的饼状图是圆角,这里需要使用第三方echarts插件实现。
插件地址
echarts饼状图设置为圆角
参数
通过参数roundCap: 1来实现,1为逆时针,2为顺时针,不填写则默认。
option = ...
yekong
10个月前 (12-27)
喜欢
echarts 饼状图先渲染的时候,饼状图内部的文字也需要随着扇形图的角度进行相应的角度调整。
这里我们使用 rotate: 'tangential',来实现。
label: {
show: true,
fontWeight: 'bold',
fontSize: 1...
yekong
10个月前 (12-27)
喜欢
vue3 可视化数据大屏 项目开发中,会遇到各种各样的头部,今天整理的是 vue3 数据可视化大屏顶部组件 - 地图驾驶舱。
效果截图
动态效果
扫光动画
帧动画效果
通过ae实现从两侧到中间的扫光动画,使用帧动画生成。帧动画虽然增加了效果同时也增加了文件大小。
动画持续时间...
yekong
10个月前 (12-26)
喜欢
要在ECharts的x轴上添加百分号,可以使用axisLabel的formatter属性。formatter属性允许你自定义轴标签的显示方式。你可以将其设置为一个函数,该函数接收一个参数(标签值),并返回你想要显示的字符串。在这个例子中,你可以返回值后面加上百分号。以下是如何修...
yekong
10个月前 (12-26)
喜欢
vue 数据可视化大屏项目中,经常会用到数字卡片效果,今天整理一些数据大屏项目开发中遇到的数字卡片效果实例。
效果展示
动态效果
数字卡片1皮肤1
数字卡片皮肤2
数字卡片皮肤3
数字卡片效果2
数字卡片效果3
实例代码下载
项目基于vue3 vite js nod...
yekong
10个月前 (12-26)
喜欢
数据大屏开发中,需要将vuex数据进行缓存,但是又不是永久缓存,而是只缓存24小时,这里将实现代码记录下来。
vuex 缓存token 24小时
const state = {
token: localStorage.getItem('token') || null,
t...
yekong
11个月前 (12-25)
喜欢
可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外,也会需要echarts或者threejs效果的地图,今天为大家整理黄冈市团风县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
团风县位于湖北省东部,隶属于黄冈市,地处大别...
yekong
11个月前 (12-25)
喜欢
echarts柱状图数量过多,我们需要通过鼠标滚轮来切换数据,滚轮切换有横向和纵向之分。
水平方向实例代码
水平方向鼠标滚轮切换数据,我们通过xAxisIndex来指定dataZoom为x轴。
dataZoom: [
{
type: 'slider',
xAxisInd...
yekong
11个月前 (12-25)
喜欢
vue2 可视化数据大屏 测试管理平台
如果您需要设计属于自己的数据可视化大屏 请联系我们微信:17331886870
运行环境
nodejs 16
开发框架
vue2 webpack js
分辨率
1920 * 1080
演示地址
演示demo:vue2 数据可视化大屏 测试管...
yekong
11个月前 (12-25)
喜欢