0
0

今日分享开源酷炫大数据可视化大屏html模板

前言

虽然目前已有很多开源在线制作可视化大屏项目
但有时候为了项目赶工期上线，直接利用现成的可视化大屏html模板，配合开源低代码平台Microi吾码的接口引擎，半小时以内就能做一个成品

先上图

在这里插入图片描述

代码也非常简单，利用Microi吾码接口引擎，分分钟套好

  1. <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>数据中心可视化平台模板</title><linkrel="stylesheet"href="css/index.css"><linkrel="stylesheet"href="css/reset.css"></head><body><divid="particles-js"class="main"><divclass="main_con"><divclass="main_top"><divclass="main_top_left"><divclass="main_top_left_top"><imgsrc="./images/main_top_left.png"/><divclass="main_top_left_top_title">公开数据展示</div><divclass="main_top_left_top_con"><divclass="main_top_left_top_con_list"><spanclass="main_top_left_c_l_n main_top_left_c_l_n1">0</span><p>党务公开</p></div><divclass="main_top_left_top_con_list"><spanclass="main_top_left_c_l_n main_top_left_c_l_n2">0</span><p>政务公开</p></div><divclass="main_top_left_top_con_list"><spanclass="main_top_left_c_l_n main_top_left_c_l_n3">0</span><p>财务公开</p></div><divclass="main_top_left_top_con_left"><divclass="main_top_left_t_c_l_left"><spanclass="main_top_left_c_l_n main_top_left_c_l_n4">0</span><p>村务公开</p></div><divclass="main_top_left_t_c_l_right"><spanclass="main_top_left_c_l_n main_top_left_c_l_n5">0</span><p>居务公开</p></div></div><divclass="main_top_left_top_con_right main_top_left_top_con_right2"><divclass="main_top_left_t_c_r_left"><spanclass="main_top_left_c_l_n">0</span><p>占位公开</p></div><divclass="main_top_left_t_c_r_right"><spanclass="main_top_left_c_l_n">0</span><p>占位公开</p></div></div></div></div><divclass="main_top_left_top main_top_left_bottom"><imgsrc="./images/main_top_left.png"/><divclass="main_top_left_top_title">信息员添加数据展示</div><divid="baseId"class="main_top_left_top_con"></div></div></div><divclass="main_top_middle"><divclass="main_top_middle_top_title"><imgclass="title_bg"src="./images/title_bg.png">
  2.                     大数据中心可视化平台模板
  3.                     <aclass="title_web"href=""target="blank">管理系统</a><aclass="title_admin"href=""target="blank">web网页</a></div><divclass="main_top_middle_num_title">公开数量</div><divclass="main_top_middle_num"><!-- <div class="main_top_middle_num_list">
  4.                         <img src="./images/center_num.png">
  5.                         <p class="main_top_middle_num_list6">0</p>
  6.                     </div> --><divclass="main_top_middle_num_list"><imgsrc="./images/center_num.png"><pclass="main_top_middle_num_list5">0</p></div><divclass="main_top_middle_num_list"><imgsrc="./images/center_num.png"><pclass="main_top_middle_num_list4">0</p></div><divclass="main_top_middle_num_list"><imgsrc="./images/center_num.png"><pclass="main_top_middle_num_list3">0</p></div><divclass="main_top_middle_num_list"><imgsrc="./images/center_num.png"><pclass="main_top_middle_num_list2">0</p></div><divclass="main_top_middle_num_list"><imgsrc="./images/center_num.png"><pclass="main_top_middle_num_list1">0</p></div></div><divclass="main_top_middle_bottom"><divclass="main_top_middle_bottom_echarts"><imgsrc="./images/main_top_bottom.png"><divclass="main_top_echarts_con"><divclass="main_top_echarts_con_title">公开数量占比</div><divid="threeTasksId"class="main_top_echarts_pie"></div></div></div><divclass="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right"><imgsrc="./images/main_top_bottom.png"><divclass="main_top_echarts_con"><divclass="main_top_echarts_con_title">公开数量占比</div><divid="publicityId"class="main_top_echarts_pie"></div></div></div></div></div><divclass="main_top_left main_top_right"><divclass="main_top_left_top"><imgsrc="./images/main_top_left.png"/><divclass="main_top_left_top_title">数据展示</div><divclass="main_top_left_top_con"><divclass="main_top_left_top_con_left"><spanclass="daysData">0</span><p>今日公开</p></div><divclass="main_top_left_top_con_right"><spanclass="weekData">0</span><p>本周公开</p></div><divclass="main_top_left_top_con_list"><spanclass="monthData">0</span><p>本月公开</p></div><divclass="main_top_left_top_con_list"><spanclass="someThing">0</span><p>办事指南</p></div><divclass="main_top_left_top_con_list"><spanclass="policyData">0</span><p>政策解读</p></div></div></div><divclass="main_top_left_top main_top_left_bottom"><imgsrc="./images/main_top_left.png"/><divclass="main_top_left_top_title">数量类型占比</div><divid="questionId"class="main_top_left_top_con"></div></div></div></div><divclass="main_middle"><divclass="main_middle_list"><imgsrc="./images/main_middle.png"><divclass="main_list_title main_list_title1">X镇</div><spanclass="main_list_title_num main_list_title_num1">0</span></div><divclass="main_middle_list"><imgsrc="./images/main_middle.png"><divclass="main_list_title main_list_title2">镇</div><spanclass="main_list_title_num main_list_title_num2">0</span></div><divclass="main_middle_list"><imgsrc="./images/main_middle.png"><divclass="main_list_title main_list_title3"></div><spanclass="main_list_title_num main_list_title_num3">0</span></div><divclass="main_middle_list"><imgsrc="./images/main_middle.png"><divclass="main_list_title main_list_title4"></div><spanclass="main_list_title_num main_list_title_num4">0</span></div><divclass="main_middle_list"><imgsrc="./images/main_middle.png"><divclass="main_list_title main_list_title5"></div><spanclass="main_list_title_num main_list_title_num5">0</span></div></div><divclass="main_bottom"><divclass="main_bottom_top"><divclass="main_bottom_top_list"><imgsrc="./images/main_bottopm_top1.png"><divclass="main_bottom_t_l_title">指南</div><divclass="main_bottom_t_l_con"><divclass="main_bottom_t_l_main"><ul><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_t_list_title1">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_t_list_time1">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_t_list_title2">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_t_list_time2">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_t_list_title3">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_t_list_time3">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_t_list_title4">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_t_list_time4">2020/08/19</div></div></li></ul></div></div></div><divclass="main_bottom_top_list"><imgsrc="./images/main_bottopm_top2.png"><divclass="main_bottom_t_l_title">公开占比</div><divid="departmentId"class="main_bottom_t_l_chart"></div></div><divclass="main_bottom_top_list"><imgsrc="./images/main_bottopm_top1.png"><divclass="main_bottom_t_l_title">政策</div><divclass="main_bottom_t_l_con"><divclass="main_bottom_t_l_main2"><ul><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_polity_title1">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_polity_title2">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_polity_title3">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><divclass="main_bottom_t_l_main_list"><divclass="main_bottom_t_list_title main_bottom_polity_title4">大数据中心可视化平台模板</div><divclass="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li></ul></div></div></div></div><divclass="main_bottom_bottom"><divclass="main_bottom_b_left"><imgsrc="./images/main_bottom_bottom.png"><divclass="main_bottom_b_title">主要关注占比</div><divid="coverageId"class="main_bottom_b_con"></div></div><divclass="main_bottom_b_middle1"><imgsrc="./images/main_bootm_middle.png"><divclass="main_bottom_b_title">关注占比</div><divid="contentId"class="main_bottom_b_con main_bottom_b_con2"></div></div><divclass="main_bottom_b_middle2"><imgsrc="./images/main_bootm_middle.png"><divclass="main_bottom_b_title">发布量</div><divid="publicNumId"class="main_bottom_b_con main_bottom_b_con2"></div></div><divclass="main_bottom_b_right"><imgsrc="./images/main_bottom_bottom.png"><divclass="main_bottom_b_title">X公开数量</div><divid="yearsNumId"class="main_bottom_b_con"></div></div></div></div></div></div></body></html><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/echarts.min.js"></script><scripttype="text/javascript"src="js/dataScoll.js"></script><scripttype="text/javascript"src="js/digitalScroll.js"></script><scripttype="text/javascript"src="js/jcarousellite.js"></script><scripttype="text/javascript"src="js/particles.min.js"></script><scripttype="text/javascript"src="js/app.js"></script><script>$(function(){functionapiFn(){this.hostname =""}
  7.         apiFn.prototype ={Init:function(){this.findCount()this.otherDataFn()this.baseInfo()this.questionFn()this.publicityFn()this.threeTasksFn()this.departmentFn()this.guideFn()this.policyFn()this.coverageFn()this.yearsNumFn()this.contentFn()this.publicNumFn()setInterval(function(){numInit()},6000)},findCount:function(){},// 其他数据展示otherDataFn:function(){$(".daysData").addClass("counter-value").text("304")$(".weekData").addClass("counter-value").text("2044")$(".monthData").addClass("counter-value").text("909")$(".someThing").addClass("counter-value").text("980")$(".policyData").addClass("counter-value").text("200")},// 基础信息baseInfo:function(){var baseChart = echarts.init(document.getElementById('baseId'));var charts =[{name:"测试1", num:200},{name:"测试2", num:300},{name:"测试3", num:400},{name:"测试4", num:500},{name:"测试5", num:300},]var color =['rgba(100,255,249','rgba(100,255,249','rgba(100,255,249','rgba(100,255,249','rgba(100,255,249']let lineY =[]for(var i =0; i < charts.length; i++){var x = i
  8.                 if(x > color.length -1){
  9.                     x = color.length -1}var data ={
  10.                     name: charts[i].name,
  11.                     color: color[x]+')',
  12.                     value: charts[i].num,
  13.                     itemStyle:{
  14.                     normal:{
  15.                         show:true,
  16.                         color:newecharts.graphic.LinearGradient(0,0,1,0,[{
  17.                         offset:0,
  18.                         color: color[x]+', 0.3)'},{
  19.                         offset:1,
  20.                         color: color[x]+', 1)'}],false),
  21.                         barBorderRadius:10},
  22.                     emphasis:{
  23.                         shadowBlur:15,
  24.                         shadowColor:'rgba(0, 0, 0, 0.1)'}}}
  25.                 lineY.push(data)}var option={
  26.                 title:{
  27.                     show:false},
  28.                 grid:{// borderWidth: 1,
  29.                     top:'10%',
  30.                     left:'30%',
  31.                     right:'20%',
  32.                     bottom:'3%'},
  33.                 color: color,
  34.                 yAxis:[{
  35.                     type:'category',
  36.                     inverse:true,
  37.                     axisTick:{
  38.                     show:false},
  39.                     axisLine:{
  40.                     show:false},
  41.                     axisLabel:{
  42.                     show:false,
  43.                     inside:false},
  44.                     data: charts.name
  45.                 },{
  46.                     type:'category',
  47.                     inverse:true,
  48.                     axisLine:{
  49.                     show:false},
  50.                     axisTick:{
  51.                     show:false},
  52.                     axisLabel:{
  53.                     show:true,
  54.                     inside:false,
  55.                     textStyle:{
  56.                         color:'#38E1E1',
  57.                         fontSize:'8',},formatter:function(val,index){return`${charts[index].num}`}},
  58.                     splitArea:{
  59.                     show:false},
  60.                     splitLine:{
  61.                     show:false},
  62.                     data: charts
  63.                 }],
  64.                 xAxis:{// type: 'value',
  65.                     axisTick:{
  66.                     show:false},
  67.                     axisLine:{
  68.                     show:false},
  69.                     splitLine:{
  70.                     show:false},
  71.                     axisLabel:{
  72.                     show:false}},
  73.                 series:[{
  74.                     name:'',
  75.                     type:'bar',
  76.                     zlevel:2,
  77.                     barWidth:'5px',
  78.                     data: lineY,
  79.                     animationDuration:1500,
  80.                     label:{
  81.                     normal:{
  82.                         color:'white',
  83.                         show:true,
  84.                         position:[-65,-2],
  85.                         textStyle:{
  86.                         fontSize:8},formatter:function(a, b){return a.name
  87.                         }}}}],
  88.                 animationEasing:'cubicOut'}
  89.                 baseChart.setOption(option)setInterval(function(){
  90.                     baseChart.clear()
  91.                     baseChart.setOption(option)},40000)},// 问题反馈类型占比questionFn:function(){var numArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},{name:'测试66', value:800},]// for(var i = 0; i < data.list.length; i++) {//     numArr.push({name: data.list[i].name,value: data.list[i].num})// }var datas = numArr
  92.                 var questionChart = echarts.init(document.getElementById('questionId'));var option ={
  93.                     title:{
  94.                         left:'center'},
  95.                     tooltip:{
  96.                         trigger:'item',
  97.                         formatter:'{a} <br/>{b} : {c} ({d}%)'},
  98.                     color:['#2E8CFF','#FD9133','#37D2D4','#19CA88','#858FF8'],
  99.                     legend:{
  100.                         itemWidth:11,// 标志图形的长度
  101.                         itemHeight:11,// 标志图形的宽度
  102.                         orient:'vertical',// left: 'right',
  103.                         top:'15%',
  104.                         x:'50%',
  105.                         data: datas,
  106.                         textStyle:{//图例文字的样式
  107.                             color:'#fff',
  108.                             fontSize:8},},
  109.                     series:[{
  110.                             name:'问题反馈',
  111.                             type:'pie',
  112.                             radius:'75%',
  113.                             center:['20%','50%'],
  114.                             animationDuration:2500,
  115.                             data: datas,
  116.                             label:{
  117.                                 normal:{
  118.                                     position:'inner',
  119.                                     show :false}}}]};
  120.                 questionChart.setOption(option)setInterval(function(){
  121.                     questionChart.clear()
  122.                     questionChart.setOption(option)},8000)},// 党务公开publicityFn:function(){var dataArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},{name:'测试66', value:800},]// for(var i = 0; i < res.list.length; i++) {//     dataArr.push({name: res.list[i].name, value: res.list[i].num})// }var publicitChart = echarts.init(document.getElementById('publicityId'));var data = dataArr
  123.                 var option ={
  124.                     color:['#38EB70','#F7E16C','#0EFCFF','#FD9133','#4D92F2'],
  125.                     tooltip:{
  126.                         trigger:'item',
  127.                         formatter:'{a} <br/>{b} : {c} ({d}%)'},
  128.                     legend:{
  129.                         itemWidth:12,// 标志图形的长度
  130.                         itemHeight:12,// 标志图形的宽度
  131.                         orient:'vertical',// left: 'right',
  132.                         top:'5%',
  133.                         bottom:'50%',
  134.                         x:'45%',
  135.                         textStyle:{
  136.                             color:'#fff',
  137.                             fontSize:8,},
  138.                         data: data,},
  139.                     series:[// 主要展示层的{
  140.                             radius:['70%','90%'],
  141.                             center:['25%','50%'],
  142.                             type:'pie',
  143.                             label:{
  144.                                 normal:{
  145.                                     position:'inner',
  146.                                     show :false}},
  147.                             name:"公开数量",
  148.                             data: data,},// 边框的设置{
  149.                             radius:['50%','55%'],
  150.                             center:['25%','50%'],
  151.                             type:'pie',
  152.                             label:{
  153.                                 normal:{
  154.                                     show:false},
  155.                                 emphasis:{
  156.                                     show:false}},
  157.                             labelLine:{
  158.                                 normal:{
  159.                                     show:false},
  160.                                 emphasis:{
  161.                                     show:false}},
  162.                             animation:false,
  163.                             tooltip:{
  164.                                 show:false},
  165.                             data:[{
  166.                                 value:1,
  167.                                 itemStyle:{
  168.                                     color:"rgba(250,250,250,0.3)",},}],}]};
  169.                 publicitChart.setOption(option)setInterval(function(){
  170.                     publicitChart.clear()
  171.                     publicitChart.setOption(option)},6000)},// 三务公开数量threeTasksFn:function(){let names ="666666";if(6- names.length >0){for(g =0; g <6- names.length; g++){$(".main_top_middle_num_list"+(6- g)).text('0')}}for(var j =0; j < names.length; j++){$(".main_top_middle_num_list"+(names.length - j)).text(names.substr(j,1))}var dataArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},{name:'测试66', value:800},]for(var i =1; i < dataArr.length; i++){$(".main_top_left_c_l_n"+i).addClass("counter-value").text(dataArr[i].value)}var threeTasksChart = echarts.init(document.getElementById('threeTasksId'));var data = dataArr
  172.                 var option ={
  173.                     color:['#38EB70','#2E8CFF','#0EFCFF','#858FF8','#FD9133','#F7E270'],
  174.                     tooltip :{
  175.                         trigger:'item',
  176.                         formatter:"{a} <br/>{b} : {c} ({d}%)"},
  177.                     legend:{
  178.                         itemWidth:15,// 标志图形的长度
  179.                         itemHeight:15,// 标志图形的宽度
  180.                         orient:'vertical',// left: 'right',
  181.                         top:'10%',
  182.                         bottom:'50%',
  183.                         x:'50%',
  184.                         textStyle:{
  185.                             color:'#fff',
  186.                             fontSize:8,},
  187.                         data: data
  188.                     },
  189.                     series :{
  190.                             name:'三务公开数量',
  191.                             type:'pie',
  192.                             animationDuration:1500,
  193.                             radius:['70%','90%'],
  194.                             center:['25%','50%'],
  195.                             roseType :'radius',
  196.                             label:{
  197.                                 normal:{
  198.                                     position:'inner',
  199.                                     show :false}},
  200.                             data:data
  201.                         }};
  202.                 threeTasksChart.setOption(option)setInterval(function(){
  203.                     threeTasksChart.clear()
  204.                     threeTasksChart.setOption(option)},4000)},// 各部门苏木镇嘎查村公开占比departmentFn:function(){var dataArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},]// 中间滚动数据展示for(var j =0; j < dataArr.length; j++){$(".main_list_title_num"+(j+1)).addClass("counter-value").text(dataArr[j].value)$(".main_list_title"+(j+1)).text(dataArr[j].name)}var departmentChart = echarts.init(document.getElementById('departmentId'));var data = dataArr
  205.                 var option ={
  206.                     color:['#FD9133','#47F6A2','#37D2D4','#3493FF'],
  207.                     tooltip :{
  208.                         trigger:'item',
  209.                         formatter:"{a} <br/>{b} : {c} ({d}%)"},
  210.                     legend:{
  211.                         itemWidth:15,// 标志图形的长度
  212.                         itemHeight:15,// 标志图形的宽度
  213.                         orient:'vertical',// left: 'right',
  214.                         top:'30%',
  215.                         bottom:'50%',
  216.                         x:'5%',
  217.                         textStyle:{
  218.                             color:'#fff',
  219.                             fontSize:8,},
  220.                         data: data,},
  221.                     series:[{
  222.                             name:'公开占比',
  223.                             type:'pie',
  224.                             radius:['50%','70%'],
  225.                             center:['78%','52%'],
  226.                             labelLine:{
  227.                                 normal:{
  228.                                     length:12,
  229.                                     lineStyle:{
  230.                                         type:'solid',
  231.                                         color:'#0EFCFF'}}},
  232.                             label:{
  233.                                 normal:{formatter:(params)=>{return params.name
  234.                                     },
  235.                                     borderWidth:0,
  236.                                     borderRadius:4,
  237.                                     padding:[0,0],
  238.                                     height:20,
  239.                                     fontSize:8,
  240.                                     align:'center',
  241.                                     color:'#0EFCFF',}},
  242.                             data: data
  243.                         },{
  244.                             color:'#0EFCFF',
  245.                             type:'pie',
  246.                             radius:['55','56'],
  247.                             center:['78%','52%'],
  248.                             data:[100],
  249.                             label:{
  250.                                 show:false}},{
  251.                             type:'pie',
  252.                             radius:['25','26'],
  253.                             center:['78%','52%'],
  254.                             data:[100],
  255.                             label:{
  256.                                 show:false}}]};
  257.                 departmentChart.setOption(option)setInterval(function(){
  258.                     departmentChart.clear()
  259.                     departmentChart.setOption(option)},12000)},// 办事指南guideFn:function(){$(".main_bottom_t_l_main").jCarouselLite({
  260.                     vertical:true,
  261.                     hoverPause:true,
  262.                     visible:4,
  263.                     auto:1000,
  264.                     speed:500});},// 政策解读policyFn:function(){$(".main_bottom_t_l_main2").jCarouselLite({
  265.                     vertical:true,
  266.                     hoverPause:true,
  267.                     visible:4,
  268.                     auto:1000,
  269.                     speed:500});},// 主要关注内容区域占比coverageFn:function(){var resArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},{name:'测试66', value:800},]var indicatorArr =[]var numArr =[]for(var i =0; i < resArr.length; i++){
  270.                     indicatorArr.push({name: resArr[i].name,max:900})
  271.                     numArr.push(resArr[i].value)}var data =[{
  272.                         value: numArr,}]var coverageChart = echarts.init(document.getElementById('coverageId'));var option ={
  273.                     legend:{
  274.                         show:true,
  275.                         icon:"circle",
  276.                         bottom:30,
  277.                         center:0,
  278.                         itemWidth:14,
  279.                         itemHeight:14,
  280.                         itemGap:21,
  281.                         orient:"horizontal",
  282.                         data:['a','b'],
  283.                         textStyle:{
  284.                             fontSize:'70%',
  285.                             color:'#0EFCFF'},},
  287.                     radar:{// shape: 'circle',
  288.                         radius:'70%',
  289.                         triggerEvent:true,// type: 'default',
  290.                         name:{
  291.                             textStyle:{
  292.                                 color:'#39DCF4',
  293.                                 fontSize:'10',// borderRadius: 3,
  294.                                 padding:[10,10]}},
  295.                         nameGap:'2',
  296.                         indicator: indicatorArr,
  297.                         splitArea:{
  298.                             areaStyle:{
  299.                                 color:'rgba(255,255,255,0)'}},
  300.                         axisLine:{//指向外圈文本的分隔线样式
  301.                             lineStyle:{
  302.                                 color:'rgba(255,255,255,.2)'}},
  303.                         splitLine:{
  304.                             lineStyle:{
  305.                                 width:1,
  306.                                 color:'rgba(255,255,255,.2)'}},},
  307.                     series:[{
  308.                         name:'X区域占比',
  309.                         type:'radar',
  310.                         animationDuration:2000,
  311.                         areaStyle:{
  312.                             normal:{
  313.                                 color:{
  314.                                     type:'linear',
  315.                                     opacity:1,
  316.                                     x:0,
  317.                                     y:0,
  318.                                     x2:0,
  319.                                     y2:1,
  320.                                     color:'#2EEFAD'}}},
  321.                         symbolSize:0,
  322.                         lineStyle:{
  323.                             normal:{// color: 'rgba(252,211,3, 1)',
  324.                                 width:0}},
  325.                         data: data
  326.                     }]};
  327.                 coverageChart.setOption(option)setInterval(function(){
  328.                     coverageChart.clear()
  329.                     coverageChart.setOption(option)},10000)},// 本年公开数量yearsNumFn:function(){var resArr =[{name:'测试11', value:30},{name:'测试22', value:50},{name:'测试33', value:40},{name:'测试44', value:35},{name:'测试55', value:36},{name:'测试66', value:80},]var nameArr =[]var caiArr =[]var cunArr =[]var danArr =[]var junArr =[]var zhenArr =[]for(var i =0; i < resArr.length; i++){
  330.                     nameArr.push(resArr[i].name)
  331.                     caiArr.push(resArr[i].value)
  332.                     cunArr.push(resArr[i].value)
  333.                     danArr.push(resArr[i].value)
  334.                     junArr.push(resArr[i].value)
  335.                     zhenArr.push(resArr[i].value)}var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));var spNum =5,_max=100;var y_data = nameArr.reverse();var _datamax =[100,100,100,100,100,100,100,100,100,100,100,100],
  336.                     _data1 = caiArr.reverse(),
  337.                     _data2 = cunArr.reverse(),
  338.                     _data3 = danArr.reverse();
  339.                     _data4 = junArr.reverse();
  340.                     _data5 = zhenArr.reverse();varfomatter_fn=function(v){return(v.value / _max *100).toFixed(0)}var _label ={
  341.                     normal:{
  342.                         show:true,
  343.                         position:'inside',
  344.                         formatter: fomatter_fn,
  345.                         textStyle:{
  346.                             color:'#fff',
  347.                             fontSize:8}}};var option ={
  348.                     grid:{
  349.                         containLabel:true,
  350.                         left:0,
  351.                         top:0,
  352.                         right:0,
  353.                         bottom:0},
  354.                     tooltip:{
  355.                         show:true,
  356.                         backgroundColor:'#fff',
  357.                         borderColor:'#ddd',
  358.                         borderWidth:1,
  359.                         textStyle:{
  360.                             color:'#3c3c3c',
  361.                             fontSize:16},
  362.                         extraCssText:'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'},
  363.                     xAxis:{
  364.                         splitNumber: spNum,
  365.                         interval: _max / spNum,
  366.                         max: _max,
  367.                         axisLabel:{
  368.                             show:false,formatter:function(v){var _v =(v / _max *100).toFixed(0);return _v ==0? _v : _v +'%';}},
  369.                         axisLine:{
  370.                             show:false},
  371.                         axisTick:{
  372.                             show:false},
  373.                         splitLine:{
  374.                             show:false}},
  375.                     yAxis:[{
  376.                         data: y_data,
  377.                         axisLabel:{
  378.                             fontSize:8,
  379.                             color:'rgba(255,255,255,.7)'},
  380.                         axisLine:{
  381.                             show:false},
  382.                         axisTick:{
  383.                             show:false},
  384.                         splitLine:{
  385.                             show:false}},{
  386.                         show:false,
  387.                         data: y_data,
  388.                         axisLine:{
  389.                             show:false}}],
  390.                     series:[{
  391.                         type:'bar',
  392.                         name:'财务',
  393.                         stack:'2',
  394.                         label: _label,
  395.                         legendHoverLink:false,
  396.                         barWidth:7,
  397.                         itemStyle:{
  398.                             normal:{
  399.                                 color:'#FD9133'},
  400.                             emphasis:{
  401.                                 color:'#FD9133'}},
  402.                         data: _data1
  403.                     },{
  404.                         type:'bar',
  405.                         name:'村务',
  406.                         stack:'2',
  407.                         legendHoverLink:false,
  408.                         barWidth:20,
  409.                         label: _label,
  410.                         itemStyle:{
  411.                             normal:{
  412.                                 color:'#2E8CFF'},
  413.                             emphasis:{
  414.                                 color:'#2E8CFF'}},
  415.                         data: _data2
  416.                     },{
  417.                         type:'bar',
  418.                         stack:'2',
  419.                         name:'党务',
  420.                         legendHoverLink:false,
  421.                         barWidth:20,
  422.                         label: _label,
  423.                         itemStyle:{
  424.                             normal:{
  425.                                 color:'#37D2D4'},
  426.                             emphasis:{
  427.                                 color:'#37D2D4'}},
  428.                         data: _data3
  429.                     },{
  430.                         type:'bar',
  431.                         stack:'2',
  432.                         name:'居务',
  433.                         legendHoverLink:false,
  434.                         barWidth:20,
  435.                         label: _label,
  436.                         itemStyle:{
  437.                             normal:{
  438.                                 color:'#19CA88'},
  439.                             emphasis:{
  440.                                 color:'#19CA88'}},
  441.                         data: _data4
  442.                     },{
  443.                         type:'bar',
  444.                         stack:'2',
  445.                         name:'政务',
  446.                         legendHoverLink:false,
  447.                         barWidth:20,
  448.                         label: _label,
  449.                         itemStyle:{
  450.                             normal:{
  451.                                 color:'#0EFCFF'},
  452.                             emphasis:{
  453.                                 color:'#0EFCFF'}},
  454.                         data: _data5
  455.                     }]};
  456.                 yearsNumChart.setOption(option)setInterval(function(){
  457.                     yearsNumChart.clear()
  458.                     yearsNumChart.setOption(option)},120000)},// 关注内容区域占比contentFn:function(){var resArr =[{name:'测试11', value:30},{name:'测试22', value:50},{name:'测试55', value:33},{name:'测试66', value:80},]var nameArr =[]var caiArr =[]var cunArr =[]var danArr =[]var junArr =[]var zhenArr =[]for(var i =0; i < resArr.length; i++){
  459.                     nameArr.push(resArr[i].name)
  460.                     caiArr.push(resArr[i].value)
  461.                     cunArr.push(resArr[i].value)
  462.                     danArr.push(resArr[i].value)
  463.                     junArr.push(resArr[i].value)
  464.                     zhenArr.push(resArr[i].value)}var contentChart = echarts.init(document.getElementById('contentId'));var option ={
  465.                     tooltip:{
  466.                         trigger:'axis'},
  467.                     legend:{
  468.                         x:'35%',
  469.                         y:'0%',
  470.                         data:["财务","村务","党务","居务","政务"],
  471.                         textStyle:{
  472.                             color:"#fff",
  473.                             fontSize:8},
  474.                         itemWidth:10,
  475.                         itemHeight:10,},
  476.                     calculable:true,
  477.                     xAxis:[{
  478.                             type:'category',
  479.                             data: nameArr,
  480.                             axisLabel:{
  481.                                 interval:0,
  482.                                 textStyle:{
  483.                                     fontSize:8,
  484.                                     color:'rgba(255,255,255,.7)',}},"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},}],
  485.                     yAxis:[{
  486.                             type:'value',
  487.                             scale:true,
  488.                             name:'单位：%',
  489.                             nameTextStyle:{
  490.                                 color:'rgba(255,255,255,.7)',
  491.                                 fontSize:8},
  492.                             max:100,
  493.                             min:0,
  494.                             boundaryGap:[0.2,0.2],"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},
  495.                             axisLabel:{
  496.                                 textStyle:{
  497.                                     color:'rgba(255,255,255,.8)',
  498.                                     fontSize:8// opacity: 0.1,}},
  499.                             splitLine:{//决定是否显示坐标中网格
  500.                                 show:true,
  501.                                 lineStyle:{
  502.                                     color:['#fff'],
  503.                                     opacity:0.2}},},{
  504.                             type:'value',
  505.                             scale:true,
  506.                             show:false,// name: "销量额(万元)",
  507.                             nameTextStyle:{
  508.                                 color:'rgba(255,255,255,.2)',},
  509.                             max:1,
  510.                             min:0,
  511.                             boundaryGap:[0.2,0.2],"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},
  512.                             axisLabel:{
  513.                                 textStyle:{
  514.                                     color:'rgba(255,255,255,.2)',// opacity: 0.1,}},
  515.                             splitLine:{//决定是否显示坐标中网格
  516.                                 show:true,
  517.                                 lineStyle:{
  518.                                     color:['#fff'],
  519.                                     opacity:0.2}},}],
  520.                     color:['#0EFCFF','#FD9133'],
  521.                     grid:{
  522.                         left:'5%',
  523.                         right:'1%',
  524.                         top:'25%',
  525.                         bottom:'15%'// containLabel: true},
  526.                     series:[{
  527.                             barWidth:'10%',
  528.                             name:'财务',
  529.                             type:'bar',
  530.                             data: caiArr,},{
  531.                             animationDuration:2500,
  532.                             barWidth:'20%',
  533.                             name:'村务',
  534.                             type:'bar',
  535.                             data: cunArr,},{
  536.                             animationDuration:2500,
  537.                             barWidth:'20%',
  538.                             name:'党务',
  539.                             type:'bar',
  540.                             data: danArr,},{
  541.                             animationDuration:2500,
  542.                             barWidth:'20%',
  543.                             name:'居务',
  544.                             type:'bar',
  545.                             data: junArr,},{
  546.                             animationDuration:2500,
  547.                             barWidth:'20%',
  548.                             name:'政务',
  549.                             type:'bar',
  550.                             data: zhenArr,}]};
  551.                 contentChart.setOption(option)setInterval(function(){
  552.                     contentChart.clear()
  553.                     contentChart.setOption(option)},90000)},// 巡察publicNumFn:function(){var resArr =[{name:'测试11', value:300},{name:'测试22', value:500},{name:'测试33', value:400},{name:'测试44', value:350},{name:'测试55', value:363},{name:'测试66', value:800},]var xunArr =[]var jingArr =[]var dateArr =[]for(var i =0; i < resArr.length; i++){
  554.                     xunArr.push(resArr[i].value)
  555.                     jingArr.push(resArr[i].value)
  556.                     dateArr.push(resArr[i].name)}var publicNumChart = echarts.init(document.getElementById('publicNumId'));var option ={
  557.                     tooltip:{
  558.                         trigger:'axis'},
  559.                     legend:{
  560.                         x:'35%',
  561.                         y:'0%',
  562.                         data:['巡察','警示'],
  563.                         textStyle:{
  564.                             color:"#fff",
  565.                             fontSize:8},
  566.                         itemWidth:10,
  567.                         itemHeight:10,},
  568.                     calculable:true,
  569.                     xAxis:[{
  570.                             type:'category',
  571.                             data: dateArr,
  572.                             axisLabel:{
  573.                                 interval:0,
  574.                                 textStyle:{
  575.                                     fontSize:8,
  576.                                     color:'rgba(255,255,255,.7)',}},"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},}],
  577.                     yAxis:[{
  578.                             type:'value',
  579.                             scale:true,
  580.                             name:'单位：%',
  581.                             nameTextStyle:{
  582.                                 color:'rgba(255,255,255,.7)',
  583.                                 fontSize:8},
  584.                             max:1000,
  585.                             min:0,
  586.                             boundaryGap:[0.2,0.2],"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},
  587.                             axisLabel:{
  588.                                 textStyle:{
  589.                                     color:'rgba(255,255,255,.8)',
  590.                                     fontSize:8// opacity: 0.1,}},
  591.                             splitLine:{//决定是否显示坐标中网格
  592.                                 show:true,
  593.                                 lineStyle:{
  594.                                     color:['#fff'],
  595.                                     opacity:0.2}},},{
  596.                             type:'value',
  597.                             scale:true,
  598.                             show:false,// name: "销量额(万元)",
  599.                             nameTextStyle:{
  600.                                 color:'rgba(255,255,255,.2)',},
  601.                             max:1,
  602.                             min:0,
  603.                             boundaryGap:[0.2,0.2],"axisTick":{//y轴刻度线"show":false},"axisLine":{//y轴"show":false,},
  604.                             axisLabel:{
  605.                                 textStyle:{
  606.                                     color:'rgba(255,255,255,.2)',// opacity: 0.1,}},
  607.                             splitLine:{//决定是否显示坐标中网格
  608.                                 show:true,
  609.                                 lineStyle:{
  610.                                     color:['#fff'],
  611.                                     opacity:0.2}},}],
  612.                     color:['#2E8CFF','#38EB70'],
  613.                     grid:{
  614.                         left:'5%',
  615.                         right:'1%',
  616.                         top:'25%',
  617.                         bottom:'15%'// containLabel: true},
  618.                     series:[{
  619.                             animationDuration:2500,
  620.                             barWidth:'20%',
  621.                             name:'巡察',
  622.                             type:'bar',
  623.                             data: xunArr,},{
  624.                             barWidth:'20%',
  625.                             name:'警示',
  626.                             type:'bar',
  627.                             data: jingArr,}],
  628.                     animationEasing:'cubicOut'};
  629.                 publicNumChart.setOption(option)setInterval(function(){
  630.                     publicNumChart.clear()
  631.                     publicNumChart.setOption(option)},60000)}}var start =newapiFn()
  632.         start.Init()})</script>

完整源码见资源绑定

标签： 开源 信息可视化 html
本文转载自: https://blog.csdn.net/qq973702/article/details/143812634
版权归原作者 Microi吾码 所有， 如有侵权，请联系我们删除。
登录后发布评论

“今日分享开源酷炫大数据可视化大屏html模板”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。