前言
虽然目前已有很多开源在线制作可视化大屏项目
但有时候为了项目赶工期上线，直接利用现成的可视化大屏html模板，配合开源低代码平台Microi吾码的接口引擎，半小时以内就能做一个成品
先上图
代码也非常简单，利用Microi吾码接口引擎，分分钟套好
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>数据中心可视化平台模板</title><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div id="particles-js" class="main"><div class="main_con"><div class="main_top"><div class="main_top_left"><div class="main_top_left_top"><img src="./images/main_top_left.png"/><div class="main_top_left_top_title">公开数据展示</div><div class="main_top_left_top_con"><div class="main_top_left_top_con_list"><span class="main_top_left_c_l_n main_top_left_c_l_n1">0</span><p>党务公开</p></div><div class="main_top_left_top_con_list"><span class="main_top_left_c_l_n main_top_left_c_l_n2">0</span><p>政务公开</p></div><div class="main_top_left_top_con_list"><span class="main_top_left_c_l_n main_top_left_c_l_n3">0</span><p>财务公开</p></div><div class="main_top_left_top_con_left"><div class="main_top_left_t_c_l_left"><span class="main_top_left_c_l_n main_top_left_c_l_n4">0</span><p>村务公开</p></div><div class="main_top_left_t_c_l_right"><span class="main_top_left_c_l_n main_top_left_c_l_n5">0</span><p>居务公开</p></div> </div><div class="main_top_left_top_con_right main_top_left_top_con_right2"><div class="main_top_left_t_c_r_left"><span class="main_top_left_c_l_n">0</span><p>占位公开</p></div><div class="main_top_left_t_c_r_right"><span class="main_top_left_c_l_n">0</span><p>占位公开</p></div> </div></div></div><div class="main_top_left_top main_top_left_bottom"><img src="./images/main_top_left.png"/><div class="main_top_left_top_title">信息员添加数据展示</div><div id="baseId" class="main_top_left_top_con"></div></div></div><div class="main_top_middle"><div class="main_top_middle_top_title"><img class="title_bg" src="./images/title_bg.png">大数据中心可视化平台模板<a class="title_web" href="" target="blank">管理系统</a><a class="title_admin" href="" target="blank">web网页</a></div><div class="main_top_middle_num_title">公开数量</div><div class="main_top_middle_num"><!-- <div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list6">0</p></div> --><div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list5">0</p></div><div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list4">0</p></div><div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list3">0</p></div><div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list2">0</p></div><div class="main_top_middle_num_list"><img src="./images/center_num.png"><p class="main_top_middle_num_list1">0</p></div></div><div class="main_top_middle_bottom"><div class="main_top_middle_bottom_echarts"><img src="./images/main_top_bottom.png"><div class="main_top_echarts_con"><div class="main_top_echarts_con_title">公开数量占比</div><div id="threeTasksId" class="main_top_echarts_pie"></div></div></div><div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right"><img src="./images/main_top_bottom.png"><div class="main_top_echarts_con"><div class="main_top_echarts_con_title">公开数量占比</div><div id="publicityId" class="main_top_echarts_pie"></div></div></div></div></div><div class="main_top_left main_top_right"><div class="main_top_left_top"><img src="./images/main_top_left.png"/><div class="main_top_left_top_title">数据展示</div><div class="main_top_left_top_con"><div class="main_top_left_top_con_left"><span class="daysData">0</span><p>今日公开</p></div><div class="main_top_left_top_con_right"><span class="weekData">0</span><p>本周公开</p></div><div class="main_top_left_top_con_list"><span class="monthData">0</span><p>本月公开</p></div><div class="main_top_left_top_con_list"><span class="someThing">0</span><p>办事指南</p></div><div class="main_top_left_top_con_list"><span class="policyData">0</span><p>政策解读</p></div></div></div><div class="main_top_left_top main_top_left_bottom"><img src="./images/main_top_left.png"/><div class="main_top_left_top_title">数量类型占比</div><div id="questionId" class="main_top_left_top_con"></div></div></div></div><div class="main_middle"><div class="main_middle_list"><img src="./images/main_middle.png"><div class="main_list_title main_list_title1">X镇</div><span class="main_list_title_num main_list_title_num1">0</span></div><div class="main_middle_list"><img src="./images/main_middle.png"><div class="main_list_title main_list_title2">镇</div><span class="main_list_title_num main_list_title_num2">0</span></div><div class="main_middle_list"><img src="./images/main_middle.png"><div class="main_list_title main_list_title3"></div><span class="main_list_title_num main_list_title_num3">0</span></div><div class="main_middle_list"><img src="./images/main_middle.png"><div class="main_list_title main_list_title4"></div><span class="main_list_title_num main_list_title_num4">0</span></div><div class="main_middle_list"><img src="./images/main_middle.png"><div class="main_list_title main_list_title5"></div><span class="main_list_title_num main_list_title_num5">0</span></div></div><div class="main_bottom"><div class="main_bottom_top"><div class="main_bottom_top_list"><img src="./images/main_bottopm_top1.png"><div class="main_bottom_t_l_title">指南</div><div class="main_bottom_t_l_con"><div class="main_bottom_t_l_main"><ul><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_t_list_title1">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_t_list_time1">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_t_list_title2">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_t_list_time2">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_t_list_title3">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_t_list_time3">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_t_list_title4">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_t_list_time4">2020/08/19</div></div></li></ul></div></div></div><div class="main_bottom_top_list"><img src="./images/main_bottopm_top2.png"><div class="main_bottom_t_l_title">公开占比</div><div id="departmentId" class="main_bottom_t_l_chart"></div></div><div class="main_bottom_top_list"><img src="./images/main_bottopm_top1.png"><div class="main_bottom_t_l_title">政策</div><div class="main_bottom_t_l_con"><div class="main_bottom_t_l_main2"><ul><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_polity_title1">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_polity_title2">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_polity_title3">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li><li><div class="main_bottom_t_l_main_list"><div class="main_bottom_t_list_title main_bottom_polity_title4">大数据中心可视化平台模板</div><div class="main_bottom_t_list_time main_bottom_polity_time1">2020/08/19</div></div></li></ul></div></div></div></div><div class="main_bottom_bottom"><div class="main_bottom_b_left"><img src="./images/main_bottom_bottom.png"><div class="main_bottom_b_title">主要关注占比</div><div id="coverageId" class="main_bottom_b_con"></div></div><div class="main_bottom_b_middle1"><img src="./images/main_bootm_middle.png"><div class="main_bottom_b_title">关注占比</div><div id="contentId" class="main_bottom_b_con main_bottom_b_con2"></div></div><div class="main_bottom_b_middle2"><img src="./images/main_bootm_middle.png"><div class="main_bottom_b_title">发布量</div><div id="publicNumId" class="main_bottom_b_con main_bottom_b_con2"></div></div><div class="main_bottom_b_right"><img src="./images/main_bottom_bottom.png"><div class="main_bottom_b_title">X公开数量</div><div id="yearsNumId" class="main_bottom_b_con"></div></div></div></div></div>
</div>
</body></html>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/dataScoll.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>$(function() {function apiFn() {this.hostname = ""}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 = iif (x > color.length - 1) {x = color.length - 1}var data = {name: charts[i].name,color: color[x] + ')',value: charts[i].num,itemStyle: {normal: {show: true,color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: color[x] + ', 0.3)'}, {offset: 1,color: color[x] + ', 1)'}], false),barBorderRadius: 10},emphasis: {shadowBlur: 15,shadowColor: 'rgba(0, 0, 0, 0.1)'}}}lineY.push(data)}var option= {title: {show: false},grid: {// borderWidth: 1,top: '10%',left: '30%',right: '20%',bottom: '3%'},color: color,yAxis: [{type: 'category',inverse: true,axisTick: {show: false},axisLine: {show: false},axisLabel: {show: false,inside: false},data: charts.name}, {type: 'category',inverse: true,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: true,inside: false,textStyle: {color: '#38E1E1',fontSize: '8',},formatter: function (val,index) {return `${charts[index].num}`}},splitArea: {show: false},splitLine: {show: false},data: charts}],xAxis: {// type: 'value',axisTick: {show: false},axisLine: {show: false},splitLine: {show: false},axisLabel: {show: false}},series: [{name: '',type: 'bar',zlevel: 2,barWidth: '5px',data: lineY,animationDuration: 1500,label: {normal: {color: 'white',show: true,position: [-65, -2],textStyle: {fontSize: 8},formatter: function (a, b) {return a.name}}}}],animationEasing: 'cubicOut'}baseChart.setOption(option)setInterval(function() {baseChart.clear()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 = numArrvar questionChart = echarts.init(document.getElementById('questionId'));var option = {title: {left: 'center'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},color:['#2E8CFF', '#FD9133','#37D2D4','#19CA88','#858FF8'],legend: {itemWidth: 11,// 标志图形的长度itemHeight: 11,// 标志图形的宽度orient: 'vertical',// left: 'right',top: '15%',x: '50%',data: datas,textStyle: { //图例文字的样式color: '#fff',fontSize: 8},},series: [{name: '问题反馈',type: 'pie',radius: '75%',center: ['20%', '50%'],animationDuration: 2500,data: datas,label: {normal: {position: 'inner',show : false}}}]};questionChart.setOption(option)setInterval(function() {questionChart.clear()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 = dataArrvar option = {color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {itemWidth: 12,// 标志图形的长度itemHeight: 12,// 标志图形的宽度orient: 'vertical',// left: 'right',top: '5%',bottom: '50%',x: '45%',textStyle: {color: '#fff',fontSize: 8,},data: data,},series: [// 主要展示层的{radius: ['70%', '90%'],center: ['25%', '50%'],type: 'pie',label: {normal: {position: 'inner',show : false}},name: "公开数量",data: data,},// 边框的设置{radius: ['50%', '55%'],center: ['25%', '50%'],type: 'pie',label: {normal: {show: false},emphasis: {show: false}},labelLine: {normal: {show: false},emphasis: {show: false}},animation: false,tooltip: {show: false},data: [{value: 1,itemStyle: {color: "rgba(250,250,250,0.3)",},}],}]};publicitChart.setOption(option)setInterval(function() {publicitChart.clear()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 = dataArrvar option = {color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133','#F7E270'],tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {itemWidth: 15,// 标志图形的长度itemHeight: 15,// 标志图形的宽度orient: 'vertical',// left: 'right',top: '10%',bottom: '50%',x: '50%',textStyle: {color: '#fff',fontSize: 8,},data: data},series : {name:'三务公开数量',type:'pie',animationDuration: 1500,radius: ['70%', '90%'],center: ['25%', '50%'],roseType : 'radius',label: {normal: {position: 'inner',show : false}},data:data}};threeTasksChart.setOption(option)setInterval(function() {threeTasksChart.clear()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 = dataArrvar option = {color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {itemWidth: 15,// 标志图形的长度itemHeight: 15,// 标志图形的宽度orient: 'vertical',// left: 'right',top: '30%',bottom: '50%',x: '5%',textStyle: {color: '#fff',fontSize: 8,},data: data,},series: [{name: '公开占比',type: 'pie',radius: ['50%', '70%'],center: ['78%', '52%'],labelLine: {normal: {length: 12,lineStyle: {type: 'solid',color: '#0EFCFF'}}},label: {normal: {formatter: (params)=>{return params.name},borderWidth: 0,borderRadius: 4,padding: [0,0],height: 20,fontSize: 8,align: 'center',color: '#0EFCFF',}},data: data},{color: '#0EFCFF',type: 'pie',radius: ['55', '56'],center: ['78%', '52%'],data: [100],label: {show: false}},{type: 'pie',radius: ['25', '26'],center: ['78%', '52%'],data: [100],label: {show: false}}]};departmentChart.setOption(option)setInterval(function() {departmentChart.clear()departmentChart.setOption(option)},12000)},// 办事指南guideFn:function() {$(".main_bottom_t_l_main").jCarouselLite({vertical: true,hoverPause:true,visible: 4,auto: 1000,speed: 500});},// 政策解读policyFn:function() {$(".main_bottom_t_l_main2").jCarouselLite({vertical: true,hoverPause:true,visible: 4,auto: 1000,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++) {indicatorArr.push({name: resArr[i].name,max: 900})numArr.push(resArr[i].value)}var data = [{value: numArr,}]var coverageChart = echarts.init(document.getElementById('coverageId'));var option = {legend: {show: true,icon: "circle",bottom: 30,center: 0,itemWidth: 14,itemHeight: 14,itemGap: 21,orient: "horizontal",data: ['a', 'b'],textStyle: {fontSize: '70%',color: '#0EFCFF'},},radar: {// shape: 'circle',radius: '70%',triggerEvent: true,// type: 'default',name: {textStyle: {color: '#39DCF4',fontSize: '10',// borderRadius: 3,padding: [10, 10]}},nameGap: '2',indicator: indicatorArr,splitArea: {areaStyle: {color: 'rgba(255,255,255,0)'}},axisLine: { //指向外圈文本的分隔线样式lineStyle: {color: 'rgba(255,255,255,.2)'}},splitLine: {lineStyle: {width: 1,color: 'rgba(255,255,255,.2)'}},},series: [{name: 'X区域占比',type: 'radar',animationDuration: 2000,areaStyle: {normal: {color: {type: 'linear',opacity: 1,x: 0,y: 0,x2: 0,y2: 1,color: '#2EEFAD'}}},symbolSize: 0,lineStyle: {normal: {// color: 'rgba(252,211,3, 1)',width: 0}},data: data}]};coverageChart.setOption(option)setInterval(function() {coverageChart.clear()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++) {nameArr.push(resArr[i].name)caiArr.push(resArr[i].value)cunArr.push(resArr[i].value)danArr.push(resArr[i].value)junArr.push(resArr[i].value)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],_data1 = caiArr.reverse(),_data2 = cunArr.reverse(),_data3 = danArr.reverse();_data4 = junArr.reverse();_data5 = zhenArr.reverse();var fomatter_fn = function(v) {return (v.value / _max * 100).toFixed(0) }var _label = {normal: {show: true,position: 'inside',formatter: fomatter_fn,textStyle: {color: '#fff',fontSize: 8}}};var option = {grid: {containLabel: true,left: 0,top: 0,right: 0,bottom: 0},tooltip: {show: true,backgroundColor: '#fff',borderColor: '#ddd',borderWidth: 1,textStyle: {color: '#3c3c3c',fontSize: 16},extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'},xAxis: {splitNumber: spNum,interval: _max / spNum,max: _max,axisLabel: {show: false,formatter: function(v) {var _v = (v / _max * 100).toFixed(0);return _v == 0 ? _v : _v + '%';}},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}},yAxis: [{data: y_data,axisLabel: {fontSize: 8,color: 'rgba(255,255,255,.7)'},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false}}, {show: false,data: y_data,axisLine: {show: false}}],series: [{type: 'bar',name: '财务',stack: '2',label: _label,legendHoverLink: false,barWidth: 7,itemStyle: {normal: {color: '#FD9133'},emphasis: {color: '#FD9133'}},data: _data1}, {type: 'bar',name: '村务',stack: '2',legendHoverLink: false,barWidth: 20,label: _label,itemStyle: {normal: {color: '#2E8CFF'},emphasis: {color: '#2E8CFF'}},data: _data2}, {type: 'bar',stack: '2',name: '党务',legendHoverLink: false,barWidth: 20,label: _label,itemStyle: {normal: {color: '#37D2D4'},emphasis: {color: '#37D2D4'}},data: _data3}, {type: 'bar',stack: '2',name: '居务',legendHoverLink: false,barWidth: 20,label: _label,itemStyle: {normal: {color: '#19CA88'},emphasis: {color: '#19CA88'}},data: _data4}, {type: 'bar',stack: '2',name: '政务',legendHoverLink: false,barWidth: 20,label: _label,itemStyle: {normal: {color: '#0EFCFF'},emphasis: {color: '#0EFCFF'}},data: _data5}]};yearsNumChart.setOption(option)setInterval(function() {yearsNumChart.clear()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++) {nameArr.push(resArr[i].name)caiArr.push(resArr[i].value)cunArr.push(resArr[i].value)danArr.push(resArr[i].value)junArr.push(resArr[i].value)zhenArr.push(resArr[i].value)}var contentChart = echarts.init(document.getElementById('contentId'));var option = {tooltip: {trigger: 'axis'},legend: {x: '35%',y: '0%',data: ["财务","村务","党务","居务","政务"],textStyle: {color: "#fff",fontSize: 8},itemWidth: 10,itemHeight: 10,},calculable: true,xAxis: [{type: 'category',data: nameArr,axisLabel: {interval: 0,textStyle: {fontSize: 8,color: 'rgba(255,255,255,.7)',}},"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},}],yAxis: [{type: 'value',scale: true,name: '单位：%',nameTextStyle: {color: 'rgba(255,255,255,.7)',fontSize: 8},max: 100,min: 0,boundaryGap: [0.2, 0.2],"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},axisLabel: {textStyle: {color: 'rgba(255,255,255,.8)',fontSize: 8// opacity: 0.1,}},splitLine: { //决定是否显示坐标中网格show: true,lineStyle: {color: ['#fff'],opacity: 0.2}},},{type: 'value',scale: true,show: false,// name: "销量额(万元)",nameTextStyle: {color: 'rgba(255,255,255,.2)',},max: 1,min: 0,boundaryGap: [0.2, 0.2],"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},axisLabel: {textStyle: {color: 'rgba(255,255,255,.2)',// opacity: 0.1,}},splitLine: { //决定是否显示坐标中网格show: true,lineStyle: {color: ['#fff'],opacity: 0.2}},}],color: ['#0EFCFF', '#FD9133'],grid: {left: '5%',right: '1%',top: '25%',bottom: '15%'// containLabel: true},series: [{barWidth: '10%',name: '财务',type: 'bar',data: caiArr,},{animationDuration: 2500,barWidth: '20%',name: '村务',type: 'bar',data: cunArr,},{animationDuration: 2500,barWidth: '20%',name: '党务',type: 'bar',data: danArr,},{animationDuration: 2500,barWidth: '20%',name: '居务',type: 'bar',data: junArr,},{animationDuration: 2500,barWidth: '20%',name: '政务',type: 'bar',data: zhenArr,}]};contentChart.setOption(option)setInterval(function() {contentChart.clear()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++) {xunArr.push(resArr[i].value)jingArr.push(resArr[i].value)dateArr.push(resArr[i].name)}var publicNumChart = echarts.init(document.getElementById('publicNumId'));var option = {tooltip: {trigger: 'axis'},legend: {x: '35%',y: '0%',data: ['巡察', '警示'],textStyle: {color: "#fff",fontSize: 8},itemWidth: 10,itemHeight: 10,},calculable: true,xAxis: [{type: 'category',data: dateArr,axisLabel: {interval: 0,textStyle: {fontSize: 8,color: 'rgba(255,255,255,.7)',}},"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},}],yAxis: [{type: 'value',scale: true,name: '单位：%',nameTextStyle: {color: 'rgba(255,255,255,.7)',fontSize: 8},max: 1000,min: 0,boundaryGap: [0.2, 0.2],"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},axisLabel: {textStyle: {color: 'rgba(255,255,255,.8)',fontSize: 8// opacity: 0.1,}},splitLine: { //决定是否显示坐标中网格show: true,lineStyle: {color: ['#fff'],opacity: 0.2}},},{type: 'value',scale: true,show: false,// name: "销量额(万元)",nameTextStyle: {color: 'rgba(255,255,255,.2)',},max: 1,min: 0,boundaryGap: [0.2, 0.2],"axisTick": { //y轴刻度线"show": false},"axisLine": { //y轴"show": false,},axisLabel: {textStyle: {color: 'rgba(255,255,255,.2)',// opacity: 0.1,}},splitLine: { //决定是否显示坐标中网格show: true,lineStyle: {color: ['#fff'],opacity: 0.2}},}],color: ['#2E8CFF', '#38EB70'],grid: {left: '5%',right: '1%',top: '25%',bottom: '15%'// containLabel: true},series: [{animationDuration: 2500,barWidth: '20%',name: '巡察',type: 'bar',data: xunArr,},{barWidth: '20%',name: '警示',type: 'bar',data: jingArr,}],animationEasing: 'cubicOut'};publicNumChart.setOption(option)setInterval(function() {publicNumChart.clear()publicNumChart.setOption(option)},60000)}}var start = new apiFn()start.Init()})
</script>
