调整样式

This commit is contained in:
liuwu 2024-03-05 10:35:52 +08:00
parent 4169a7e4ab
commit 34b1630def
1 changed files with 59 additions and 51 deletions

View File

@ -44,22 +44,22 @@
</div> </div>
<div class="main_center"> <div class="main_center">
<div class="main_center_item"> <div class="main_center_item">
<div class="data1" onclick="openTab(5,'季度考核指标')"> <div class="data1" style="top:6%" onclick="openTab(5,'季度考核指标')">
<span style="font-weight:900;font-size: 18px" >季度考核情况</span> <span style="font-weight:900;font-size: 18px;" >季度考核情况</span>
<p class="all_num">达标分0分</p> <p class="all_num">达标分0分</p>
<p class="curr_num">当前分数0分</p> <p class="curr_num">当前分数0分</p>
</div> </div>
<div class="data2" onclick="openTab(5,'党风廉政建设')"> <div class="data2" style="top:6%" onclick="openTab(5,'党风廉政建设')">
<span style="font-weight:900;font-size: 18px" >党风廉政建设</span> <span style="font-weight:900;font-size: 18px" >党风廉政建设</span>
<p class="all_num">达标分0分</p> <p class="all_num">达标分0分</p>
<p class="curr_num">当前分数0分</p> <p class="curr_num">当前分数0分</p>
</div> </div>
<div class="data3" onclick="openTab(5,'党务及意识形态')"> <div class="data3" style="top:2%" onclick="openTab(5,'党务及意识形态')">
<span style="font-weight:900;font-size: 18px" >党务及意识形态</span> <span style="font-weight:900;font-size: 18px" >党务及意识形态</span>
<p class="all_num">达标分0分</p> <p class="all_num">达标分0分</p>
<p class="curr_num">当前分数0分</p> <p class="curr_num">当前分数0分</p>
</div> </div>
<div class="data4" onclick="openTab(5,'日常考核指标')"> <div class="data4" style="top:24%" onclick="openTab(5,'日常考核指标')">
<span style="font-weight:900;font-size: 18px" >日常考核情况</span> <span style="font-weight:900;font-size: 18px" >日常考核情况</span>
<p class="all_num">达标分0分</p> <p class="all_num">达标分0分</p>
<p class="curr_num">当前分数0分</p> <p class="curr_num">当前分数0分</p>
@ -212,10 +212,10 @@
formatter: '{b}:{c}分' formatter: '{b}:{c}分'
}, },
grid: { grid: {
top: "15%", top: "5%",
left: '5%', left: '1%',
right: '5%', right: '1%',
bottom: '5%', bottom: '15%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -226,8 +226,7 @@
} }
}, },
yAxis: { yAxis: {
type: 'value', show:false
name: '',
}, },
series: [ series: [
{ {
@ -284,6 +283,7 @@
orient: 'vertical', orient: 'vertical',
top: 'center', top: 'center',
left: '0', left: '0',
top:'-20',
textStyle: { textStyle: {
color: "#ffffff" color: "#ffffff"
}, },
@ -350,19 +350,18 @@
}, },
}, },
grid: { grid: {
top: "15%", top: "8%",
left: '5%', left: '1%',
right: '5%', right: '1%',
bottom: '5%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: [ yAxis: [
{ {
type: 'category', type: 'category',
data: xData, data: xData,
axisLabel:{ axisLabel:{
interval:0, interval:0,
rotate:15,
color:'#FFFFFF' color:'#FFFFFF'
}, },
axisPointer: { axisPointer: {
@ -370,18 +369,19 @@
} }
} }
], ],
yAxis: { xAxis: {
type: 'value', show:false
name: '', // type: 'value',
axisLabel:{ // name: '',
color:'#fff' // axisLabel:{
}, // color:'#fff'
label: { // },
show: true, // label: {
position: 'top', // show: true,
color: '#FFFFFF', // position: 'top',
formatter: '{c}分' // color: '#FFFFFF',
}, // formatter: '{c}分'
// },
}, },
series: [ series: [
{ {
@ -402,7 +402,7 @@
data: sData1, data: sData1,
label: { label: {
show: true, show: true,
position: 'top', position: 'right',
color: '#FFFFFF', color: '#FFFFFF',
formatter: '{c}分' formatter: '{c}分'
}, },
@ -425,7 +425,7 @@
data: sData2, data: sData2,
label: { label: {
show: true, show: true,
position: 'top', position: 'right',
color: '#FFFFFF', color: '#FFFFFF',
formatter: '{c}分' formatter: '{c}分'
}, },
@ -463,9 +463,9 @@
}, },
grid: { grid: {
top: "0%", top: "0%",
left: '0%', left: '1%',
right: '10%', right: '5%',
bottom: '5%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -483,12 +483,19 @@
name: '', name: '',
type: 'bar', type: 'bar',
data: _sData, data: _sData,
showBackground: true,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#0096FF'}, {offset: 0, color: '#0096FF'},
{offset: 1, color: '#66F4FF'} {offset: 1, color: '#66F4FF'}
]) ])
}, },
// itemStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {offset: 0, color: '#0096FF'},
// {offset: 1, color: '#66F4FF'}
// ])
// },
label: { label: {
show: true, show: true,
formatter: '{c}分', formatter: '{c}分',
@ -528,39 +535,40 @@
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
xAxis: { yAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: _xData, data: _xData,
axisLabel:{ axisLabel:{
interval:0, interval:0,
rotate:15, // rotate:15,
color:'#FFFFFF' color:'#FFFFFF'
}, },
}, },
yAxis: { xAxis: {
type: 'value', show:false
axisLabel:{
color:'#fff'
}
}, },
grid: { grid: {
top: "15%", top: "5%",
left: '5%', left: '1%',
right: '5%', right: '5%',
bottom: '5%', bottom: '1%',
containLabel: true containLabel: true
}, },
series: [ series: [
{ {
data: _sData, data: _sData,
type: 'line', type: 'bar',
areaStyle: { showBackground: true,
color:'#02abe0' itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#0096FF'},
{offset: 1, color: '#66F4FF'}
])
}, },
label: { label: {
show: true, show: true,
position: 'top', position: 'right',
color: '#FFFFFF', color: '#FFFFFF',
formatter: '{c}分' formatter: '{c}分'
}, },
@ -628,13 +636,13 @@
grd.addColorStop(0, "#e08d03"); grd.addColorStop(0, "#e08d03");
grd.addColorStop(1, "#2e6a5c"); grd.addColorStop(1, "#2e6a5c");
ctx.strokeStyle = grd; ctx.strokeStyle = grd;
ctx.moveTo(w / 5 * 2, h / 2 ) ctx.moveTo(w / 5 * 2, h)
ctx.quadraticCurveTo(w / 3 * 1.2, h / 4 * 1.4, w / 3 * 1.4, h / 5); ctx.quadraticCurveTo(w / 3 * 1.2, h / 3 * 1.4, w / 3 * 1.4, h / 3);
ctx.stroke(); ctx.stroke();
// 绘制第三条曲线上的圆光效果 // 绘制第三条曲线上的圆光效果
ctx.beginPath() ctx.beginPath()
ctx.moveTo(w / 3 * 1.4, h / 5) ctx.moveTo(w / 3 * 1.4, h / 5)
ctx.arc(w / 3 * 1.4, h / 5, 5, 0, Math.PI * 2) ctx.arc(w / 3 * 1.4, h / 3, 5, 0, Math.PI * 2)
ctx.fill() ctx.fill()
ctx.restore() ctx.restore()
ctx.save() ctx.save()