精华内容
下载资源
问答
  • 数据可视化大屏数据显示模板htmlhtml+css
  • ECharts+html大数据可视化大屏展示模板25套,可以根据自己需求修改数据和样式,都是基于ECharts的大数据可视化展示html模板,直接打开html即可看到展示效果。内含:智慧物流大数据展示模板,智慧医疗大数据展示模板...
  • 大数据可视化前端模板 大屏模板 数据可视化
  • 使用echarts实现大屏展示 包括数据源码 可修改无加密 包含地图、饼图、柱形图、折线图、等多种常用图表
  • 地图数据可视化看板大屏幕模板,适用于大数据展示
  • 100套大数据可视化炫酷大屏Html5模板

    万次阅读 多人点赞 2021-07-31 13:41:55
    100套大数据可视化炫酷大屏Html5模板;包含行业:社区、物业、政务、交通、金融银行等,全网最新、最多,最全、最酷、最炫大数据可视化模板。陆续更新中 源码地址 giteehttps://gitee....

    项目背景:由于自己公司项目里面用到一个数据可视化大屏页面,自己网上各种谷歌百度,发现资源良莠不齐,而且大多数都是收费的,甚至一个页面一收费的那种,前前后后自己不管是付费的还是免费的收集了不少,于是自己打算整理下,免费分享给大家,以免大家再走冤枉路。如果大家有珍藏的好模板,欢迎大家继续补充贡献!!!

    版权声明:以下所有模板我均收集于网络,如有涉及版权问题,请及时联系我或在下方评论,我会第一时间删除相关内容

    100套大数据可视化炫酷大屏Html5模板;包含行业:社区、物业、政务、交通、工程、医疗、金融银行等,全网最新、最多,最全、最酷、最炫大数据可视化模板,陆续更新中。如果大家有珍藏的好模板,欢迎大家继续补充贡献!!!

    收集整理不易,如果觉得对你有对您有帮助,您可以点赞评论收藏支持,非常感谢!~

    郑重声明:所有资源免费分享,严禁某些不法分子从我这里打包下载,二次出售!!!

     使用说明

    近日发现有人恶意评论,采集文章,为鉴别是否为真实用户,下载地址转成二维码显示,见下方 

    1. 扫描下方小程序二维码获取Gitee、GitHub、百度网盘下载地址

    2. Gitee直接克隆下载,使用浏览器访问静态页面即可。

    3. GitHub直接克隆下载,使用浏览器访问静态页面即可。

    4. 扫描二维码获取百度网盘下载地址,自行下载。

    5. 现模板总文件大小近2G,git拉取可能容易失败,建议使用网盘下载

    源码地址

    扫描上方微信二维码,获取下载地址

    截图预览

    在线预览时,有可能因为GithubPages浏览器环境问题,导致页面不兼容,不能正常显示,请以截图为准,或下载到本地测试预览,感谢支持!~
    

    001 服务大数据可视化监管平台 在线预览

    002 水质情况实时监测预警系统 在线预览

    003 联心菜市场数据中心 在线预览

     004 政务大数据共享交换平台 在线预览

    005 可视化监控管理 在线预览

     006 全国疫情实时监控 在线预览

    007 惠民服务平台 在线预览

    008 兰州智慧消防大数据平台 在线预览

     009 某公司大数据监控平台 在线预览

    010 双数智慧公卫-传染病督导平台 在线预览

     011 大数据可视化系统数据分析通用模版 在线预览

     012 某公司大数据展示模版 在线预览

     013 某公司大数据展示模版 在线预览

     014 时实客流量监控中心 在线预览

     015 广西矿产资源大数据监管平台 在线预览

    016 某某科技有限公司-生产数据中心 在线预览

     017 大数据可视化通用素材 在线预览

    018 大数据可视化系统数据分析通用模版 在线预览

    019 大数据可视化系统数据分析通用模版 在线预览

    ​020 大数据通用模版大标题样式 在线预览

    021 大数据可视化系统数据分析通用模版 在线预览

    022 全息档案平台中心 在线预览

     023 医院大数据展示 在线预览

    025 大数据可视化展板通用模板 在线预览

    026 设备环境监测平台 在线预览

    027 全国消费者情况看板 在线预览

    028 移动能耗管理平台 在线预览

    029 南方软件视频平台大屏中心 在线预览

     030 全国图书零售检测中心 在线预览

    031 数据可视化大屏展示系统 在线预览

    ​032 物流云数据看板平台 在线预览

    033 数据可视化页面设计 在线预览

    034 晋城高速综合管控大数据 在线预览

    035 视频监控前后台通用模板 在线预览

    036 门店销售监控平台 在线预览

    037 建筑智慧工地管控 在线预览

    038 无线网络大数据平台 在线预览

    039 湖南省大数据可视化平台 在线预览

     040 Echart图例使用 在线预览

    041 智慧物流服务中心 在线预览

    042 大数据分析系统 在线预览

    043 网络当天实时发稿量 在线预览

    044 车联网平台数据概览 在线预览

    045 信用风险定位系统(银行版) 在线预览

    046 作战指挥室 在线预览

    047 公司名称大数据可视化平台 在线预览

    048 大数据可视化展板通用模板 在线预览

    049 工厂信息监控台 在线预览

    050 大数据可视化展示平台通用模板 在线预览

    051 通用大数据可视化展示平台模板 在线预览

    053 通用大数据可视化展示平台模板 在线预览

    054 公安大数据监控平台 在线预览

    055 物流大数据服务平台 在线预览

    056 大数据统计展示大屏 在线预览

     057 大屏数据统计 在线预览

    058 大屏数据智慧中心统计 在线预览

    059 物联网平台数据统计 在线预览

    060 广西电子商务公共服务平台大数据中心 在线预览

    061 智慧小区大数据分析 在线预览

    062 数据概览演示案例 在线预览

    063 商品运营大数据 在线预览

    064 设备环境监测平台 在线预览

    065 游戏可视化大数据用户案例 在线预览

    066 系统架构可视化监控 在线预览

    067 xx区智慧旅游综合服务平台 在线预览

    068 中国电信厅店营业效能分析 在线预览

     069 智能看板新中心 在线预览

    070 翼兴消防监控 在线预览


    ​ 071 市突发预警平台实时监控 在线预览

    072 大连市突发预警实时监控 在线预览

    073 观测站综合监控平台 在线预览

    074 酒机运行状态 在线预览

    075 数据可视化展示 在线预览

    076 交管大数据人脸识别系统 在线预览

    078 河长制大数据显示平台 在线预览

    079 保税区A仓监控中心 在线预览

    080 北斗车联网大数据平台

    图片

    081 北京市执法信息平台

    图片

    082 南方草木商品交易[超级大屏]

    083 兴福公安综合监管大屏

    084 压力容器大屏

    图片

    085 车辆综合管控平台

    图片

    086 物流大数据展示系统

    087 农业产业大数据指挥仓系统

    图片

    088 HTML大数据综合分析平台模板

    图片

    089 警务综合监控管理平台HTML模板

      090 企业营收大数据统计可视化大屏

     091 ECharts扩展示例自定义视图

     092 酷炫大屏数据可视化模板

    093 办税渠道运行状态大数据监控平台
    

     094 大数据统计展示大屏

     095 交通大数据展示平台

     096 智慧农业大数据展示

     097 程序员数据可视化大屏展示

     098 销售大数据分析

    099 英雄联盟LPL比赛数据可视化

    温馨提示

    目前html源码,已收集完整100套,有需要的小伙伴,自行下载。因文章篇幅大小限制,所有预览图不一一列举,具体详情可前往Gitee、GitHub查看,或者自行下载源码本地查看。如果大家有珍藏的好模板,欢迎大家继续补充贡献!!!

    收集整理不易,如果觉得对你有对您有帮助,您可以点赞评论收藏支持,非常感谢!

    公众号

    更多互联网资源内容请关注公众号
    1️⃣ 回复关键字"电子书",免费获取超全超多计算机经典电子书!
    2️⃣ 回复关键字"简历",更有超1000+份优质简历模板免费送啦!
    3️⃣ 回复关键字"面试",就会获取小编精心整理的面试资料大全!

    打造一个属于自己的小世界,记录折腾不止的人生,留住时光的一抹轨迹
     

     

    展开全文
  • 可视化大屏模板案例 在线演示地址 http://yuanbaoshuju.com/ 页面部分代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" ...

    可视化大屏模板案例

    在线演示地址     http://yuanbaoshuju.com/

    页面部分代码

    <!DOCTYPE html>

    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
            <title>数据分析维度统计</title>
            <link rel="stylesheet" href="css/app.css" />
            <script src="js/echarts.min.js"></script>
            <script src="js/china.js"></script>
        </head>
        
        <body class="biao2">
            <div class="header">
                <h1 class="header-title" style="color: #FFFFFF;">数据分析维度统计</h1>
            </div>
            <div class="wrapper">
                <div class="content">
                    <div class="col col-l">
                        <div class="xpanel-wrapper xpanel-wrapper-40">
                            <div class="xpanel xpanel-l-t Bj">
                                <div class="title">职业测评</div>
                                <div class="xslb" id="xslb" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                        <div class="xpanel-wrapper xpanel-wrapper-60">
                            <div class="xpanel xpanel-l-b Bj">
                                <div class="title">职业人格</div>
                                <div class="tu" id="tu1" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                    </div>
                    <div class="col col-c">
                        <div class="xpanel-wrapper xpanel-wrapper-65">
                            <div class="xpanel DiTu1 Bj">
                                <div class="title">毕业生去向</div>
                                <div class="TuBiao" id="DiTu1" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                        
                        <div class="xpanel-wrapper xpanel-wrapper-35">
                            <div class="xpanel xpanel-c-b Bj">
                                <div class="gzjg">
                                    <div class="title">毕业生工资结构展示</div>
                                    <div class="sdtu" id="sdtu" style="width: 100%;height: 84%;" ></div>
                                </div>
                                <div class="jxqk">
                                    <div class="title">奖项情况统计</div>
                                    <div class="tu" id="tu8" style="width: 100%;height: 84%;" ></div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col col-r">
                        <div class="xpanel-wrapper xpanel-wrapper-25">
                            <div class="xpanel xpanel-r-t Bj">
                                <div class="title">职业能力</div>
                                <div class="xslb" id="tu7" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                        <div class="xpanel-wrapper xpanel-wrapper-30">
                            <div class="xpanel xpanel-r-m Bj">
                                <div class="title">量表测评</div>
                                <div class="tu" id="tu6" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                        <div class="xpanel-wrapper xpanel-wrapper-45">
                            <div class="xpanel xpanel-r-b Bj">
                                <div class="title">就业率及就业范畴展示</div>
                                <div class="tu" id="tu5" style="width: 100%;height: 90%;" ></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        <script type="text/javascript">
            var myDiTu1 = echarts.init(document.getElementById('DiTu1'));
            var myxslb = echarts.init(document.getElementById('xslb'));
            var mysdtu = echarts.init(document.getElementById('sdtu'));
            var mytu4 = echarts.init(document.getElementById('tu1'));
            var mytu5 = echarts.init(document.getElementById('tu5'));
            var mytu6 = echarts.init(document.getElementById('tu6'));
            var mytu7 = echarts.init(document.getElementById('tu7'));
            var mytu8 = echarts.init(document.getElementById('tu8'));

        var colorArr=["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0", "#c29927"];
        var colorAlpha=['rgba(60,170,211,0.1)','rgba(1,203,179,0.1)','rgba(133,230,71,0.1)','rgba(93,92,218,0.1)','rgba(5,197,176,0.1)','rgba(194,153,39,0.1)']
        var option1 = {
              // backgroundColor: "#05224d",
              tooltip: {},
              grid: {
                  top: '8%',
                  left: '4%',
                  right: '4%',
                  bottom: '4%',
                  containLabel: true,
              },
              // legend: {
              //     itemGap: 50,
              //     data: ['社团人数'],
              //     textStyle: {
              //         color: '#f9f9f9',
              //         borderColor: '#fff'
              //     },
              // },
              xAxis: [{
                  type: 'category',
                  boundaryGap: true,
                  axisLine: { //坐标轴轴线相关设置。数学上的x轴
                      show: true,
                      lineStyle: {
                          color: '#0a3256',
                          fontSize: 12,
                      },
                  },
                  axisLabel: { //坐标轴刻度标签的相关设置
                      textStyle: {
                          color: '#d1e6eb',
                          margin: 15,
                          fontSize: 12,
                      },
                  },
                  axisTick: {
                      show: false,
                  },
                  data: ['舞蹈社' ,'书画社','篮球社','乒乓球社','动漫社','歌咏社'],
              }],
              yAxis: [{
                  type: 'value',
                  min: 0,
                  // max: 140,
                  splitNumber: 7,
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: '#0a3256'
                      }
                  },
                  axisLine: {
                      show: false,
                  },
                  axisLabel: {
                      margin: 20,
                      textStyle: {
                          color: '#d1e6eb',
          
                      },
                  },
                  axisTick: {
                      show: false,
                  },
              }],
              series: [{
                
                //   name: '社团人数',
                  type: 'bar',
                  barWidth: 16,
                  tooltip: {
                      show: false
                  },
                   label: {
                       normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                          color: '#fff',
                      },
                      }
                  },
                  itemStyle: {
                          normal: {
                              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                  offset: 0,
                                  color: '#41E1D4' // 0% 处的颜色
                              }, {
                                  offset: 1,
                                  color: '#10A7DB' // 100% 处的颜色
                              }], false),
                              barBorderRadius: [30, 30, 0, 0],
                              shadowBlur: 4,
                          }
                      },
                 data: [200, 382, 102, 267, 186, 315]
              }]
          };
            
        
        var option4 = {
        // backgroundColor: '#101736',
        color:['#4A99FF', '#4BFFFC'], //颜色
        legend: {
            orient:'vertical',
            icon: 'circle', //图例形状
            data: ['车辆数'],
            bottom:35,
            right:40,
            itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔,纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 14,
                color: '#00E4FF',
            },
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                },
            },
            indicator:  [{
            text: ' 活泼',
            max: 6000,
        },
        {
            text: '忧虑',
            max: 5000
        },
        {
            text: '稳定',
            max: 5000
        },
        {
            text: '情感',
            max: 5000,
            //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
        },
        {
            text: '自律',
            max: 5000
        },
        {
            text: '聪慧',
            max: 5000
        }
    ],
            splitArea: { // 坐标轴在 grid 区域中的分隔区域,默认不显示。
                show: true,
                areaStyle: { // 分隔区域的样式设置。
                    color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
            },
            axisLine: { //指向外圈文本的分隔线样式
                lineStyle: {
                    color: '#153269'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#113865', // 分隔线颜色
                    width: 1, // 分隔线线宽
                }
            },
        },
        series: [{
            type: 'radar',
            symbolSize: 8,
            // symbol: 'angle',
            data: [{
            value: [4300, 4700, 3600, 3900, 3800, 4200],
            name: ['车辆数'],
            itemStyle: {
                normal: {
                    lineStyle: {
                        color: '#4A99FF',
                        // shadowColor: '#4A99FF',
                        // shadowBlur: 10,
                    },
                    shadowColor: '#4A99FF',
                    shadowBlur: 10,
                },
            },
            areaStyle: {
                    normal: { // 单项区域填充样式
                        color: {
                            type: 'linear',
                            x: 0, //右
                            y: 0, //下
                            x2: 1, //左
                            y2: 1, //上
                            colorStops: [{
                                offset: 0,
                                color: '#4A99FF'
                            }, {
                                offset: 0.5,
                                color: 'rgba(0,0,0,0)'
                            }, {
                                offset: 1,
                                color: '#4A99FF'
                            }],
                            globalCoord: false
                        },
                        opacity: 1 // 区域透明度
                    }
                }
        },
        
    ],
        }]
    };

      var option7= {
          // backgroundColor: '#00265f',
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                  type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
              }
          },
          legend: {
              data:['强','弱'],
              textStyle: {
                  color: '#fff'
              }
          },
          grid: {
              top: '4%',
              left: '4%',
              right: '4%',
              bottom: '14%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : ['人际交往能力','创造能力 ','适应能力','谈判能力'],
                  splitLine: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#fff',
                      }
                  },
                  axisLabel: {
                      color:'#fff',
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  splitLine: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          color: '#fff',
                      }
                  }
              }
          ],
          series : [
              {
                  name:'强',
                  type:'bar',
                  barWidth: 20,
                  label: {
                      normal: {
                          show: true,
                          formatter: '{c}',
                          position: "top",
                          textStyle: {
                              color: "#fff",
                              fontSize: 14
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                     barBorderRadius: 20, 
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#fccb05'
                      }, {
                          offset: 1,
                          color: '#000'
                      }]),
                      },
                  },
                  data:[120, 132, 101, 134]
              },
              {
                  name:'弱',
                  type:'bar',
                  barWidth: 20,
                  stack: '对比',
                   label: {
                      normal: {
                          show: true,
                          formatter: '{c}',
                          position: "top",
                          textStyle: {
                              color: "#fff",
                              fontSize: 14
                          }
                      }
                  },
                  itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#00C7E1'
                      }, {
                          offset: 1,
                          color: '#000'
                      }]),
                      opacity: 1,
                      barBorderRadius: 12,
                  }
              },
                  data:[220, 182, 191, 234]
              }
          
          ]
      };

    var option6 = {
        // backgroundColor:'#050d19',
        title:{
          textStyle:{
              color:"#6a9cd5",
          },
          // text:'量表测评',
          left:"center",
        },
        
        tooltip: {//鼠标悬浮弹出提示框
            trigger:'axis', //提示框弹出的触发时间,折线图和柱状图为axis
            formatter:"{a} <br/>{b} : {c} "//提示框提示的信息,{a}series内的名字,{b}为块状的名字,{c}为数值
            },
            grid: {//统计图距离边缘的距离
                top: '10%',
                left: '10%',
                right: '10%',
                bottom: '20%'
            },
            xAxis: [{//x轴
                type: 'category',//数据类型为不连续数据
                boundaryGap: false,//坐标轴两边是否留白
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                     show: true,
                     lineStyle: {
                         color: '#233e64' //x轴颜色
                     },
                 },
                 axisLabel: { //坐标轴刻度标签的相关设置
                     textStyle: {
                         color: '#fff',
                     },
                 },
                 axisTick: { show: true,},//刻度点数轴
                data: ['勇猛老虎型', '温和考拉型', '聪明猫头鹰型', '天才可塑龙型'],
            }],
            yAxis: [{//y轴的相关设置
                type: 'value',//y轴数据类型为连续的数据
                min: 0,//y轴上的刻度最小值
                max:140,//y轴上的刻度最大值
                splitNumber: 7,//y轴上的刻度段数
                splitLine: {//y轴上的y轴线条相关设置
                     show: true,
                     lineStyle: {
                         color: '#233e64'
                     }
                 },
                 axisLine: {//y轴的相关设置
                    show: true,
                    lineStyle: {
                        color: '#233e64' //y轴颜色
                    },
                 },
                 axisLabel: {//y轴的标签相关设置
                     textStyle: {
                         color: '#6a9cd5',
                     },
                 },
                 axisTick: { show: true,},  //刻度点数轴
            }],
            series: [{
                name: '潜能测评',
                type: 'line',//统计图类型为折线图
                smooth: true, //是否平滑曲线显示
                symbolSize:0,//数据点的大小,[0,0]//b表示宽度和高度
                lineStyle: {//线条的相关设置
                    normal: {
                        color: "#3deaff"   // 线条颜色
                    }
                },
                areaStyle: { //区域填充样式
                    normal: {
                     //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           { offset: 0,  color: 'rgba(61,234,255, 0.9)'}, 
                           { offset: 0.8,  color: 'rgba(61,234,255, 0)'}
                       ], false),

                     shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                     shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                 }
             },
                data: [90, 105, 84, 125]
            }]
    };

    var option5 = {
        // backgroundColor:"#090e36",
        grid: {
            left: 40,
            top: 50,
            bottom: 30,
            right: 20,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          show:false
        },
        
        polar: {},
        angleAxis: {
            interval: 1,
            type: 'category',
            data: [],
            z: 10,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B4A6B",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                interval: 0,
                show: true,
                color: "#0B4A6B",
                margin: 8,
                fontSize: 16
            },
        },
        radiusAxis: {
            min: 20,
            max: 120,
            interval: 20,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B3E5E",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                formatter: '{value} %',
                show: false,
                padding: [0, 0, 20, 0],
                color: "#0B3E5E",
                fontSize: 16
            },
            splitLine: {
                lineStyle: {
                    color: "#07385e",
                    width: 2,
                    type: "dashed"
                }
            }
        },
        calculable: true,
        series: [ {
            stack: 'a',
            type: 'pie',
            radius: '70%',
            roseType: 'radius',
            zlevel:10,
           startAngle: 100,
           
            label: {
                normal: {
                    textStyle: {
                 color: "rgba(255, 255, 255)"
               },
                    formatter: [ '{b}','{d}%'].join('\n'),
                    rich: {
                        b: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 20
                        },
                        d: {
                            color: '#fff',
                            fontSize: 14,
                            height: 20
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 45,
                    lineStyle: {
                    color: '#aaa'
                        
                    }
                },
                emphasis: {
                    show: false
                }
            },
            data: [{
                    value: 63,
                    name: '会计事务所',
                     itemStyle: {
                         normal: {
                      borderColor: colorArr[0],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: "#41a8f8",
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[0]
                        },
                        }
                },
                {
                    value: 27,
                    name: '律师事务所',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[1],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[1],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[1]
                        },
                        }
                },
                {
                    value: 17,
                    name: '教育',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[2],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[2],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[2]
                        },
                        }
                },
                {
                    value: 13,
                    name: '房地产',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[3],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[3],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[3]
                        },
                        }
                },
                {
                    value: 10,
                    name: '互联网/电子商务',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[4],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[4],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[4]
                        },
                        }
                },
                {
                    value: 16,
                    name: '护理',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[5],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[5],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[5]
                        },
                        }
                }
            ]
        }, ]
    }

            
    var option8 = {
                tooltip: {},
                grid: {
                    top: '10%',
                    left: '4%',
                    right: '4%',
                    bottom: '4%',
                    containLabel: true,
                },
                legend: {
                    itemGap: 50,
                    data: ['学生人数' ],
                    textStyle: {
                        color: '#f9f9f9',
                        borderColor: '#fff'
                    },
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,
                    axisLine: { //坐标轴轴线相关设置。数学上的x轴
                        show: true,
                        lineStyle: {
                            color: '#f9f9f9'
                        },
                    },
                    axisLabel: { //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: '#d1e6eb',
                            margin: 15,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ['三好学生' ,'优秀团干部','社会实践优秀学员','朗诵比赛','舞蹈比赛','歌咏比赛','体操比赛','班级建设比赛'],
                }],
                yAxis: [{
                    type: 'value',
                    min: 0,
                    // max: 140,
                    splitNumber: 7,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#0a3256'
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            color: '#d1e6eb',
            
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    name: '学生人数',
                    type: 'bar',
                    barWidth:18,
                    tooltip: {
                        show: false
                    },
                     label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#41E1D4' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#10A7DB' // 100% 处的颜色
                            }], false),
                            barBorderRadius: [30, 30, 0, 0],
                            shadowBlur: 4,
                        }
                    },
                    data: [200, 382, 102, 267, 186, 315, 316, 416]
                }
                ]
            };        
            
    var option2 = {
        // backgroundColor:"#090e36",
        grid: {
            left: 30,
            top: 60,
            bottom:30,
            right: 10,
            containLabel: true
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          show:false
        },
        
        polar: {},
        angleAxis: {
            interval: 1,
            type: 'category',
            data: [],
            z: 10,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B4A6B",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                interval: 0,
                show: true,
                color: "#0B4A6B",
                margin: 8,
                fontSize: 16
            },
        },
        radiusAxis: {
            min: 20,
            max: 120,
            interval: 20,
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#0B3E5E",
                    width: 1,
                    type: "solid"
                },
            },
            axisLabel: {
                formatter: '{value} %',
                show: false,
                padding: [0, 0, 20, 0],
                color: "#0B3E5E",
                fontSize: 16
            },
            splitLine: {
                lineStyle: {
                    color: "#07385e",
                    width: 2,
                    type: "dashed"
                }
            }
        },
        calculable: true,
        series: [ {
            stack: 'a',
            type: 'pie',
            radius: '70%',
            roseType: 'radius',
            zlevel:10,
           startAngle: 100,
            label: {
                normal: {
                    textStyle: {
                 color: "rgba(255, 255, 255)"
               },
                    formatter: [ '{b}','{d}%'].join('\n'),
                    rich: {
                        b: {
                            color: '#fff',
                            fontSize: 14,
                            lineHeight: 20
                        },
                        d: {
                            color: '#fff',
                            fontSize: 14,
                            height: 20
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 45,
                    lineStyle: {
                    color: '#aaa'
                        
                    }
                },
                emphasis: {
                    show: false
                }
            },
            data: [{
                    value: 8,
                    name: '50k~30k',
                     itemStyle: {
                         normal: {
                      borderColor: colorArr[0],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: "#41a8f8",
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[0]
                        },
                        }
                },
                {
                    value: 17,
                    name: '25k~20k',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[1],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[1],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[1]
                        },
                        }
                },
                {
                    value: 37,
                    name: '19k~15k',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[2],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[2],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[2]
                        },
                        }
                },
                {
                    value: 13,
                    name: '14k~10k',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[3],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[3],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[3]
                        },
                        }
                },
                {
                    value: 10,
                    name: '9k~7k',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[4],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[4],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[4]
                        },
                        }
                },
                {
                    value: 66,
                    name: '6k~3k',
                    itemStyle: {
                        normal: {
                      borderColor: colorArr[5],
                      borderWidth:2,
                      shadowBlur: 20,
                      shadowColor: colorArr[5],
                      shadowOffsetx: 25,
                      shadowOffsety: 20,
                      color:colorAlpha[5]
                        },
                        }
                }
            ]
        }, ]
    }        
    // 地图
        var data = [
              {name:"北京市",value:224540},
                {name:"天津",value:66890},
                {name:"河北",value:51590},
                {name:"山西",value:27860},
                {name:"内蒙古",value:15410},
                {name:"辽宁",value:325920},
                {name:"吉林",value:15730},
                {name:"黑龙江",value:64030},
                {name:"上海",value:78230},
                {name:"江苏",value:571930},
                {name:"浙江",value:311410},
                {name:"安徽",value:20650},
                {name:"福建",value:55790},
                {name:"江西",value:6060},
                {name:"山东",value:741447},
                {name:"河南",value:73670},
                {name:"湖北",value:34080},
                {name:"湖南",value:189790},
                {name:"广东",value:131740},
                {name:"广西",value:2300},
                {name:"海南",value:9370},
                {name:"重庆",value:89630},
                {name:"四川",value:1473222},
                {name:"贵州",value:2650},
                {name:"云南",value:40290},
                {name:"西藏",value:44290},
                {name:"陕西",value:60450},
                {name:"甘肃",value:5620},
                {name:"青海",value:0590},
                {name:"宁夏",value:180},
                {name:"新疆",value:4520},
                {name:"台湾",value:800},
                {name:"香港",value:2000},
                {name:"澳门",value:0},
        ];
        var geoCoordMap = {
             '北京市': [116.4551, 40.2539],
                "天津": [117.4219, 39.4189],
                "河北": [114.4995, 38.1006],
                "山西": [112.3352, 37.9413],
                '内蒙古': [110.3467, 41.4899],
                "辽宁": [123.1238, 42.1216],
                "吉林": [125.8154, 44.2584],
                '黑龙江': [127.9688, 45.368],
                '上海': [121.4648, 31.2891],
                "江苏": [118.8062, 31.9208],
                "浙江": [119.5313, 29.8773],    
                "安徽": [117.29, 32.0581],   
                "福建": [119.4543, 25.9222],
                "江西": [116.0046, 28.6633],
                "山东": [117.1582, 36.8701],
                "河南": [113.4668, 34.6234],
                "湖北": [114.3896, 30.6628],
                "湖南": [113.0823, 28.2568],
                "广东": [113.12244, 23.009505],
                "广西": [108.479, 23.1152],
                "海南": [110.3893, 19.8516],
                "重庆": [108.384366, 30.439702],
                "四川": [103.9526, 30.7617],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "西藏": [91.11, 29.97],
                "陕西": [109.1162, 34.2004],
                "甘肃": [103.5901, 36.3043],
                "青海": [101.4038, 36.8207],
                "宁夏": [106.3586, 38.1775],
                "新疆": [87.9236, 43.5883],
                '台湾': [121.5135,25.0308],
                "香港": [114.08, 22.20],
                '澳门': [113.33,22.13],
           
        };
        
           
            var max = 480, min = 9; // todo 
            var maxSize4Pin = 100, minSize4Pin = 20;
        
          var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        
        var option3 = {
            tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                      if(typeof(params.value)[2] == "undefined"){
                        return params.name + ' : ' + params.value;
                      }else{
                        return params.name + ' : ' + params.value[2];
                      }
                    }
                },
            legend: {
                left: 'left',
                data: ['强', '中', '弱'],
                textStyle: {
                    color: '#ccc'
                }
            },
            
             geo: {
                    map: 'china',
                    show: true,
                    roam: true,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#3a7fd5',
                            borderColor: '#0a53e9',//线
                            shadowColor: '#092f8f',//外发光
                            shadowBlur: 20
                        },
                         emphasis: {
                            areaColor: '#0a2dae',//悬浮区背景
                        }
                    }
                },
            series : [
    {

    symbolSize: 5,
    label: {
        normal: {
            formatter: '{b}',
            position: 'right',
            show: true
        },
        emphasis: {
            show: true
        }
    },
    itemStyle: {
        normal: {
            color: '#fff'
        }
    },
    name: 'light',
    type: 'scatter',
    coordinateSystem: 'geo',
    data: convertData(data),

    },
    {
    type: 'map',
    map: 'china',
    geoIndex: 0,
    aspectScale: 0.75, //长宽比
    showLegendSymbol: false, // 存在legend时显示
    label: {
        normal: {
            show: false
        },
        emphasis: {
            show: false,
            textStyle: {
                color: '#fff'
            }
        }
    },
    roam: true,
    itemStyle: {
        normal: {
            areaColor: '#031525',
            borderColor: '#FFFFFF',
        },
        emphasis: {
            areaColor: '#2B91B7'
        }
    },
    animation: false,
    data: data
    },
    {
    name: 'Top 5',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin',
    symbolSize: [50,50],
    label: {
        normal: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize: 9,
            },
            formatter (value){
                return value.data.value[2]
            }
        }
    },
    itemStyle: {
        normal: {
            color: '#D8BC37', //标志颜色
        }
    },
    data: convertData(data),
    showEffectOn: 'render',
    rippleEffect: {
        brushType: 'stroke'
    },
    hoverAnimation: true,
    zlevel: 1
    },

    ]
        };
        
        
            
            myxslb.setOption(option1);
            mysdtu.setOption(option2);
            myDiTu1.setOption(option3);
            mytu4.setOption(option4);
            mytu5.setOption(option5);
            mytu6.setOption(option6);
            mytu7.setOption(option7);
            mytu8.setOption(option8);
        </script>
    </html>

    展开全文
  • html大数据可视化大屏展示模板,自己工作需要网上整理下载的
  • 数据可视化大屏资料合集(网上收集的几十种样式的html静态页)(可能有重复)
  • 地图数据可视化看板大屏幕模板
  • 大数据可视化模板模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型 ...
  • echarts实现可视化大屏,此代码针对物流类做的一款大屏,希望能帮助到大家
  • 文末源码领取哟。数据大屏展示模板示例目前工程实时统计更新大屏展示模板工程实时更新预览聚合页网址http://shaofeer.gitee.io/bigscreenexamples/源码工程...

    文末源码领取哟。

    数据大屏展示模板示例

    目前工程实时统计更新

    大屏展示模板工程

    实时更新预览聚合页网址

    http://shaofeer.gitee.io/bigscreenexamples/

    源码工程打包下载(持续更新)

    https://gitee.com/shaofeer/BigScreenExamples

    展开全文
  • 闲来无事,打开知乎和某搜索引擎,搜索可视化大屏: 这么火?甚至有些人都用上了“最可怕”这三个字,不是我说,虽然可视化大屏很强,但是你这么说真的就有点过分了。 阿里的datav我知道,一个存在了几年的...

    闲来无事,打开知乎和某搜索引擎,搜索可视化大屏:

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

     

    这么火?甚至有些人都用上了“最可怕”这三个字,不是我说,虽然可视化大屏很强,但是你这么说真的就有点过分了。

    阿里的datav我知道,一个存在了几年的产品了,一直没有什么动静,虽然和阿里云绑定,但是论实用性真的不怎么样,3D效果还可以,别的就算了,阿里的别来和我争论。

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

     

    能做大屏的,既有开源的也有不开源的。

    开源的,可能是程序员和IT人最喜欢的,echarts和grafana这2个是用的比较多的,但是记住我一句话:没有真正的开源,后面的维护需要花费大量的精力。

    如果说老板真的很想做可视化大屏,并且想把这件事情做好,那就试试数据可视化利器FineReport吧,不用会html/js什么的,很简单,对于没有基础的小白很友好。

    而且,同一个大屏看板可以轻松整合ERP/OA/MES等多业务系统的数据,打破数据孤岛,烟囱式的开发也就没有必要了。

    给你看看制作过程:

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

     

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

     

    而且,并不是只能做可视化大屏,报表也能做的很好。

    最后,来看看我整理的模板吧:

     

     

     

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

     

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

    FineBI也能做可视化大屏

     

    整理了很多可视化大屏的模板,还有简单做法,不懂代码也能做

    能看出区别吗

    回复“大屏”,所有的可视化大屏模板+工具都是现成的。

    展开全文
  • 整理了一波数据可视化大屏模板,而且都是B格很高的。下载到本地后,直接运行文件夹中的index.html,即可看到大屏。以下是部分截图,大家根据自己的需要去获取吧。01 智慧物流服务中心主要...
  • ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷,几乎涵盖目前市面上所有常见模板
  • 大数据可视化模板模板框架、动态控件、可视化大数据、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板、html、前端代码、js...
  • 数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息。有12个可视化代码页面。
  • 数据大屏可视化模版(物流大数据服务平台) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 大屏数据可视化模板

    万次阅读 多人点赞 2019-04-30 17:20:52
    本文推荐的几款大屏模板,旨在帮助那些有大屏数据可视化开发需求的同学能够快速上手,把更多的时间、精力放在报表本身的开发上。 该套模板采用CSS3的flex布局,具备良好的适应性,能够适配普通PC及各类大屏的常用...
  • 大数据可视化展板通用模板 运营大数据 物联网平台数据统计大屏 智慧社区内网比对平台 广西电子商务公共服务平台大数据中心 物流大数据服务平台 大数据统计展视大屏 车联网...
  • 各个网页使用到了HTML,CSS,JS等技术,该文件夹中的网页覆盖面较广,包含了很多行业,例如:交通;金融;医疗;气象;政务等等。您也可以在模板的基础上进行美化扩展,达到自己想要的效果
  • 基本上目前能下载到的大数据可视化展示html模板。均是基于echarts的模板大屏展示数据分析
  • ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷,几乎涵盖目前市面上所有常见模板
  • 最近有不少小伙伴问我:有没有数据可视化大屏模板,而且要B格很高的。这不,立马安排。特地给大家准备了20张精美、炫酷而且十分实用的可视化大屏模板,涉及机械、加工、零售、银行、交通等行业。只要你有数据就能够...
  • 前端 | 数据可视化示例模板

    千次阅读 多人点赞 2020-08-04 19:08:23
    效果
  • 大数据可视化展板通用模板 4600万企业数据大屏可视化 (2020-09)厦门10万招聘数据大屏可视化 示例 使用 1,编辑data.py中的SourceData类(或者添加类,补充的话需要编辑app.py增加路由,请参考CorpData / JobData...
  • 包括各个行业的将近30个大屏展示模板,包括各种echars图表,动画效果,全部使用html+css完成,可以很快的集成和修改,有问题可以随时咨询,
  • html/css/js
  • 地图数据可视化看板大屏幕模板,大屏数据可视化动态地图,HTML源码.zip

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,332
精华内容 532
关键字:

可视化大屏html模板