前端笔记：可视化大屏

最新推荐文章于 2024-05-12 16:14:34 发布
最新推荐文章于 2024-05-12 16:14:34 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： 数据可视化 文章标签： 前端 echarts javascript 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37537423/article/details/122273636
版权
本文探讨了数据可视化的价值，特别是在科技、投资和企业中的应用。展示了作者使用ECharts创建的可视化大屏截图，并列举了多种可视化图形类型。同时，介绍了包括ECharts在内的多种可视化工具，覆盖客户端、Web、脚本和拖曳生成等多种方式，适合不同需求和场景。
摘要由CSDN通过智能技术生成

数据可视化，可以让我们的眼睛对数据有一个更加直观的感知。而可视化大屏，更会给人带来一种高大上的、酷炫的、有科技感的感觉。尤其是在科技行业、投资行业、上市企业，可视化大屏用得比较多。下图是我制作的一份可视化大屏截图。前端合成代码如下：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>可视化大屏</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-liquidfill.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/guangdong.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/china.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://assets.pyecharts.org/assets/ResizeSensor.js"></script>

            <link rel="stylesheet"  href="https://assets.pyecharts.org/assets/jquery-ui.css">

</head>
<body>
    <style>.box {
       }; </style>
        
    <div class="box">
                <div id="72707bb40d3445259eb798969800df64" class="chart-container" style="position: absolute; width: 456px; height: 500px; top: 31px; left: 8px;"></div>
    <script>
        var chart_72707bb40d3445259eb798969800df64 = echarts.init(
            document.getElementById('72707bb40d3445259eb798969800df64'), 'white', {
     renderer: 'canvas'});
        var option_72707bb40d3445259eb798969800df64 = {
     
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
     
            "type": "bar",
            "name": "\u7545\u9500\u54c1",
            "legendHoverLink": true,
            "data": [
                10,
                13,
                17,
                22,
                29,
                38,
                49,
                64,
                83,
                108,
                140,
                182,
                237,
                308,
                400,
                520,
                676,
                879,
                1143,
                1486
            ],
            "showBackground": false,
            "barMinHeight": 0,
            "barCategoryGap": "20%",
            "barGap": "30%",
            "large": false,
            "largeThreshold": 400,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "clip": true,
            "zlevel": 0,
            "z": 2,
            "label": {
     
                "show": true,
                "position": "right",
                "margin": 8
            },
            "markPoint": {
     
                "symbolSize": 80,
                "label": {
     
                    "show": true,
                    "position": "inside",
                    "color": "#fff",
                    "margin": 8
                },
                "data": [
                    {
     
                        "type": "average"
                    },
                    {
     
                        "type": "max"
                    },
                    {
     
                        "type": "min"
                    }
                ]
            },
            "rippleEffect": {
     
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
     
            "data": [
                "\u7545\u9500\u54c1"
            ],
            "selected": {
     
                "\u7545\u9500\u54c1": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
     
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
     
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
     
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "xAxis": [
        {
     
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
     
                "show": false,
                "lineStyle": {
     
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            }
        }
    ],
    "yAxis": [
        {
     
            "show": true,
            "scale": false,
            "nameLocation": "end",
            "nameGap": 15,
            "gridIndex": 0,
            "inverse": false,
            "offset": 0,
            "splitNumber": 5,
            "minInterval": 0,
            "splitLine": {
     
                "show": false,
                "lineStyle": {
     
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                }
            },
            "data": [
                "\u56fe\u4e66",
                "\u6bdb\u5dfe",
                "\u6212\u6307",
                "\u8033\u73af",
                "\u9879\u94fe",
                "\u7535\u98ce\u6247",
                "\u7fbd\u7ed2\u670d",
                "\u70ed\u6c34\u5668",
                "\u80cc\u5305",
                "\u6d17\u8863\u6db2",
                "\u7eb8\u5dfe",
                "\u7535\u8111",
                "\u624b\u673a",
                "\u997c\u5e72",
                "\u87ba\u72ee\u7c89",
                "\u7259\u818f",
                "\u889c\u5b50",
                "\u5927\u8863",
                "T\u6064",
                "\u6d17\u9762\u5976"
            ]
        }
    ],
    "title": [
        {
     
            "text": "TOP20\u5546\u54c1\u7545\u9500\u5ea6\u5bf9\u6bd4(\u4e07\u5143)",
            "subtext": "2021\u5e7411\u670811\u65e5",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_72707bb40d3445259eb798969800df64.setOption(option_72707bb40d3445259eb798969800df64);
</script>
<br/>                <div id="1e124c0e04564c91bd04fe0a05fc2741" class="chart-container" style="position: absolute; width: 535px; height: 250px; top: 30px; left: 885px;"></div>
    <script>
        var chart_1e124c0e04564c91bd04fe0a05fc2741 = echarts.init(
            document.getElementById('1e124c0e04564c91bd04fe0a05fc2741'), 'white', {
     renderer: 'canvas'});
        var option_1e124c0e04564c91bd04fe0a05fc2741 = {
     
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
     
            "type": "pie",
            "name": "\u54c8\u4f5b\u5728\u7b49\u6211\u5462~",
            "clockwise": true,
            "data": [
                {
     
                    "name": "\u9996\u9970",
                    "value": 16
                },
                {
     
                    "name": "\u670d\u9970",
                    "value": 12
                },
                {
     
                    "name": "\u5316\u5986\u54c1",
                    "value": 9
                },
                {
     
                    "name": "\u98df\u54c1",
                    "value": 8
                },
                {
     
                    "name": "\u5bb6\u5c45",
                    "value": 7
                },
                {
     
                    "name": "\u6570\u7801",
                    "value": 5
                },
                {
     
                    "name": "\u65e5\u7528",
                    "value": 4
                },
                {
     
                    "name": "\u751f\u9c9c",
                    "value": 3
                },
                {
     
                    "name": "\u6bcd\u5a74",
                    "value": 1
                }
            ],
            "radius": [
                "25%",
                "80%"
            ],
            "center": [
                "45%",
                "60%"
            ],
            "roseType": "radius",
            "label": {
     
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{b}: {d}%"
            },
            "rippleEffect": {
     
                "show": true,
                "brushType": "stroke",
                "scale": 2.5,
                "period": 4
            }
        }
    ],
    "legend": [
        {
     
            "data": [
                "\u9996\u9970",
                "\u670d\u9970",
                "\u5316\u5986\u54c1",
                "\u98df\u54c1",
                "\u5bb6\u5c45",
                "\u6570\u7801",
                "\u65e5\u7528",
                "\u751f\u9c9c",
                "\u6bcd\u5a74"
            ],
            "selected": {
     },
            "show": true,
            "left": "80%",
            "top": "10%",
            "orient": "vertical",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
     
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
     
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
     
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
     
            "text": "\u5404\u7c7b\u76eeGMV\u8d21\u732e\u5360\u6bd4",
            "subtext": "2021\u5e7411\u670811\u65e5",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_1e124c0e04564c91bd04fe0a05fc2741.setOption(option_1e124c0e04564c91bd04fe0a05fc2741);
</script>
<br/>                <div id="551ba174dcf64c57876d2e339890e4c8" class="chart-container" style="position: absolute; width: 415px; height: 250px; top: 33px; left: 1423px;"></div>
    <script>
        var chart_551ba174dcf64c57876d2e339890e4c8 = echarts.
最低0.47元/天 解锁文章
哈佛在等我呢
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
01大数据可视化前端界面大屏.zip
03-24
大数据可视化前端模板 数据方舱 html页面 echart 大屏界面 下载即用
Vue 前端数据大屏 适配
lhb_11的博客
07-21 1073
数据大屏，基本骨架
精选多个炫酷的数据可视化大屏(含源码)，拿走就用~
最新发布
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
05-12 364
末尾有链接演示地址
前端开发者的可视化大屏开发指南（简易版）
2401_82881178的博客
01-31 4163
随着数据可视化的趋势逐渐兴起，可视化大屏作为一种全新的数据展示方式，也越来越受到前端开发者的关注。可视化大屏可以将数据以更直观、更生动的方式呈现出来，帮助用户更快速地理解数据，从而更好地做出决策。本文将从入门到精通，为前端开发者介绍可视化大屏的开发指南。
前端大屏职业专业智慧分析大数据可视化大屏html模板源码
xyjkhrq的专栏
02-07 4832
可视化大屏模板案例 在线演示地址 http://yuanbaoshuju.com/ 页面部分代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" ...
大屏大概是怎么个开发法（前端）
为写出赏心悦目、容易维护的代码而探索
09-25 7005
关于项目的维护与新增需求过程中值得一提的事
Jupyter笔记本：数据可视化
02-12
**Jupyter笔记本：数据可视化的探索与实践** Jupyter Notebook是一款强大的开源Web应用程序，它使得交互式计算变得简单，尤其在数据分析、机器学习和可视化领域。这个工具允许用户创建和分享包含代码、文本、数学...
Echarts+Vue3.0 大数据可视化项目，大数据可视化大屏系统源码+笔记
04-23
一套课程让你精通Echarts技术栈，让大数据可视化开发丝般顺滑！ 标题：Echarts+Vue3.0 大数据可视化项目构建 Echarts+Vue3.0 大数据可视化项目源码 1、可视化面板布局适配屏幕 2、利用ECharts 实现柱状图展示 ...
数据可视化：基本图表
01-27
数据可视化"可以帮助用户理解数据，一直是热门方向。图表是"数据可视化"的常用手段，其中又以基本图表----柱状图、折线图、饼图等等----最为常用。用户非常熟悉这些图表，但如果被问道，它们的特点是什么，最适用...
智慧大屏可视化数据模板，大数据可视化大屏电子沙盘合集
01-23
包含行业：智慧政务、智慧社区、金融行业、智慧交通、智慧门店、智慧大厅、智慧物流、智慧医疗、通用模板大数据分析平台 项目包含功能 (部分)： 实时数据K线图（可自由配置...可切换式大屏展示、翻牌效果、自定义字体
【仗剑天涯】从0到1构建可视化大屏-员工管理
文艺倾年的博客
05-10 2093
😊你好，我是小航，一个正在变秃、变强的文艺倾年。 🔔本专栏【仗剑天涯】每晚11:30-12:30更新，欢迎大家多多关注根据需求，项目主要分两个模块：部门管理（树形展示）、员工管理（录入信息，指定部门）SpringBoot、MyBatis-plus、Vue、Webpack、DataV、Echarts、OSS项目环境：jdk8、Vue-cli-2.0、DataV-2.7.3、Echarts-4.6.0、Webpack-4.0、Npm-6.13、Node-v12.16数据库名：tyut_employee ..
resize-sensor:检测 Meteor 中 DOM 元素的任何大小调整
06-05
调整传感器大小 从提取调整大小传感器 快速使用 var sensor = new ResizeSensor(element, function(){ console.log("anything inside of element caused my size to change"); }) 移除监听器 sensor.detach() 或者 ResizeSensor.detach(element);
VueResizeSensor:一个支持resize事件的Vue容器
05-27
VueResizeSensor 一个支持resize事件的Vue容器。 适用于Vue 2和3。 依存关系 设置 npm npm i @seregpie/vue-resize-sensor import VueResizeSensor from '@seregpie/vue-resize-sensor' ; 浏览器 <!-- if using Vue 2 --> < script src =" https://unpkg.com/vue@2 " > </ script > < script src =" https://unpkg.com/@vue/composition-api " > </ script > <!-- if using Vue 3 --> < script src =" https://unpkg.com/vue@3 " > </ script > < scri
大屏上下滚动特效
05-22
插件描述：当前流行的大屏上下滚动，当前遇到效果最好的一个. 参考示例：http://www.jq22.com/jquery-info4598
50 行 Python 代码制作一个数据大屏
BYGFJ的博客
04-06 1982
今天给大家分享一个制作数据大屏的工具，非常的好用，100行左右的Python代码就可以制作出来一个完整的数据大屏，并且代码的逻辑非常容易理解。 PywebIO介绍 Python当中的PywebIO模块可以帮助开发者在不具备HTML和JavaScript的情况下也能够迅速构建Web应用或者是基于浏览器的GUI应用，PywebIO还可以和一些常用的可视化模块联用，制作成一个可视化大屏， 我们先来安装好需要用到的模块 pipinstallpywebio pipinstallcutecharts ...
JQuery+webpack+echarts构建可视化开发环境
m0_72431373的博客
11-15 402
可以看到这个文件是非常长的，因为我把一个大屏里面所有图形的option都放在这里面去设置，这样其实是不便于调试的，比较好的方案还是在布局的时候根据可视化的设计图，将不同的图，比如折线图，饼图甚至是地图的分别分成不同的模块，不同的模块对应不同的dom节点，然后在index.html的文件里去排版好这些dom节点的布局，使得每一个图形都只有一个单独的js文件，方便调试，看起来也十分清爽，因为时间有限，我就只放在了这一个文件里，dom节点也只创建了一个，有兴趣的同学可以自行尝试做一下。
前端大屏可视化项目
efew212efe的博客
06-27 1万+
1、确定需要适配屏幕的大小，虽然我们前端默认大屏的1920*1080起步的，但是防止有人不懂开发前需要新搞清楚适配范围；2、和UI说清楚字体大小尽量在12px以上，一是12px以下写起来麻烦；二是12px以下在大屏中展示效果不好；3、不同大小屏幕的适配方法 我使用的是zoom，其中1920是设计稿的宽度 当然transform scale 和rem等方式也行；4、大屏中有很多样式很难实现，可能会使用很多图片代替，图片太多可以使用雪碧图来优化；5、DataV组件库中的轮播表config数据更新后视图不发生变
前端大屏自适应踩过的坑
kgjfk的博客
09-20 619
自适应大屏项目踩过的坑
Vue运用之resize监听窗口变化
热门推荐
日常笔记/总结/系列知识梳理
08-10 5万+
一、在Vue单个页面运用 &amp;lt;template&amp;gt; &amp;lt;div id=&quot;divId&quot;&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;gt; export default { data() {
HTML前端笔记：语义化与CSS、JS结合
当用户访问一个网页时，浏览器向服务器发送HTTP请求，服务器响应HTML内容，浏览器解析HTML并结合CSS和JS渲染出可视化的页面。同时，浏览器也可以接收用户输入并将其发送回服务器，实现交互。 前端开发工具包括各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值