前言
虽然目前已有很多开源在线制作可视化大屏项目
但有时候为了项目赶工期上线，直接利用现成的可视化大屏html模板，配合开源低代码平台Microi吾码的接口引擎，半小时以内就能做一个成品
先上图
代码也非常简单，利用Microi吾码接口引擎，分分钟套好
<!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">
大数据中心可视化平台模板
<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">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list6">0</p>
</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 =""}
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
if(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:newecharts.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 = numArr
var 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 = dataArr
var 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 = dataArr
var 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 = dataArr
var 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();varfomatter_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 =newapiFn()
start.Init()})</script>
完整源码见资源绑定
本文转载自: https://blog.csdn.net/qq973702/article/details/143812634
版权归原作者 Microi吾码 所有， 如有侵权，请联系我们删除。
版权归原作者 Microi吾码 所有， 如有侵权，请联系我们删除。