|
Server : Apache System : Linux cloud.heroica.com.br 4.18.0-553.36.1.el8_10.x86_64 #1 SMP Wed Jan 22 03:07:54 EST 2025 x86_64 User : farolpborg ( 1053) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/farolpborg/public_html/ |
Upload File : |
<?
include "_configs/pgsql_conexao.php";
$SubPagina = "";
$Pagina = "Farol Bússola";
$PaginaPai = "";
include "_includes/header.php";
$SlugPg = remove_acentos($Pagina);
mysqli_query($conecta, "UPDATE estaticas SET visitas = visitas + 1 WHERE slug = '$SlugPg'");
$resest = mysqli_fetch_object(mysqli_query($conecta, "SELECT * FROM estaticas WHERE slug = '$SlugPg'"));
include "_includes/breadcrumbs.php";
include "_includes/farol-bussola.php";
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<section class="about-area2 section-padding section-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
<div class="about-caption about-caption1">
<div class="section-tittle">
<p><strong>João Pessoa (JPA)</strong>, capital da Paraíba, é um polo estratégico no Nordeste que passa por transformações econômicas, fiscais e sociais. Este primeiro <strong>Farol Bússola</strong>, do <strong>Farol de Desenvolvimento da Paraíba</strong>, integra dados desses cenários para orientar reflexões e decisões.</p>
<p>A economia estadual cresce de forma moderada, impulsionada pelo comércio e turismo, com geração de empregos e dinamismo em setores como hotelaria. Apesar de avanços na formalização, o mercado de trabalho ainda sofre com informalidade e subutilização.</p>
<p>Na área fiscal, Paraíba e João Pessoa mantêm certo equilíbrio nas contas, mas enfrentam pressões por mais investimentos. O uso crescente de crédito exige atenção à sustentabilidade e à arrecadação.</p>
<p>Segundo o Ranking de Competitividade (CLP, 2024), a Paraíba é a mais competitiva do NE e ocupa a 12ª posição nacional, com destaque em inovação e segurança. João Pessoa ficou em 4º lugar no NE, com avanços em saneamento, capital humano e gestão pública.</p>
<p>As exportações paraibanas, focadas em produtos agrícolas e industriais, favorecem a balança comercial, mas dependem do cenário global. No social, houve progressos na educação e saúde, embora desafios persistam, como o alto custo da cesta básica.</p>
<p>O <strong>Farol de Desenvolvimento da Paraíba</strong> lançará boletins mensais com análises e propostas para o crescimento sustentável do estado na era da Quarta Revolução Industrial.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="form-contact pt-5 pb-0">
<div class="container">
<div class="row justify-content-between text-center pt-5">
<div class="col-8 d-flex flex-wrap gap-2">
<a href="#indicadores" class="nav-link red-bg filter-pill flex-fill d-flex align-items-center justify-content-center rounded px-2 py-0 text-uppercase active" data-bs-toggle="tab">Indicadores-chave</a>
<a href="#economico" class="nav-link bg-secondary filter-pill flex-fill d-flex align-items-center justify-content-center rounded px-2 py-0 text-uppercase" data-bs-toggle="tab">Econômico</a>
<a href="#fiscal" class="nav-link bg-secondary filter-pill flex-fill d-flex align-items-center justify-content-center rounded px-2 py-0 text-uppercase" data-bs-toggle="tab">Fiscal e Internacional</a>
<a href="#social" class="nav-link bg-secondary filter-pill flex-fill d-flex align-items-center justify-content-center rounded px-2 py-0 text-uppercase" data-bs-toggle="tab">Social</a>
</div>
<div class="col-3 d-flex align-items-center">
<div for="periodoSelect" class="me-3 mb-0 h5">Período:</div>
<select class="form-control form-select bg-light w-100 rounded" id="periodoSelect">
<option selected>Janeiro a Março 2025</option>
<option>Jul-dez 2025</option>
<option>2024 completo</option>
</select>
</div>
</div>
</div>
</section>
<section class="tab-content">
<div class="tab-pane fade show active" id="indicadores">
<div class="about-area2 section-padding pt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 mb-5 pb-5">
<div class="section-tittle">
<p class="mb-0">O Farol Bússola traz uma análise dos principais indicadores de João Pessoa e da Paraíba, destacando o papel central da capital no desenvolvimento econômico estadual. Com sua longa história desde 1585, João Pessoa concentra a maior parte das atividades econômicas e dos empregos da Paraíba. O boletim analisa dez indicadores-chave, como PIB, população, educação, saúde, mobilidade e mercado de trabalho, oferecendo uma visão clara da importância e dos desafios socioeconômicos da cidade.</p>
</div>
</div>
</div>
<div class="row justify-content-center px-3">
<div class="col-md-10">
<div class="row pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawPopulationChart);
function drawPopulationChart() {
var data = google.visualization.arrayToDataTable([
['', 'População', {role: 'annotation'}, {role: 'style'}],
['João Pessoa', 888679, '888.679 hab. (21,8%)', '#3D7F75'],
['Paraíba', 4059905, '4.059.905 hab. (78,2%)', '#f0f0f0']
]);
var options = {
backgroundColor: 'transparent',
// title: 'POPULAÇÃO ESTIMADA',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#3D7F75'
},
chartArea: {
width: '80%',
height: '70%',
backgroundColor: 'transparent'
},
bars: 'horizontal',
legend: { position: 'none' },
colors: ['#3D7F75', '#f0f0f0'],
hAxis: {
textStyle: {
fontSize: 14,
},
minValue: 0,
gridlines: {color: 'rgba(103,215,199,0.7)'},
textPosition: 'none'
},
vAxis: {
textStyle: {
fontSize: 14,
color: '#333'
}
},
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 14,
color: '#3D7F75',
bold: true
}
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.charts.Bar(document.getElementById('populacao_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<style>
.chart-card { background-color: rgba(103,215,199,0.2) !important; border: 3px solid #67D7C7; }
.chart-container { width: 100%; height: 200px; position: relative; }
.chart-legend { margin-top: 15px; font-size: 13px; font-weight: 800 !important; color: #555 !important; background: rgba(255,255,255,0.2); border-radius: 6px; padding: 20px 20px 6px 20px; border: 1px solid rgba(255,255,255,0.7); }
.chart-legend span { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; }
.jp-color { background: #3D7F75; }
.pb-color { background: #f0f0f0; border: 1px solid #333; }
.pt-45 { padding-top: 2rem !important; }
</style>
<div class="chart-card px-5 py-4 pt-45 text-center rounded">
<h5 class="mb-4" style="color:#3D7F75">População estimada</h5>
<div class="chart-container" style="height: 193px !important" id="populacao_chart"></div>
<div class="chart-legend">
<p><span class="jp-color"></span> João Pessoa: 888.679 habitantes (21,8%)</p>
<p><span class="pb-color"></span> Paraíba: 4.059.905 habitantes (78,2%)</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
<p class="p-4 ps-0">Esse quadro apresenta dados econômicos e sociais relevantes de João Pessoa e da Paraíba, como também, calcula a participação da capital paraibana na economia estadual na atualidade.É possível observar claramente no Quadro 1 que o primeiro indicador-chave mostra que João Pessoa concentra 21,8% da população estimada da Paraíba, revelando seu peso demográfico em relação ao estado.</p>
</div>
<div class="col-md-6 pe-0">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawPIBChart);
function drawPIBChart() {
var data = google.visualization.arrayToDataTable([
['Local', 'PIB (R$ bilhões)',
{role: 'annotation', type: 'string'},
{role: 'style', type: 'string'},
{role: 'tooltip', type: 'string', p: {html: true}}],
['João Pessoa', 20.7, 'R$ 20,7 bi\n(29,5%)', '#484743',
'<div style="padding:10px;min-width:150px"><strong>João Pessoa</strong><br>PIB Nominal: <b>R$ 20,7 bilhões</b><br>Participação: <b style="color:#484743">29,5%</b> do PIB estadual</div>'],
['Paraíba', 70.3, 'R$ 70,3 bi\n(70,5%)', '#FF625F',
'<div style="padding:10px;min-width:150px"><strong>Paraíba</strong><br>PIB Nominal: <b>R$ 70,3 bilhões</b><br>Participação: <b style="color:#f0f0f0">70,5%</b> do PIB estadual</div>']
]);
var options = {
backgroundColor: 'transparent',
// title: 'PIB NOMINAL (EM R$ BILHÕES)',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
chartArea: {
width: '80%',
height: '80%',
backgroundColor: 'transparent'
},
bar: {groupWidth: '50%'},
legend: 'none',
// colors: ['#FF625F', '#f0f0f0'],
hAxis: {
textStyle: {
color: '#333',
fontSize: 14
}
},
vAxis: {
minValue: 0,
gridlines: {
color: 'rgba(240,240,240,0.2)'
},
textPosition: 'none'
},
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 12,
color: '#f0f0f0',
bold: true
}
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('pib_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card2 { background-color: rgba(255,98,95,0.2); border: 3px solid #FF625F !important; }
.chart-container { width: 100%; height: 200px; position: relative; }
.jp-color2 { background: #484743; }
.pb-color2 { background: #FF625F; }
</style>
<div class="chart-card2 px-5 py-4 pt-45 text-center rounded">
<h5>PIB Nominal (em R$ bilhões)</h5>
<div class="chart-container mb-4" id="pib_chart"></div>
<div class="chart-legend">
<p><span class="jp-color2"></span> <strong>João Pessoa:</strong> R$ 20,7 bilhões (29,5%)</p>
<p><span class="pb-color2"></span> <strong>Paraíba:</strong> R$ 70,3 bilhões (70,5%)</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
<p class="p-4 ps-0">O PIB nominal da capital paraibana representa 29,5% do PIB estadual, refletindo sua força nos setores de comércio, serviços, indústria e turismo. Isso evidencia a importância de JPA como principal motor econômico da PB. Este desempenho econômico é essencial para o crescimento do estado, particularmente em momentos de mudanças estruturais e desafios econômicos.</p>
</div>
</div>
</div>
<div class="row px-3">
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawStudentsChart);
function drawStudentsChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 110000, 'JPA: 110.000 estudantes (40,7%)'],
['Paraíba', 270000, 'PB: 270.000 estudantes (59,3%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'ESTUDANTES NO ENSINO SUPERIOR',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#484743' },
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.PieChart(document.getElementById('students_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#484743';
centerText.textContent = '40,7%';
var chartContainer = document.getElementById('students_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card3 { background-color: #FFC857 !important; }
.jp-color3 { background-color: #484743 !important; }
</style>
<div class="chart-card3 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px">Nº de estudantes no ensino superior</h5>
<div class="chart-container" id="students_chart"></div>
<div class="chart-legend">
<p><span class="jp-color3"></span> JPA: 110.000 alunos</p>
<p><span class="pb-color"></span> PB: 270.000 alunos</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: MEC</p>
</div>
<p class="p-4 ps-0">O número de estudantes no ensino superior em João Pessoa representa 40,7% do total de estudantes universitários da Paraíba. Esse dado reflete a capacidade da capital em oferecer educação de qualidade, com instituições públicas como a Universidade Federal da Paraíba (UFPB) e a Universidade Estadual da Paraíba (UEPB), além das universidades privadas, que têm grande influência na formação de mão de obra qualificada para os setores produtivos da cidade e do estado.<br><br>
Essa concentração de estudantes universitários contribui diretamente para o dinamismo socioeconômico, criando um ambiente favorável ao desenvolvimento de startups, inovações tecnológicas e qualificando a força de trabalho local.</p>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVehiclesChart);
function drawVehiclesChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 456732, 'JPA: 456.732 veículos (28,6%)'],
['Paraíba', 1595706, 'PB: 1.595.706 veículos (71,4%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'FROTA DE VEÍCULOS',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#FF625F' },
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('vehicles_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
// centerText.style.fontWeight = 'bold';
// centerText.style.color = '#5D4037';
centerText.textContent = '28,6%';
var chartContainer = document.getElementById('vehicles_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card4 { background-color: #DAD4BC !important; }
.jp-color4 { background-color: #FF625F !important; }
</style>
<div class="chart-card4 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px" style="color: #ff625f">Frota de veículos</h5>
<div class="chart-container" id="vehicles_chart"></div>
<div class="chart-legend">
<p><span class="jp-color4"></span> JPA: 456.732 veículos</p>
<p><span class="pb-color"></span> PB: 1.595.706 veículos</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: Detran-PB</p>
</div>
<p class="p-4 ps-0">A frota de veículos de João Pessoa representa 28,6% da frota estadual, o que indica um alto nível de motorização. Isso evidencia a necessidade urgente de planejamento de mobilidade urbana eficiente, que acompanhe o aumento da frota, de modo a evitar congestionamentos e melhorar a qualidade de vida dos habitantes e dos turistas. Investimentos em transporte público e soluções sustentáveis para a mobilidade urbana devem ser priorizados, pois, João Pessoa, em breve, alcançará 500 mil veículos.</p>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawHospitalBedsChart);
function drawHospitalBedsChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 3000, 'JPA: 3.000 leitos (24,0%)'],
['Paraíba', 12500, 'PB: 12.500 leitos (76,0%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'LEITOS HOSPITALARES',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#67D7C7' }, // Cor verde-água para os leitos
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('hospital_beds_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#f0f0f0';
centerText.textContent = '24,0%';
var chartContainer = document.getElementById('hospital_beds_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card5 { background-color: #814F77 !important; }
.jp-color5 { background-color: #67D7C7 !important; }
</style>
<div class="chart-card5 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px;color: #67D7C7">Nº de leitos hospitalares</h5>
<div class="chart-container" id="hospital_beds_chart"></div>
<div class="chart-legend">
<p class="text-light"><span class="jp-color5"></span> JPA: 3.000 leitos</p>
<p class="text-light"><span class="pb-color"></span> PB: 12.500 leitos</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: CNES</p>
</div>
<p class="p-4 ps-0">O número de leitos hospitalares da cidade representa 24,0% dos leitos hospitalares do estado, o que, embora significativo, ainda aponta para a necessidade de expansão dos serviços de saúde, considerando o aumento populacional e os desafios na área da saúde pública no atendimento médico-hospitalar.</p>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawMHBedsChart);
function drawMHBedsChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 12353, 'JPA: 12.353 leitos (39,1%)'],
['Paraíba', 31630, 'PB: 31.630 leitos (60,9%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'LEITOS EM MEIOS DE HOSPEDAGEM',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#3D7F75' }, // Cor verde para os leitos
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('mh_beds_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#3D7F75';
centerText.textContent = '39,1%';
var chartContainer = document.getElementById('mh_beds_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card6 { background-color: #67D7C7 !important; }
.jp-color6 { background: #3D7F75; }
</style>
<div class="chart-card6 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px;color: #3D7F75;">Nº de leitos em MHs</h5>
<div class="chart-container" id="mh_beds_chart"></div>
<div class="chart-legend">
<p><span class="jp-color6"></span> JPA: 12.353 leitos</p>
<p><span class="pb-color"></span> PB: 31.630 leitos</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: PBTur</p>
</div>
<p class="p-4 ps-0">João Pessoa tem 439 anos, é o principal destino turístico do estado, concentra 39,1% do total dos leitos em MHs da PB. Esse elevado número demonstra a grande capacidade de hospedagem da capital paraibana, que se destaca especialmente pelas deslumbrantes praias, infraestrutura turística e atrações geográficas, culturais e históricas. A Ponta do Seixas é o ponto mais oriental do continente americano e o Tour Geneve é o prédio mais alto do NE e o segundo mais alto do Brasil, ambos estão localizados na cidade com o melhor ar puro do País.</p>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawPovertyChart);
function drawPovertyChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 450000, 'JPA: 450.000 pessoas (37,5%)'],
['Paraíba', 1200000, 'PB: 1.200.000 pessoas (62,5%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'POBREZA ABSOLUTA',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75, // Aumento do buraco central
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#484743' }, // Cor cinza escuro
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('poverty_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px'; // Fonte aumentada
centerText.style.color = '#484743'; // Removido o bold
centerText.textContent = '37,5%';
var chartContainer = document.getElementById('poverty_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card7 { background-color: #FF625F !important; }
.chart-container { width: 100%; height: 200px; position: relative; }
.chart-legend { margin-top: 15px; font-size: 13px; }
.chart-legend span { display: inline-block; width: 10px; height: 10px; margin-right: 5px; }
.jp-color7 { background: #484743; }
.pb-color { background: #f0f0f0; }
.text-light { color: #fff !important; }
</style>
<div class="chart-card7 px-5 py-4 pt-45">
<h5 style="height:48px;" class="mb-3 text-light">Nº de pobres</h5>
<div class="chart-container" id="poverty_chart"></div>
<div class="chart-legend">
<p class="text-light"><span class="jp-color7"></span> JPA: 450.000 pessoas</p>
<p class="text-light"><span class="pb-color"></span> PB: 1.200.000 pessoas</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: IBGE</p>
</div>
<div class="p-4 ps-0">
O contingente de pessoas inserida na pobreza absoluta em João Pessoa representa 37,5% do estado da Paraíba. Com certeza, é um reflexo da desigualdade social na capital paraibana que precisa ser atacada por políticas públicas de inclusão social.
</div>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawUnemploymentChart);
function drawUnemploymentChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {
role: 'tooltip',
type: 'string'
}],
['João Pessoa', 45000, 'JPA: 45.000 desempregados (31,9%)'],
['Paraíba', 141000, 'PB: 141.000 desempregados (68,1%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'DESEMPREGO',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
pieHole: 0.75, // Buraco central aumentado
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {
0: { color: '#484743' }, // Cor cinza escuro
1: { color: '#f0f0f0' }
},
legend: 'none',
chartArea: {
width: '90%',
height: '90%'
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
animation: {
duration: 1000,
easing: 'out',
startup: true
}
};
var chart = new google.visualization.PieChart(document.getElementById('unemployment_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px'; // Fonte aumentada
centerText.style.color = '#484743'; // Sem bold
centerText.textContent = '31,9%';
var chartContainer = document.getElementById('unemployment_chart');
chartContainer.style.position = 'relative';
chartContainer.appendChild(centerText);
}
</script>
<style>
.chart-card8 { background-color: #FFC857 !important; }
.jp-color8 { background: #484743; }
</style>
<div class="chart-card8 px-5 py-4 pt-45">
<h5 style="height:48px;" class="mb-3">Nº de desempregados (sem trabalho)</h5>
<div class="chart-container" id="unemployment_chart"></div>
<div class="chart-legend">
<p class="text-dark"><span class="jp-color8"></span> JPA: 45.000 sem trab.</p>
<p class="text-dark"><span class="pb-color"></span> PB: 141.000 sem trab.</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
<div class="p-4 ps-0">
O número de desempregados na capital paraibana é alto, representando 31,9% do total de desocupados no estado. Esse indicador-chave indica a necessidade de políticas públicas mais eficazes voltadas para a qualificação profissional e a criação de novas oportunidades de emprego, especialmente no contexto da 4ª Revolução Industrial.
</div>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawCompaniesChart);
function drawCompaniesChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {role: 'tooltip', type: 'string'}],
['João Pessoa', 50000, 'JPA: 50.000 empresas (33,3%)'],
['Paraíba', 150000, 'PB: 150.000 empresas (66,7%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'EMPRESAS',
titleTextStyle: {fontSize: 16, bold: true, color: '#333'},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {0: {color: '#FF625F'}, 1: {color: '#f0f0f0'}},
legend: 'none',
chartArea: {width: '90%', height: '90%'},
tooltip: {isHtml: true, trigger: 'focus'},
animation: {duration: 1000, easing: 'out', startup: true}
};
var chart = new google.visualization.PieChart(document.getElementById('companies_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#FF625F';
centerText.textContent = '33,3%';
document.getElementById('companies_chart').appendChild(centerText);
}
</script>
<style>
.chart-card9 { background-color: #DAD4BC !important; }
.jp-color9 { background: #FF625F; }
</style>
<div class="chart-card9 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px;color:#ff625f">Nº de empresas</h5>
<div class="chart-container" id="companies_chart"></div>
<div class="chart-legend">
<p class="text-dark"><span class="jp-color9"></span> JPA: 50.000 empresas</p>
<p class="text-dark"><span class="pb-color"></span> PB: 150.000 empresas</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: Junta Comercial</p>
</div>
<div class="p-4 ps-0">
A tropical João Pessoa concentra 33,3% das empresas do estado, o que reflete sua centralidade no empreendedorismo e na geração de negócios. Isso pode ser um indicativo de um ambiente favorável para novos empreendimentos, mas também revela a necessidade de continuar o fomento ao setor empresarial com políticas de incentivo, como desburocratização e financiamento acessível.
</div>
</div>
<div class="col-md-3 px-0">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawHouseholdsChart);
function drawHouseholdsChart() {
var data = google.visualization.arrayToDataTable([
['Indicador', 'Valor', {role: 'tooltip', type: 'string'}],
['João Pessoa', 320000, 'JPA: 320.000 domicílios (27,8%)'],
['Paraíba', 1150000, 'PB: 1.150.000 domicílios (72,2%)']
]);
var options = {
backgroundColor: 'transparent',
title: 'DOMICÍLIOS',
titleTextStyle: {fontSize: 16, bold: true, color: '#333'},
pieHole: 0.75,
pieSliceText: 'none',
pieSliceBorderColor: 'transparent',
slices: {0: {color: '#67D7C7'}, 1: {color: '#f0f0f0'}},
legend: 'none',
chartArea: {width: '90%', height: '90%'},
tooltip: {isHtml: true, trigger: 'focus'},
animation: {duration: 1000, easing: 'out', startup: true}
};
var chart = new google.visualization.PieChart(document.getElementById('households_chart'));
chart.draw(data, options);
var centerText = document.createElement('div');
centerText.style.position = 'absolute';
centerText.style.top = '50%';
centerText.style.left = '50%';
centerText.style.transform = 'translate(-50%, -50%)';
centerText.style.fontSize = '30px';
centerText.style.color = '#67D7C7';
centerText.textContent = '27,8%';
document.getElementById('households_chart').appendChild(centerText);
}
</script>
<style>
.chart-card10 { background-color: #814F77 !important; }
.jp-color10 { background: #67D7C7; }
</style>
<div class="chart-card10 px-5 py-4 pt-45">
<h5 class="mb-3" style="height:48px;color:#67d7c7">Nº de domicílios</h5>
<div class="chart-container" id="households_chart"></div>
<div class="chart-legend">
<p class="text-light"><span class="jp-color10"></span> JPA: 320.000 dom.</p>
<p class="text-light"><span class="pb-color"></span> PB: 1.150.000 dom.</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: IBGE</p>
</div>
<div class="p-4 ps-0">
A litorânea João Pessoa representa 27,8% do total de domicílios da PB. Esse dado é relevante, pois demonstra que a capital concentra uma parte significativa de domicílios do estado, o que está alinhado com sua população estimada e seu papel econômico e social. A alta concentração de domicílios em JPA é um reflexo da urbanização crescente e da centralização de atividades econômicas e serviços na cidade. Em 2022, existiam 114 mil apartamentos nos 65 bairros da capital paraibana, conforme o IBGE.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="economico">
<div class="about-area2 section-padding pt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 mb-5 pb-5">
<div class="section-tittle">
<p class="mb-0">O cenário econômico recente desempenha papel central na Paraíba. A retomada econômica pós-pandemia, impulsionada por políticas de estímulo, tem favorecido a recuperação do consumo e dos investimentos, embora essa trajetória seja limitada por desafios nacionais, como inflação elevada, custos de crédito mais altos e incertezas fiscais. Regionalmente, a economia da Paraíba tem se beneficiado de fatores como investimentos em infraestrutura e o dinamismo do turismo, que contribuem para sustentar a atividade econômica.</p>
</div>
</div>
</div>
<div class="row justify-content-center px-3">
<div class="col-md-10">
<div class="row align-items-center pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawIAEPBChart);
function drawIAEPBChart() {
var data = google.visualization.arrayToDataTable([
['Ano', 'IAE-PB',
{
role: 'annotation',
type: 'string'
},
{
role: 'style',
type: 'string'
},
{
role: 'tooltip',
type: 'string',
p: {
html: true
}
}
],
['2004', 80, '80', '#000000', '<div style="padding:10px;min-width:150px"><strong>2004</strong><br>IAE-PB: <b>80</b></div>'],
['2008', 95, '95', '#FF4C4C', '<div style="padding:10px;min-width:150px"><strong>2008</strong><br>IAE-PB: <b>95</b></div>'],
['2012', 110, '110', '#00C2B2', '<div style="padding:10px;min-width:150px"><strong>2012</strong><br>IAE-PB: <b>110</b></div>'],
['2016', 105, '105', '#6C3B7E', '<div style="padding:10px;min-width:150px"><strong>2016</strong><br>IAE-PB: <b>105</b></div>'],
['2020', 90, '90', '#FFC857', '<div style="padding:10px;min-width:150px"><strong>2020</strong><br>IAE-PB: <b>90</b><br>(impacto COVID-19)</div>'],
['2024', 115, '115', '#3B3B3B', '<div style="padding:10px;min-width:150px"><strong>2024</strong><br>IAE-PB: <b>115</b></div>']
]);
var options = {
backgroundColor: 'transparent',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
chartArea: {
width: '100%',
height: '80%',
backgroundColor: 'transparent'
},
bar: {
groupWidth: '70%'
},
legend: 'none',
hAxis: {
textStyle: {
color: '#333',
fontSize: 14
}
},
vAxis: {
minValue: 0,
gridlines: {
color: 'rgba(240,240,240,0.2)'
},
textPosition: 'none'
},
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 12,
color: '#333',
bold: true
}
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('iae_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card11 { background-color: rgba(255, 200, 87, 0.2); border: 3px solid #FFC857 !important; }
.chart-container { width: 100% !important; height: 200px; position: relative; }
.chart-container>div>div { width: 100% !important; }
.jp-color2 { background: #484743; }
.pb-color2 { background: #FFC857; }
</style>
<div class="chart-card11 px-5 py-4 pt-45 text-center rounded">
<h5>Índice de Atividade Econômica<br>Paraíba (IAE-PB)</h5>
<div class="chart-container mb-4" id="iae_chart"></div>
<div class="chart-legend">
<p><span class="jp-color2"></span> <strong>Períodos Estáveis</strong></p>
<p><span class="pb-color2"></span> <strong>Períodos de Choques/Recuperação</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
</div>
<div class="col-md-6 pl-3 pe-0">
<div class="section-tittle">
<p class="px-4 mb-0">
O gráfico ao lado mostra a evolução do Índice de Atividade Econômica da Paraíba (IAE-PB), que mede o desempenho econômico do estado com base na arrecadação de tributos, movimentação do setor produtivo e dados fiscais. O índice, com defasagem reduzida, é uma ferramenta importante para acompanhar a atividade produtiva e orientar políticas públicas.<br><br> Nos últimos anos, apesar de oscilações, observa-se uma recuperação gradual da economia, mesmo com impactos de choques externos, como a pandemia. A tendência positiva aponta para um crescimento sustentável, condicionado a melhorias na infraestrutura e qualificação da mão de obra.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row align-items-center pb-5">
<div class="col-md-6 ps-0 pr-3">
<div class="section-tittle">
<p class="pe-4 mb-0">
O gráfico ao lado complementa a análise anterior ao detalhar o ciclo econômico da Paraíba, representando os desvios do IAE-PB em relação à sua tendência. Valores positivos indicam expansão econômica, enquanto valores negativos apontam retração. Atualmente, a Paraíba atravessa uma fase positiva do ciclo, com uma retomada consistente da atividade econômica, conforme dados do IBGE.<br><br> Esse cenário sinaliza uma recuperação gradual após choques recentes, como a pandemia, sugerindo um ambiente mais propício ao crescimento. Se mantida, essa tendência poderá fortalecer setores estratégicos e favorecer um desenvolvimento mais sustentável no médio prazo.
</p>
</div>
</div>
<div class="col-md-6 pe-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawCicloEconomicoChart);
function drawCicloEconomicoChart() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Ciclo Econômico',
{
role: 'annotation',
type: 'string'
},
{
role: 'style',
type: 'string'
},
{
role: 'tooltip',
type: 'string',
p: {
html: true
}
}
],
['2005', 1, '1', '#FF625F', '<div style="padding:10px;min-width:150px"><strong>2005</strong><br>Variação: <b>+1%</b></div>'],
['2010', -1, '-1', '#FF625F', '<div style="padding:10px;min-width:150px"><strong>2010</strong><br>Variação: <b>-1%</b></div>'],
['2015', -3, '-3', '#FF625F', '<div style="padding:10px;min-width:150px"><strong>2015</strong><br>Variação: <b>-3%</b></div>'],
['2020', -4, '-4', '#FF625F', '<div style="padding:10px;min-width:150px"><strong>2020</strong><br>Variação: <b>-4%</b><br>(impacto COVID-19)</div>']
]);
var options = {
backgroundColor: 'transparent',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#333'
},
chartArea: {
width: '90%',
height: '80%',
backgroundColor: 'transparent'
},
legend: 'none',
hAxis: {
ticks: [2005, 2010, 2015, 2020],
textStyle: {
color: '#333',
fontSize: 12
}
},
vAxis: {
ticks: [-4, -3, -2, -1, 0, 1],
gridlines: {
color: 'rgba(200,200,200,0.3)'
},
textStyle: {
color: '#333',
fontSize: 12
}
},
annotations: {
alwaysOutside: false,
textStyle: {
fontSize: 11,
color: '#333',
bold: true
}
},
tooltip: {
isHtml: true,
trigger: 'focus'
},
lineWidth: 3,
colors: ['#DAD4BC'],
pointsVisible: true,
pointShape: 'circle',
pointSize: 6,
curveType: 'function' // Suaviza a linha
};
var chart = new google.visualization.LineChart(document.getElementById('ciclo_economico_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card12 { background-color: rgba(218, 212, 188, 0.2); border: 3px solid #DAD4BC !important; }
.jp-color12 { background: #484743; }
.pb-color12 { background: #FF625F; }
</style>
<div class="chart-card12 px-5 py-4 pt-45 text-center rounded">
<h5>Ciclo da Atividade Econômica – Paraíba<br>jan. 2005 – set. 2024</h5>
<div class="chart-container mb-4" id="ciclo_economico_chart"></div>
<div class="chart-legend">
<p><span class="jp-color12"></span> <strong>Períodos de Expansão</strong></p>
<p><span class="pb-color12"></span> <strong>Períodos de Recessão</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawReceitaComercioChart);
function drawReceitaComercioChart() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Brasil', 'Paraíba',
{
role: 'annotation',
type: 'string',
p: {
html: true
}
},
{
role: 'tooltip',
type: 'string',
p: {
html: true
}
}
],
['2012', 100, 90, null, '<div style="padding:10px;min-width:150px"><strong>2012</strong><br>Brasil: <b>R$ 100 bi</b><br>PB: <b>R$ 90 mi</b></div>'],
['2016', 120, 95, null, '<div style="padding:10px;min-width:150px"><strong>2016</strong><br>Brasil: <b>R$ 120 bi</b><br>PB: <b>R$ 95 mi</b><br>(crise econômica)</div>'],
['2020', 110, 85, null, '<div style="padding:10px;min-width:150px"><strong>2020</strong><br>Brasil: <b>R$ 110 bi</b><br>PB: <b>R$ 85 mi</b><br>(pandemia)</div>'],
['2024', 150, 115, null, '<div style="padding:10px;min-width:150px"><strong>2024</strong><br>Brasil: <b>R$ 150 bi</b><br>PB: <b>R$ 115 mi</b></div>']
]);
var options = {
backgroundColor: 'transparent',
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#f0f0f0'
},
chartArea: {
width: '85%',
height: '75%',
backgroundColor: 'transparent'
},
series: {
0: {
color: '#f0f0f0',
lineWidth: 3,
pointSize: 6
}, // Brasil
1: {
color: '#67D7C7',
lineWidth: 3,
pointSize: 6
} // Paraíba
},
hAxis: {
ticks: [2012, 2016, 2020, 2024],
textStyle: {
color: '#f0f0f0',
fontSize: 12
} // Cor dos anos alterada para #f0f0f0
},
vAxis: {
title: 'Receita (R$)',
titleTextStyle: {
color: '#f0f0f0',
italic: false
},
gridlines: {
color: 'rgba(200,200,200,0.3)'
},
textStyle: {
color: 'rgba(200,200,200,0.3)'
},
baselineColor: 'rgba(200,200,200,0.3)'
},
legend: {
position: 'top',
textStyle: {
color: '#67D7C7'
}
},
tooltip: {
isHtml: true
},
curveType: 'function', // Linha suavizada
focusTarget: 'category'
};
var chart = new google.visualization.LineChart(document.getElementById('receita_comercio_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card13 { background-color: rgba(129, 79, 119, 1); border: 3px solid #814F77 !important; }
.br-color { background: #814F77; } /* Cor Brasil */
.pb-color { background: #67D7C7; } /* Cor Paraíba */
</style>
<div class="chart-card13 px-5 py-4 pt-45 text-center rounded">
<h5 style="color: #67D7C7;">Receita Nominal de Vendas do Comércio<br><span style="color:#f0f0f0">Brasil e Paraíba (2012–2024)</span></h5>
<div class="chart-container mb-4" id="receita_comercio_chart"></div>
<div class="chart-legend">
<p class="text-light"><span class="br-color"></span> <strong>Brasil</strong> <span class="pb-color"></span> <strong>Paraíba</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: IBGE</p>
</div>
<div class="section-tittle">
<p class="pt-4 mb-0">
O gráfico acima mostra a evolução da receita nominal de vendas do comércio no Brasil e na Paraíba, permitindo uma comparação entre as duas regiões. Observa-se que, ao longo do período analisado, a Paraíba segue uma tendência similar à nacional, com oscilações que acompanham os ciclos econômicos. No entanto, as variações são mais contidas no estado, refletindo características regionais, como menor diversificação do comércio e maior dependência de setores específicos. Recentemente, houve uma recuperação na receita nominal de vendas, impulsionada pela recuperação econômica pós-pandemia, reaquecimento da demanda interna e redução de restrições sanitárias. Esse comportamento reforça a importância do comércio para a economia paraibana e destaca a necessidade de políticas que incentivem o consumo e apoiem a expansão do setor, especialmente em cidades com menor dinamismo econômico.
</p>
</div>
</div>
<div class="col-md-6 pe-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawReceitaServicosChart);
function drawReceitaServicosChart() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Brasil', 'Paraíba',
{
role: 'tooltip',
type: 'string',
p: {
html: true
}
}
],
['2012', 120, 100, '<div style="padding:10px;min-width:150px;color:#333"><strong>2012</strong><br>Brasil: <b>R$ 120 bi</b><br>PB: <b>R$ 100 mi</b></div>'],
['2014', 140, 110, '<div style="padding:10px;min-width:150px;color:#333"><strong>2014</strong><br>Brasil: <b>R$ 140 bi</b><br>PB: <b>R$ 110 mi</b></div>'],
['2016', 130, 105, '<div style="padding:10px;min-width:150px;color:#333"><strong>2016</strong><br>Brasil: <b>R$ 130 bi</b><br>PB: <b>R$ 105 mi</b><br>(crise econômica)</div>'],
['2018', 160, 120, '<div style="padding:10px;min-width:150px;color:#333"><strong>2018</strong><br>Brasil: <b>R$ 160 bi</b><br>PB: <b>R$ 120 mi</b></div>'],
['2020', 150, 95, '<div style="padding:10px;min-width:150px;color:#333"><strong>2020</strong><br>Brasil: <b>R$ 150 bi</b><br>PB: <b>R$ 95 mi</b><br>(pandemia)</div>'],
['2022', 190, 150, '<div style="padding:10px;min-width:150px;color:#333"><strong>2022</strong><br>Brasil: <b>R$ 190 bi</b><br>PB: <b>R$ 150 mi</b><br>(retomada)</div>'],
['2024', 220, 180, '<div style="padding:10px;min-width:150px;color:#333"><strong>2024</strong><br>Brasil: <b>R$ 220 bi</b><br>PB: <b>R$ 180 mi</b></div>']
]);
var options = {
backgroundColor: {
fill: '#67D7C7',
fillOpacity: 1
},
titleTextStyle: {
fontSize: 16,
bold: true,
color: '#f0f0f0' // Título em #f0f0f0
},
chartArea: {
width: '85%',
height: '75%',
backgroundColor: 'transparent', // Área do gráfico transparente
},
series: {
0: {
color: '#3D7F75',
lineWidth: 3,
pointSize: 6
}, // Brasil (verde-escuro)
1: {
color: '#f0f0f0',
lineWidth: 3,
pointSize: 6
} // Paraíba (cinza claro)
},
hAxis: {
ticks: [2012, 2014, 2016, 2018, 2020, 2022, 2024], // 7 períodos
textStyle: {
color: '#f0f0f0',
fontSize: 12
} // Cor dos anos em #f0f0f0
},
vAxis: {
title: 'Receita (R$)',
titleTextStyle: {
color: '#f0f0f0',
italic: false
}, // Cor do título do eixo Y em #f0f0f0
gridlines: {
color: 'rgba(61, 127, 117, 0.3)'
}, // Cor das linhas horizontais com opacidade 0.3
textStyle: {
color: 'rgba(200,200,200,0.3)'
},
minValue: 80, // Ajuste para incluir todos os valores
baselineColor: 'rgba(200,200,200,0.3)'
},
legend: {
position: 'top',
textStyle: {
color: '#f0f0f0'
} // Cor da legenda em #f0f0f0
},
tooltip: {
isHtml: true
},
curveType: 'function',
focusTarget: 'category'
};
var chart = new google.visualization.LineChart(document.getElementById('receita_servicos_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card14 { background-color: #67D7C7 !important; border: 3px solid #67D7C7 !important; color: white !important; }
.br-color { background: #3D7F75; } /* Cor Brasil */
.pb-color { background: #f0f0f0; } /* Cor Paraíba */
</style>
<div class="chart-card14 px-5 py-4 pt-45 text-center rounded">
<h5 style="color: #3D7F75;">Receita Nominal de Serviços<br><span style="color:#f0f0f0">Brasil e Paraíba (2012–2024)</span></h5>
<div class="chart-container mb-4" id="receita_servicos_chart"></div>
<div class="chart-legend">
<p><span class="br-color"></span> <strong>Brasil</strong> <span class="pb-color"></span> <strong>Paraíba</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
<div class="section-tittle">
<p class="pt-4 mb-0 text-dark">
No período mais recente, nota-se uma recuperação expressiva na receita de serviços, refletindo o impacto positivo da retomada de atividades presenciais. Esse crescimento é particularmente significativo para a Paraíba, dado o papel estratégico do setor de serviços na geração de emprego e renda. Contudo, o desempenho futuro dependerá da capacidade de manter a confiança dos consumidores e de diversificar os serviços oferecidos, ampliando a competitividade regional.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row align-items-center pb-5">
<div class="col-md-7 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart24);
function drawChart24() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Brasil', 'Paraíba'],
['2014', 100, 100],
['2016', 110, 108],
['2018', 125, 123],
['2020', 140, 138],
['2022', 185, 183],
['2024', 200, 198]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '85%',
height: '80%'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'transparent'
},
slantedText: false,
showTextEvery: 1
},
vAxis: {
title: 'Set/14 = 100',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(240,240,240,0.2)'
}
},
legend: {
position: 'bottom',
textStyle: {
fontSize: 13
}
},
colors: ['#000000', '#FFC857'],
tooltip: {
isHtml: true
},
bar: { groupWidth: '60%' }, // Deixa as colunas com largura legal
isStacked: false
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart24'));
chart.draw(data, options);
}
</script>
<style>
.chart-card24 { background-color: rgba(255, 200, 87, 0.2); border: 3px solid #FFC857 !important; }
.chart-container>div>div { width: 100% !important; }
</style>
<div class="chart-card24 px-5 py-4 pt-45 text-center rounded">
<h5>Custo médio m² da Construção Civil<br>Brasil e Paraíba (set. 2014 – nov. 2024)</h5>
<div class="chart-container mb-4" id="chart24"></div>
<div class="chart-legend">
<p><span class="jp-color2"></span> <strong>Brasil</strong> <span class="pb-color2"></span> <strong>Paraíba</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
</div>
<div class="col-md-5 pl-3 pe-0">
<div class="section-tittle">
<p class="px-4 mb-0">
O custo médio do metro quadrado da construção civil no Brasil e na Paraíba tem mostrado tendência de crescimento, impulsionado pela inflação, alta nos preços de insumos e escassez de matérias-primas. Embora acompanhe o cenário nacional, a Paraíba apresenta variações mais moderadas, indicando um ritmo de valorização mais equilibrado ou uma menor dinâmica no setor. Esse comportamento sugere que, apesar da recuperação econômica, o setor enfrenta desafios ligados aos custos elevados, o que pode impactar novos projetos e exigir medidas para ampliar a oferta de materiais e qualificar a mão de obra local.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart25);
function drawChart25() {
var data = google.visualization.arrayToDataTable([
['Período', 'Passageiros', { role: 'style' }],
['Jan 2022', 95000, '#ff4c4c'],
['Mar 2022', 102000, '#ff4c4c'],
['Jun 2022', 150000, '#ff4c4c'],
['Sep 2022', 120000, '#ff4c4c'],
['Jan 2023', 140000, '#3b3b3b'],
['Mar 2023', 130000, '#3b3b3b'],
['Jun 2023', 170000, '#3b3b3b'],
['Sep 2023', 135000, '#3b3b3b'],
['Jan 2024', 160000, '#6c3b7e'],
['Mar 2024', 125000, '#6c3b7e'],
['Jun 2024', 155000, '#6c3b7e'],
['Out 2024', 145000, '#6c3b7e']
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '90%',
height: '70%',
left: '10%'
},
hAxis: {
title: 'Período',
textStyle: {
fontSize: 11,
color: '#333'
},
slantedText: true,
slantedTextAngle: 45
},
vAxis: {
title: 'Passageiros',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(240,240,240,0.5)'
}
},
legend: 'none',
bar: {
groupWidth: '60%'
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart25'));
chart.draw(data, options);
}
</script>
<style>
.chart-card25 { background-color: rgba(255, 98, 95, 0.2); border: 3px solid #FF625F !important; }
.chart-container>div>div { width: 100% !important; }
.chart-legend25 .ano1 { background: #FF625F; }
.chart-legend25 .ano2 { background: #3b3b3b; }
.chart-legend25 .ano3 { background: #6c3b7e; }
</style>
<div class="chart-card25 px-5 py-4 pt-45 text-center rounded">
<h5>Fluxo de passageiros no<br>Aeroporto Internacional Presidente Castro Pinto, João Pessoa<br>jan. 2022 - out. 2024</h5>
<div class="chart-container chart-container25 mb-4" id="chart25"></div>
<div class="chart-legend chart-legend25">
<p><span class="ano1"></span> <strong>2022</strong> <span class="ano2"></span> <strong>2023</strong> <span class="ano3"></span> <strong>2024</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: AENA Brasil</p>
</div>
<div class="section-tittle">
<p class="p-4 mb-0">
O fluxo de passageiros no Aeroporto Internacional Presidente Castro Pinto, em João Pessoa, administrado pela AENA Brasil, registrou recuperação entre janeiro de 2022 e outubro de 2024. Após a queda durante a pandemia de COVID-19, observou-se uma trajetória de crescimento impulsionada pela reabertura do turismo e retomada da mobilidade. Esse aumento reforça a importância do turismo e da conectividade para a economia local, especialmente no setor de serviços.
</p>
</div>
</div>
<div class="col-md-6 pe-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart26);
function drawChart26() {
var data = google.visualization.arrayToDataTable([
['Período', 'Embarques', 'Desembarques'],
['Jan 2022', 45000, 50000],
['Mar 2022', 50000, 52000],
['Jun 2022', 75000, 75000],
['Sep 2022', 60000, 60000],
['Jan 2023', 70000, 70000],
['Mar 2023', 68000, 72000],
['Jun 2023', 85000, 85000],
['Sep 2023', 67000, 68000],
['Jan 2024', 80000, 80000],
['Mar 2024', 62000, 63000],
['Jun 2024', 77000, 78000],
['Out 2024', 72000, 73000]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
title: 'Período',
slantedText: true,
slantedTextAngle: 45,
textStyle: {
fontSize: 11,
color: '#333'
}
},
vAxis: {
title: 'Passageiros',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(240,240,240,0.2)'
}
},
legend: {
position: 'bottom',
textStyle: {
fontSize: 13
}
},
colors: ['#FF625F', '#DAD4BC'], // Embarques (vermelho claro) e Desembarques (cinza claro)
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart26'));
chart.draw(data, options);
}
</script>
<style>
.chart-card26 { background-color: rgba(218,212,188, 0.2); border: 3px solid #DAD4BC !important; }
.chart-container>div>div { width: 100% !important; }
.jp-color26 { background: #FF625F }
.pb-color26 { background: #DAD4BC }
</style>
<div class="chart-card26 px-5 py-4 pt-45 text-center rounded">
<h5>Quantidade de embarques e desembarques no<br>Aeroporto Internacional Presidente Castro Pinto, João Pessoa<br>jan. 2022 - out. 2024</h5>
<div class="chart-container mb-4" id="chart26"></div>
<div class="chart-legend">
<p><span class="jp-color26"></span> <strong>Embarques</strong> <span class="pb-color26"></span> <strong>Desembarques</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: AENA Brasil</p>
</div>
<div class="section-tittle">
<p class="p-4 mb-0">
Entre janeiro de 2022 e outubro de 2024, os dados de embarques e desembarques no aeroporto de João Pessoa indicam recuperação gradual, com picos na alta temporada, revelando um turismo sazonal. A manutenção desse crescimento dependerá de estratégias que estimulem o turismo local e ampliem o tempo de permanência dos visitantes.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="fiscal">
<div class="about-area2 section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 mb-5 pb-5">
<div class="section-tittle">
<p class="mb-0">Texto internacional e fiscal.</p>
</div>
</div>
</div>
<div class="row justify-content-center px-3">
<div class="col-md-10">
<div class="row align-items-center pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawCreditChart);
function drawCreditChart() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Pessoas Físicas', 'Pessoas Jurídicas', 'Total'],
['2005', 15000, 25000, 40000],
['2010', 18000, 32000, 50000],
['2015', 22000, 38000, 60000],
['2020', 20000, 35000, 55000]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '85%',
height: '70%',
left: '10%',
right: '5%',
top: '15%'
},
isStacked: false, // Barras agrupadas
bar: {
groupWidth: '75%'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
}
},
vAxis: {
title: 'R$ (milhões)',
minValue: 0,
format: 'short',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(129,79,89,0.1)',
count: 6
}
},
colors: ['#67D7C7', '#3aa89a', '#814f77'], // 3 variações do #67D7C7
legend: {
position: 'none',
alignment: 'center',
textStyle: {
fontSize: 13
}
},
tooltip: {
isHtml: true,
trigger: 'focus'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('credit_chart'));
chart.draw(data, options);
}
</script>
<style>
.chart-card18 { background-color: rgba(129,79,89,0.1); border: 3px solid #814F77 !important; }
.jp-color18 { background: #67D7C7 }
.pb-color18 { background: #3AA89A }
.bg-color18 { background: #814F77 !important }
</style>
<div class="chart-card18 px-5 py-4 pt-45 text-center rounded">
<h5 style="color:#814F77 !important">Saldo das operações de crédito do Sistema Financeiro Nacional (SFN) – PB<br>jan. 2004 - out. 2024</h5>
<div class="chart-container mb-4" id="credit_chart"></div>
<div class="chart-legend">
<p><span class="jp-color18"></span> <strong>Pessoas físicas</strong> <span class="pb-color18"></span> <strong>Pessoas Jurídicas</strong> <span class="bg-color18"></span> <strong>Total</strong></p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: Elaboração própria a partir dos dados do BCB</p>
</div>
</div>
<div class="col-md-6 pe-0">
<div class="section-tittle">
<p class="p-4 mb-0">
A análise histórica do saldo das operações de crédito na Paraíba, entre janeiro de 2004 e outubro de 2024, revela crescimento contínuo, especialmente a partir de 2010, refletindo a expansão do crédito e o fortalecimento da economia local. O crédito para pessoas físicas cresceu mais que para jurídicas, impulsionado pelo maior acesso ao financiamento ao consumo e à habitação. Desde 2015, o crédito para empresas desacelerou, possivelmente por crises econômicas e dificuldades no ambiente de negócios. Após 2020, o crédito às famílias aumentou fortemente, em parte pelos estímulos adotados durante a pandemia. Em comparação com outros estados do Nordeste, a Paraíba mantém participação modesta, atrás da Bahia, Ceará, Pernambuco e Maranhão. O crescimento do crédito às famílias exige atenção para evitar o endividamento excessivo.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="section-tittle">
<p>A seguir, é apresentado a balança comercial da Paraíba no intervalo de janeiro de 2005 e novembro de 2024, destacando para três componentes principais: exportações de bens, que são as vendas internacionais feitas pelo estado; importações de bens, correspondendo às compras internacionais; e o saldo da balança comercial, que é a diferença entre exportações e importações.</p>
<p>Esse saldo indica se há superávit ou déficit, retratando o mesmo desempenho comercial do estado no período analisado, conforme os dados do Ministério do Desenvolvimento, Indústria, Comércio e Serviços (MDIC).</p>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-8">
<div class="row align-items-center ">
<div class="col-md-12">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart19);
function drawChart19() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Exportação de bens', 'Importação de bens', 'Saldo da balança comercial'],
['2005', 15000, 12000, 3000],
['2010', 30000, 32000, -2000],
['2015', 50000, 55000, -5000],
['2020', 65000, 85000, -20000],
['2024', 70000, 90000, -20000]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '85%',
height: '70%',
left: '10%',
right: '5%',
top: '15%',
backgroundColor: 'transparent'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
}
},
vAxis: {
title: 'US$ (mil)',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(215,209,185,0.2)'
}
},
legend: {
position: 'none',
textStyle: {
fontSize: 13
}
},
colors: ['#FFC857', '#00C2B2', '#FF625F'], // cores corrigidas individualmente
isStacked: false,
bar: {
groupWidth: '75%'
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart19'));
chart.draw(data, options);
}
</script>
<style>
.chart-card19 { background-color: rgba(215, 209, 185, 0.2); border: 3px solid #D7D1B9 !important; }
.jp-color19 { background: #FFC857; }
.pb-color19 { background: #00C2B2; }
.bc-color19 { background: #FF625F; }
</style>
<div class="chart-card19 px-5 py-4 pt-45 text-center rounded">
<h5>Exportação, Importação e Saldo da Balança Comercial – PB<br><small>jan. 2005 – nov. 2024</small></h5>
<div class="chart-container mb-4" id="chart19"></div>
<div class="chart-legend">
<p><span class="jp-color19"></span> <strong>Exportação de bens</strong>
<span class="pb-color19"></span> <strong>Importação de bens</strong>
<span class="bc-color19"></span> <strong>Saldo da balança comercial</strong>
</p>
</div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: Elaboração própria a partir dos dados do MDIC</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 pb-5 px-3">
<div class="col-md-10">
<div class="section-tittle">
<p>A balança comercial paraibana mostra déficits estruturais, com importações crescendo mais que exportações - especialmente de bens industrializados. Essa dependência externa, agravada por crises e custos de insumos, exige políticas de diversificação produtiva e fortalecimento da indústria local para maior estabilidade econômica.
</p>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row pb-5">
<div class="col-md-6 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart20);
function drawChart20() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Resultado Primário'],
['2008', -50],
['2010', 30],
['2012', 150],
['2014', -140],
['2016', 20],
['2018', 40],
['2020', 60],
['2022', 250],
['2024', 150]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
}
},
vAxis: {
title: 'R$ (milhões)',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(72,71,67,0.2)' // atualizado aqui
}
},
legend: 'none',
colors: ['#f0f0f0'],
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart20'));
chart.draw(data, options);
}
</script>
<style>
.chart-card20 { background-color: #FF625F; border: 3px solid #FF625F !important; }
</style>
<div class="chart-card20 px-5 py-4 pt-45 text-center rounded">
<h5 class="text-light">Necessidades de financiamento do Município de João Pessoa – Resultado Primário<br><small>Fluxo acumulado no ano, 2T. 2008 - 2T. 2024</small></h5>
<div class="chart-container mb-4" id="chart20"></div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: Elaboração própria a partir dos dados do BCB</p>
</div>
<div class="section-tittle">
<p class="pt-4 mb-0">O saldo primário acumulado do município de João Pessoa (PB), entre o segundo trimestre de 2008 e o segundo trimestre de 2024, apresenta alta volatilidade, com variações expressivas ao longo do período. Entre 2008 e 2013, alternaram-se resultados positivos e negativos, com destaque para 2012, quando o saldo ultrapassou R$ 190 milhões. A partir de 2014, o saldo piorou, chegando a quase R$ 150 milhões negativos, em linha com a crise econômica nacional. Desde 2017, observou-se uma recuperação gradual, marcada por oscilações, mas com tendência de estabilização. Entre 2021 e 2024, houve crescimento mais consistente, com saldo positivo acima de R$ 250 milhões em 2022, impulsionado pela recuperação econômica e maior controle das despesas, embora ainda persistam flutuações que indicam desafios para a sustentabilidade fiscal.</p>
</div>
</div>
<div class="col-md-6 pe-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart21);
function drawChart21() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Juros Nominais'],
['2008', -2],
['2010', -5],
['2012', -4],
['2014', -3],
['2016', -8],
['2018', -10],
['2020', -12],
['2022', -20],
['2024', 5]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '100%',
height: '80%'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
}
},
vAxis: {
title: 'R$ (milhões)',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(240,240,240,0.2)'
}
},
legend: 'none',
colors: ['#3D7F75'],
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart21'));
chart.draw(data, options);
}
</script>
<style>
.chart-card21 { background-color: #67D7C7 !important; border: 3px solid #67D7C7 !important; }
</style>
<div class="chart-card21 px-5 py-4 pt-45 text-center rounded">
<h5 class="text-light">Necessidades de financiamento do Município de João Pessoa (PB) – Juros Nominais<br><small>Fluxo acumulado no ano, 2T. 2008 - 2T. 2024</small></h5>
<div class="chart-container mb-4" id="chart21"></div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small text-light">Fonte: Elaboração própria a partir dos dados do BCB</p>
</div>
<div class="section-tittle">
<p class="pt-4 mb-0">O fluxo acumulado anual de juros nominais do município de João Pessoa (PB), entre o segundo trimestre de 2008 e o segundo trimestre de 2024, revela variações importantes. Inicialmente, os valores foram relativamente estáveis e negativos, em torno de R$ 5 milhões. A partir de 2011, surgiram oscilações mais intensas, com alternância entre fluxos negativos e positivos. Entre 2015 e 2022, o padrão de variações regulares persistiu, até que, a partir do segundo semestre de 2022, observou-se uma recuperação consistente, culminando no pico da série em 2024. Esse movimento sugere uma melhora na situação financeira do município, possivelmente impulsionada por maior arrecadação, ajustes fiscais ou mudanças nas taxas de juros.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-5 px-3">
<div class="col-md-10">
<div class="row align-items-center pb-5">
<div class="col-md-7 ps-0">
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart22);
function drawChart22() {
var data = google.visualization.arrayToDataTable([
['Ano', 'Dívida Líquida'],
['2008', 80],
['2010', 120],
['2012', 100],
['2014', 150],
['2016', 300],
['2018', 450],
['2020', 600],
['2022', 700],
['2024', 200]
]);
var options = {
backgroundColor: 'transparent',
chartArea: {
width: '90%',
height: '70%',
left: '10%'
},
hAxis: {
title: 'Ano',
textStyle: {
fontSize: 12,
color: '#333'
}
},
vAxis: {
title: 'R$ (milhões)',
textStyle: {
fontSize: 12,
color: '#333'
},
gridlines: {
color: 'rgba(240,240,240,0.5)'
},
minValue: 0
},
legend: 'none',
colors: ['#FFC857'], // Cor das barras alterada para #FFC857
bar: {
groupWidth: '60%' // Largura das barras
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart22'));
chart.draw(data, options);
}
</script>
<style>
.chart-card22 { background-color: rgba(255, 200, 87, 0.2); border: 3px solid #FFC857 !important; }
</style>
<div class="chart-card22 px-5 py-4 pt-45 text-center rounded">
<h5>Dívida líquida do Município de João Pessoa (PB)<br>2T. 2008 - 2T. 2024</h5>
<div class="chart-container mb-4" id="chart22"></div>
<p class="mb-0 mt-3 d-flex align-items-left w-100 small">Fonte: IBGE</p>
</div>
</div>
<div class="col-md-5 pe-0">
<div class="section-tittle">
<p class="p-4 mb-0">
A dívida líquida de João Pessoa (PB) apresentou três fases entre 2008 e 2024. De 2008 a 2012, cresceu gradualmente, chegando a cerca de R$ 200 milhões negativos. De 2013 a 2020, houve uma redução consistente, atingindo o valor mais baixo de R$ -650 milhões. No entanto, desde 2022, a dívida aumentou novamente, especialmente em 2023 e 2024, devido à pressão fiscal pós-pandemia, aumento das taxas de juros e maior endividamento para investimentos públicos.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="fiscal">
<div class="about-area2 section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
<div class="about-caption about-caption1">
<div class="section-tittle">
<p>Conteúdo da aba Fiscal e Internacional aqui...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="social">
<div class="about-area2 section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12">
<div class="about-caption about-caption1">
<div class="section-tittle">
<p>Conteúdo da aba Social aqui...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-area footer-padding">
<div class="footer-wrapper ">
<div class="container">
<div class="row d-flex justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-caption mb-50">
<div class="single-footer-caption mb-30">
<div class="footer-logo mb-25">
<a href="./"><img src="../logo2.png" alt=""></a>
</div>
<div class="footer-tittle">
<div class="footer-pera">
<p>O Farol de Desenvolvimento da Paraíba reúne líderes comprometidos com o crescimento sustentável e a transformação do estado.</p>
</div>
</div>
<div class="footer-social">
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-pinterest-p"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-2 offset-lg-1 col-md-4 col-sm-5">
<div class="single-footer-caption mb-50">
<div class="footer-tittle">
<h4>Institucional</h4>
<ul>
<li><a href="#">Sobre nós</a></li>
<li><a href="diretoria.html">Diretoria</a></li>
<li><a href="#">Agenda</a></li>
<li><a href="#">Monitora PB</a></li>
<li><a href="#">Notícias</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-5">
<div class="single-footer-caption mb-50">
<div class="footer-tittle">
<h4> </h4>
<ul>
<li><a href="#">Fale conosco</a></li>
<li><a href="#">Termos de Uso</a></li>
<li><a href="#">Política de Privacidade</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-caption mb-50">
<div class="footer-tittle">
<h4>Newsletter</h4>
<p>Inscreva-se na nossa newsletter e acompanhe as novidades do Farol de Desenvolvimento da Paraíba.</p>
</div>
<div class="footer-form">
<div id="mc_embed_signup">
<form method="get" class="subscribe_form relative mail_part" novalidate="true">
<input type="email" name="email" id="email" placeholder="Digite seu e-mail">
<div class="form-icon">
<button type="submit" name="submit" id="newsletter-submit" class="email_icon newsletter-submit button-contactForm">Assine</button>
</div>
<div class="mt-10 info"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom-area">
<div class="container">
<div class="footer-border">
<div class="row d-flex align-items-center">
<div class="col-xl-12 ">
<div class="footer-copy-right text-center">
<p>Copyright © <script>document.write(new Date().getFullYear());</script> Farol institucional. Todos os direitos reservados.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<div id="back-top">
<a class="wrapper" title="Go to Top" href="#">
<div class="arrows-container">
<div class="arrow arrow-one"></div>
<div class="arrow arrow-two"></div>
</div>
</a>
</div>
<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<script src="./assets/js/jquery.slicknav.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.counterup.min.js"></script>
<script src="./assets/js/waypoints.min.js"></script>
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
<script>
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault(); // evita a mudança da URL com #
// Ativar o conteúdo da aba
const target = document.querySelector(this.getAttribute('href'));
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.remove('show', 'active');
});
target.classList.add('show', 'active');
// Atualizar estilos dos botões
document.querySelectorAll('.nav-link').forEach(el => {
el.classList.remove('red-bg', 'active');
el.classList.add('bg-secondary');
});
this.classList.add('red-bg', 'active');
this.classList.remove('bg-secondary');
});
});
</script>
<? include "_includes/footer.php"; ?>