精华内容
下载资源
问答
  • 本资源包含4款精美的大屏数据可视化模板源码,在实际大屏可视化项目中,可快速使用这些模板,提高开发效率。
  • 数据大屏可视化模版(交通数据分析) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 大数据可视化前端模板 大屏模板 数据可视化
  • 展示数据大屏,看板模板数据分析平台
  • 20套大屏模板
  • # 大屏数据可视化 ## 重要声明 本项目所有案例采用的数据均属虚构,切勿当真! ## 项目案例 - 上市公司全景概览 综合使用条形图、柱状图...## 大屏模板 可在这些不同风格的模板基础上快速开始一个可视化大屏项目
  • 数据大屏可视化模版(运营大数据) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 数据大屏可视化模版(生产销售监控) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 数据大屏可视化模版(大数据可视化展板通用模板)源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 地图数据可视化看板大屏幕模板
  • 数据大屏可视化模版(出警活动情况分析) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 数据大屏可视化模版(设备环境监测平台) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 50套电子看板,数据大屏,数据展示模板大屏可视化,大数据分析平台,ui设计模板,浏览地址:https://blog.csdn.net/guxingsheng/article/details/111397817
  • 包含js、css、html,echarts,a total of 20套。注意只有前端,只有前端,只有前端。供大家学习使用。
  • 数据大屏可视化模版(新能源车联网数据概览演示案例) java源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 整理了一波数据可视化大屏模板,而且都是B格很高的。下载到本地后,直接运行文件夹中的index.html,即可看到大屏。以下是部分截图,大家根据自己的需要去获取吧。01 智慧物流服务中心主要...

    整理了一波数据可视化大屏模板,而且都是B格很高的。


    下载到本地后,直接运行文件夹中的index.html,即可看到大屏。

    以下是部分截图,大家根据自己的需要去获取吧。

    01 智慧物流服务中心

    主要图表:柱状图、饼图、地图等。

    02 大数据分析系统

    果真是分析系统,6个分析页面~

    主要图表:柱状图、折线图、饼图、地图等。

    03 地方情况分析

    也是由多个页面组合而成。

    主要图表:柱状图、折线图、饼图、地图等。

    04 可视化监控管理

    地图没显示出来,原因是百度未授权使用地图API,需要注册开发者。

    主要图表:条形图、地图等。

    05 车联网平台数据概览

    右下角的图表类型是象形柱图,小F又涨知识了。

    主要图表:柱状图、饼图、曲线图等。

    06 大屏数据统计

    中间仪表盘等展示空了一块,是不是代码有Bug。

    主要图表:柱状图、饼图、折线图等。

    07 大数据统计展示大屏

    主要图表:柱状图,饼图、折线图、雷达图等。

    08 物流大数据服务平台

    主要图表:飞线地图、折线图、饼图等。

    09 App接入终端情况分析

    左下角的曲线面积图,科技感满满。

    主要图表:饼图、折线图、曲线面积图等。

    10 广西电子商务公共服务平台大数据中心

    地图还是带有发光边缘的。

    主要图表:地图、饼图、折线图等。

    11 医院大数据展示

    主要图表:地图、饼图、曲线图等。

    12 智慧社区内网对比平台

    主要图表:地图、饼图、柱状图、曲线图等。

    13 物联网平台数据统计

    左下角带图标的象形柱图是个亮点。

    主要图表:地图、饼图、柱状图等。

    14 运营大数据

    获取方式

    1. 长按识别下方二维码加我个人微信

    2. 备注可视化免费获取

    长按????二维码+我个人微信
    
    备注可视化领取
    
    展开全文
  • 大数据可视化模板模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型 ...
  • 大屏展示可视化数据分析看板PPT模板.pptx
  • 10张可视化大屏数据分析看板效果设计(可编辑)模板.pptx
  • 领导坐在椅子上注视着超级环绕屏上面的数据分析报表,商务蓝配色,简约扁平化设计,商务大图过渡页,适合公司员工年度工作总结汇报、公司介绍、产品介绍等场景的ppt模板
  • 大屏展示可视化数据分析看板PPT模板.zip
  • 数据大屏可视化模版(设备能效及企业管理平台)源代码,可打开源码查看数据接口用于改成自己适用的数据大屏可视化界面
  • 适应于大数据监控大屏的Axure原型,带动效地图,可变柱状图,可变折线图,可变饼图,全部带动效的。
  • 可视化大屏模板案例 在线演示地址 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>

    展开全文
  • 50套后台管理系统源码,网页模板,数据大屏设计,网站首页,网站设计,大数据分析平台,设计模板(只包含源码,没有psd设计文件) 浏览地址:https://blog.csdn.net/guxingsheng/article/details/117822362
  • 数据概览演示案例 大数据智慧能力- 网络能力 监控大屏 ...生产销售完成情况 统计大屏 ...大数据可视化展板通用模板 ...物联网平台数据统计大屏 ...大数据统计展视大屏 ...车联网平台数据概览- ...大数据分析系统 ...

    数据概览演示案例

     

    大数据智慧能力- 网络能力 监控大屏 

     

    生产销售完成情况 统计大屏

     

    作战指挥室

     大数据可视化展板通用模板

    运营大数据

     

    物联网平台数据统计大屏 

     

    智慧社区内网比对平台

     

     

    广西电子商务公共服务平台大数据中心

     

     

    物流大数据服务平台

     

    大数据统计展视大屏

     

    车联网平台数据概览- 大屏

     

    舆情分析统计大屏

     

    大数据分析系统

     

     

     

     

    智慧物流服务中心 大屏

     

    移动效能管理平台

     

    下载地址:

    大数据可视化平台demo源码文件.7z-互联网文档类资源-CSDN下载 

     

    展开全文
  • 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️⃣ 回复关键字"面试",就会获取小编精心整理的面试资料大全!

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

     

    展开全文
  • 24张最新可视化大屏模板,各行业数据直接套用

    千次阅读 多人点赞 2021-03-30 10:50:45
    接到这个任务后,我第一时间想要的就是利用可视化大屏,给领导和老板看的报表绝对不能像普通的Excel报表一样复杂,核心是要用各种动态图表展示出核心业务数据,比如下面这样的可视化大屏: 怎么样?是不是看...
  • 分享20份大屏可视化模板,轻松实现数据可视化

    千次阅读 多人点赞 2021-03-03 11:46:49
    在这个过程中,我还踩了很多坑,我深深感到开发大屏幕项目并不容易(领导能力要求太高),我也借此与你分享我之前收集的可视化大屏模板,以作为你的参考,并讨论大屏开发中容易踩到的坑。 我知道阿里的datav是已经...
  • 大家好,我是boy哥。最近有不少小伙伴问我:有没有数据可视化大屏模板,而且要B格很高的。这不,立马安排。特地给大家准备了20张精美、炫酷而且十分实用的可视化大屏...02 大数据分析系统果真是分析系统,6个分析页面~

空空如也

空空如也

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

数据分析大屏模板